Initial commit: 79+ design patterns, LLM prompts, and assets

concepts/animation-physics.md

@@ -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`