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:
neo committed 2026-06-21 20:40:35 +05:00
1 parent e3738f2b3e
commit 76c4c5b4fe
233 files changed
+54886 -1

No files matched your search

+62
View File
@@ -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`