design-systems: add 74 brand DESIGN.md files (VoltAgent/awesome-design-md)
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
This commit is contained in:
1 parent
e3738f2b3e
commit
76c4c5b4fe
233 files changed
+54886
-1
No files matched your search
@@ -0,0 +1,62 @@
|
||||
---
|
||||
title: Animation Physics & Easing
|
||||
description: Natural-feeling animations that follow physical principles.
|
||||
tags: [animation, physics, easing, motion, motion-design]
|
||||
---
|
||||
|
||||
# Animation Physics & Easing
|
||||
|
||||
## Easing Curves
|
||||
|
||||
### ease-out (default)
|
||||
```
|
||||
cubic-bezier(0.25, 0.1, 0.25, 1.0)
|
||||
```
|
||||
- Use for: entrances, hovers, reveals
|
||||
- Feel: snappy, confident
|
||||
|
||||
### ease-in-out
|
||||
```
|
||||
cubic-bezier(0.4, 0.0, 0.2, 1.0)
|
||||
```
|
||||
- Use for: page transitions, modals
|
||||
- Feel: smooth, balanced
|
||||
|
||||
### spring (natural bounce)
|
||||
```
|
||||
cubic-bezier(0.34, 1.56, 0.64, 1.0)
|
||||
```
|
||||
- Use for: magnetic buttons, pull-to-refresh
|
||||
- Feel: lively, tactile
|
||||
|
||||
## Duration Scale
|
||||
|
||||
| Context | Duration | Use Case |
|
||||
|---------|----------|----------|
|
||||
| Fast | 150ms | Icon hover, tooltip |
|
||||
| Normal | 300ms | Button hover, card lift |
|
||||
| Slow | 500ms | Page transitions, modals |
|
||||
| Epic | 800ms | Hero section reveals |
|
||||
|
||||
## Stagger Timing
|
||||
|
||||
```
|
||||
stagger = 0.06s - 0.12s per element
|
||||
```
|
||||
- Grid items: 0.08s
|
||||
- List items: 0.06s
|
||||
- Navigation: 0.05s
|
||||
|
||||
## Physics Rules
|
||||
|
||||
1. **Objects don't start at max speed** — always ease-out
|
||||
2. **Heavier elements move slower** — scale duration with size
|
||||
3. **Movement creates momentum** — add overshoot for spring effects
|
||||
4. **Elements react to each other** — chain animations logically
|
||||
5. **Silence matters** — pause between animation sequences
|
||||
|
||||
## Anti-Patterns
|
||||
- Never use linear easing (feels robotic)
|
||||
- Never animate everything at once (stagger!)
|
||||
- Never exceed 500ms for micro-interactions
|
||||
- Never ignore `prefers-reduced-motion`
|
||||
Reference in new issue
Block a user