Add LottieFiles motion-design skill

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0119deVM65AKpJiLTLhEdDg9
2026-10-18 21:44:48 +00:00
1 parent 0b42fdeae1
commit 91f727ad61
@@ -0,0 +1,93 @@
+# Choreography
+
+## Coordinated Entry Rules
+
+### 1. Lead with the Hero
+- Hero gets largest displacement and most attention-grabbing easing
+- Supporting elements are subtler in every dimension
+
+### 2. Spatial Origin Consistency
+All elements enter from same direction or shared origin. Mixed directions = chaos.
+
+### 3. Counter-Motion
+
+| Hero Motion | Counter-Motion | Speed Ratio |
+|-------------|---------------|-------------|
+| Enters left | Background shifts right | 20-30% |
+| Scales up | Shadow scales down | 10-20% |
+| Rotates CW | Ambient drifts CCW | 15-25% |
+| Lifts (Y up) | Shadow spreads + softens | 20-30% |
+
+## Sequence Structure
+
+| Phase | Duration Share | What Happens |
+|-------|--------------|-------------|
+| Setup | 20-30% | Elements enter, scene establishes |
+| Action | 30-40% | Primary motion, hero moment |
+| Resolution | 30-40% | Settle, secondary reactions, breathing |
+
+Leave 100-200ms stillness after resolution before new motion.
+
+## The 1/3 Rules
+
+**Distance**: No motion travels >1/3 screen without intermediate keyframe. Break with direction changes, speed variations, or arc adjustments.
+
+**Elements**: With 3+ animated elements, max 1/3 active simultaneously. Stagger so element 1 settles as element 3 starts.
+
+## Stagger Patterns
+
+| Pattern | Description | Best For |
+|---------|------------|----------|
+| Sequential | Reading order | Lists, grids |
+| Center-out | Radiating from center | Hero content, ripples |
+| Random | Varied timing | Organic, particle-like |
+| Wave | Sine-based | Data bars, continuous |
+| Reverse | Bottom-to-top | Exits, backward nav |
+
+- All staggered elements use same easing family
+- Vary only start time, not curve
+- Optional: last element gets slight overshoot (punctuation)
+
+## Shared Motion Events
+
+When multiple elements react to one trigger:
+- All start within 50ms of each other
+- Can arrive at different times (staggered landing)
+- Same easing family; motion originates from trigger point
+
+## Attention Direction
+
+| Technique | Implementation |
+|-----------|---------------|
+| Leading motion | Animate target before context |
+| Following motion | Settle on focal point |
+| Ambient motion | Subtle continuous in periphery |
+| Pointing motion | Directional toward CTA |
+
+### Depth Through Speed
+
+| Layer | Displacement | Speed |
+|-------|-------------|-------|
+| Foreground | 1.0x | Fastest |
+| Midground | 0.5x | Medium |
+| Background | 0.2x | Slowest |
+
+## Common Recipes
+
+### Dashboard Load
+1. Skeletons fade in (100ms)
+2. Hero metric (250ms, ease-out, 100ms delay)
+3. Supporting cards stagger (50ms between, 200ms each)
+4. Chart data draws in (300ms, starts with cards)
+5. Ambient pulse on primary metric
+
+### Modal Open
+1. Background dims (200ms)
+2. Modal scales 95%→100% + fades (300ms, 50ms delay)
+3. Content fades in (200ms, 100ms after modal)
+4. Close button last (150ms)
+
+### List Update (item added)
+1. Existing items shift down (200ms, ease-in-out)
+2. New item fades+slides from top (250ms, ease-out, 50ms delay)
+3. Subtle scale overshoot on land (3-5%)