Add LottieFiles motion-design skill

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0119deVM65AKpJiLTLhEdDg9

.agents/skills/motion-design/director/choreography.md

@@ -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%)

.agents/skills/motion-design/director/context-adaptation.md

@@ -0,0 +1,83 @@
+# Context Adaptation
+
+## Platform Scaling
+
+| Platform | Duration Modifier | Complexity | Physics |
+|----------|------------------|------------|---------|
+| Desktop | 1.0x (baseline) | Full | All types |
+| Tablet | 0.9x | Standard | Most types |
+| Mobile | 0.8x | Reduced (1-2 properties) | Snappy only |
+| Watch | 0.6x | Minimal (1 property) | None |
+| TV/Kiosk | 1.3x | Full | All types |
+
+**Mobile rules**: prefer opacity + transform; touch feedback <100ms; reduce stagger budgets by 30%; avoid parallax
+**Desktop opportunities**: hover states, cursor tracking, multi-column stagger, spatial choreography
+
+## Accessibility
+
+### prefers-reduced-motion
+
+| Original Motion | Reduced Alternative |
+|----------------|-------------------|
+| Slide entrance | Opacity fade only |
+| Bounce/spring | Instant or simple ease-out |
+| Parallax | Static positioning |
+| Auto-playing | Paused, user-initiated |
+| Complex choreography | Single fade |
+| Continuous ambient | Static or subtle opacity pulse |
+
+Reduced motion means: remove spatial movement, keep opacity, remove spring easing, reduce duration 50%+, never auto-play loops.
+
+### Vestibular Triggers (avoid or provide alternatives)
+- Large-scale zoom, full-screen position transitions
+- Spinning elements >100px, parallax >2 layers, rapid direction changes
+
+### Cognitive Accessibility
+- Same interaction = same animation every time
+- Pause controls for animations >5 seconds
+- Don't convey critical info through motion alone
+
+## Performance Budgets
+
+| Tier | Properties | Max Elements |
+|------|-----------|-------------|
+| Optimal | transform, opacity | Unlimited (GPU) |
+| Good | + color, clip-path | 10-15 |
+| Acceptable | + width, height, margin | 5-8 |
+| Avoid | box-shadow, border-radius, filter | 1-3 |
+
+- Target 60fps (16.67ms/frame); animation logic <10ms/frame
+- will-change sparingly; keep animated elements <20 per viewport
+- Stagger reduces peak load vs simultaneous
+- Fallback: 30fps acceptable for ambient
+
+## Content Type Adaptation
+
+| Content Type | Personality | Duration | Motion Density |
+|-------------|-------------|----------|---------------|
+| Financial | Corporate/Premium | 250-500ms | Low |
+| Social media | Playful | 150-300ms | Medium |
+| Enterprise SaaS | Corporate | 200-400ms | Low |
+| Gaming | Energetic | 100-250ms | High |
+| Healthcare | Corporate/Calm | 300-600ms | Very low |
+| E-commerce | Varies | 200-400ms | Medium |
+| Editorial | Premium | 350-600ms | Low |
+| Children's apps | Playful | 150-300ms | High |
+
+## Responsive Motion
+
+| Container Width | Max Displacement | Duration |
+|----------------|-----------------|----------|
+| <400px | 20% of width | 0.8x |
+| 400-800px | 25% of width | 1.0x |
+| 800-1200px | 20% of width | 1.0x |
+| >1200px | 15% of width | 1.1x |
+
+- Small viewport: sequential, one element at a time
+- Medium: standard stagger, 2-3 columns
+- Large: full choreography, center-out stagger, parallax
+
+## Dark Mode
+- Reduce motion intensity 10-20% (bright on dark = more impact)
+- Subtler ambient motion; careful with opacity values
+- Avoid pure white flashes

.agents/skills/motion-design/director/core-philosophy.md

@@ -0,0 +1,53 @@
+# Core Philosophy
+
+## Three Pillars
+
+### Pillar 1: Emotional Intent
+Define target emotion before choosing any property.
+
+| Emotion | Character | Timing | Easing |
+|---------|----------|--------|--------|
+| Trust | Smooth, predictable | 300-400ms | Gentle curves |
+| Delight | Bouncy, surprising | 200-300ms | Overshoot |
+| Urgency | Sharp, direct | 100-200ms | Snappy ease-out |
+| Calm | Slow, flowing | 500-1000ms | Sine curves |
+| Surprise | Sudden, explosive | 150-300ms | Exponential |
+| Confidence | Direct, decisive | 200-400ms | Strong ease-out |
+
+### Pillar 2: Visual Narrative
+
+| Phase | Duration Share | Purpose |
+|-------|--------------|---------|
+| Setup | 20-30% | Establish context, prepare viewer |
+| Action | 30-40% | Primary motion, hero moment |
+| Resolution | 30-40% | Settle, breathe, confirm |
+
+Even a 200ms tooltip fade has implicit setup→action→resolution.
+
+### Pillar 3: Motion Craft
+- Easing curves match emotional intent
+- Duration proportional to element size and distance
+- Arcs for organic, straight for mechanical
+- Secondary motion (shadows, related elements)
+- Nothing starts and stops all at once
+
+## Three Motion Layers
+
+| Layer | Role | Amplitude |
+|-------|------|-----------|
+| Primary | Main action viewer follows | 100% |
+| Secondary | Supporting richness | 30-50% |
+| Ambient | Background life | 10-20% |
+
+- Secondary offset 50-100ms from primary, different easing
+- Ambient is continuous/slow, never demands attention
+- Primary-only animation feels flat; always add secondary + ambient
+
+## The 1/3 Screen Rule
+No motion travels >1/3 screen without intermediate keyframe. Break with direction changes, speed shifts, or arc adjustments.
+
+## The Attention Budget
+- One hero motion per scene moment
+- Max 2-3 elements in active motion simultaneously
+- Ambient doesn't count against budget
+- Stagger rather than synchronize

.agents/skills/motion-design/director/decision-framework.md

@@ -0,0 +1,91 @@
+# Decision Framework
+
+## The First Questions
+
+### 1. Purpose?
+
+| Purpose | Approach | Priority |
+|---------|----------|----------|
+| Draw attention | Scale, color, pulse | Responsiveness |
+| Guide sequence | Stagger, directional flow | Clarity |
+| Provide feedback | Immediate response | Speed |
+| Create atmosphere | Subtle, continuous | Subtlety |
+| Explain relationship | Position, connection | Legibility |
+| Celebrate/reward | Overshoot, particles | Delight |
+
+### 2. Audience?
+- Stressed → calm motion; Browsing → richer motion
+- Task-focused → fast, minimal; Exploring → can be dramatic
+- Seen 100x/day → fast, subtle; Seen once → can be dramatic
+
+### 3. Context?
+- Busy layout → simpler motion; Empty → can be dramatic
+- Other animations active → coordinate or stagger
+- Small container → small motion
+
+## 4-Level Decision Hierarchy
+
+### Level 1: Motion Category
+
+| Category | When |
+|----------|------|
+| Revealing | Content appearing |
+| Concealing | Content disappearing |
+| Transitioning | Between states/views |
+| Emphasizing | Drawing attention |
+| Responding | Reacting to interaction |
+| Ambient | Background atmosphere |
+
+### Level 2: Motion Personality
+Match to brand. See [motion-personality.md](motion-personality.md).
+
+### Level 3: Motion Direction
+
+| Direction | Communicates |
+|-----------|-------------|
+| Upward | Growth, aspiration |
+| Downward | Settling, completion |
+| Leftward | Regression, departure |
+| Rightward | Progression, arrival |
+| Outward (scale up) | Importance, emergence |
+| Inward (scale down) | Dismissal, removal |
+| Center-seeking | Focus, convergence |
+| Center-fleeing | Distribution, release |
+
+### Level 4: Implementation Properties
+Choose animated properties. See [property-selection.md](../reference/property-selection.md).
+
+## Decision Quick-Path
+
+```
+1. PURPOSE → What does this motion DO?
+   ├── Feedback → short, ease-out, minimal
+   ├── Entrance → ease-out, personality-matched
+   ├── Exit → ease-in, 70% of entrance
+   ├── Emphasis → scale or color pulse
+   └── Ambient → slow, continuous, sine
+
+2. PERSONALITY → Match keywords
+   ├── Fun/bouncy → Playful
+   ├── Elegant/luxury → Premium
+   ├── Clean/professional → Corporate
+   └── Bold/dynamic → Energetic
+
+3. PROPERTIES → Minimum needed (two = sweet spot)
+
+4. TIMING → Check duration table, adjust for distance/weight
+
+5. EASING → Entering=ease-out, Leaving=ease-in, On-screen=ease-in-out, Looping=sine
+```
+
+## Evaluation Before Delivery
+
+| Check | Question |
+|-------|----------|
+| Purpose | Clear function? |
+| Personality | Matches brand/context? |
+| Repetition | Fine on 100th viewing? |
+| Attention | Respects viewer's focus? |
+| Hierarchy | Reinforces importance? |
+| Layers | Primary + secondary + ambient? |
+| Timing | Duration appropriate? |

.agents/skills/motion-design/director/disney-principles.md

@@ -0,0 +1,102 @@
+# Disney's 12 Principles — UI Adapted
+
+## 1. Squash and Stretch
+
+- Squash: scale ~[1.2, 0.8]; Stretch: ~[0.85, 1.15]
+- Impact: 2-4 frames (30-65ms); Recovery: 4-8 frames (65-130ms)
+- Preserve volume: width +20% → height decreases proportionally
+- Skip for premium/luxury brands
+
+## 2. Anticipation
+
+- Small motion opposite to main direction before action
+- Duration: 100-200ms, magnitude: 10-20% of main action
+- Button: scale down 3% before expanding; Card: shift 5-10px away first
+- Skip for micro-feedback (<150ms)
+
+## 3. Staging
+
+- Dim non-hero elements to 40-60% opacity; optional 2-4px blur
+- Hero enters 100-200ms after supporting elements
+- One primary action per timing beat
+
+## 4. Straight Ahead vs. Pose to Pose
+
+| Approach | Feel | Best For |
+|----------|------|----------|
+| Straight Ahead | Fluid, spontaneous | Particles, ambient, generative art |
+| Pose to Pose | Planned, controlled | UI transitions, state changes |
+
+## 5. Follow Through and Overlapping Action
+
+- Child delay: 50-150ms behind parent
+- Trailing elements: offset stop times by 100-200ms
+- Use spring easing for trailing parts (lower stiffness = more trailing)
+
+## 6. Slow In and Slow Out
+
+| Context | Easing | Why |
+|---------|--------|-----|
+| Entrance | ease-out | Arrives smoothly |
+| Exit | ease-in | Departs quickly |
+| On-screen | ease-in-out | Smooth journey |
+| Ambient loop | sine ease-in-out | Seamless |
+
+**NEVER** linear for spatial movement. Linear only for: rotation, progress bars, timers.
+
+## 7. Arcs
+
+- Add 10-20px perpendicular offset at path midpoint
+- Subtle (5px) for corporate, pronounced (20px+) for playful
+- Mechanical UIs can use straight paths intentionally
+
+## 8. Secondary Action
+
+- Amplitude: 30-50% of primary; timing: 50-100ms after primary
+- Different easing than primary
+- Examples: card enters → shadow grows; button presses → ripple expands
+
+## 9. Timing
+
+| Weight/Mood | Duration |
+|-------------|----------|
+| Heavy (modals, pages) | 400-800ms |
+| Light (tooltips, toggles) | 100-250ms |
+| Sad/serious | 600ms+ |
+| Happy/light | 200-400ms |
+| Urgent | 100-200ms |
+
+Enter-exit asymmetry: entrances 30-50% longer than exits.
+
+## 10. Exaggeration
+
+| Personality | Exaggeration |
+|-------------|-------------|
+| Playful | 15-25% |
+| Energetic | 20-30% |
+| Corporate | 0-5% |
+| Premium | 0% |
+
+- Scale overshoot: 10-30% beyond target; rotation: ±5-15°
+
+## 11. Solid Drawing
+
+- Maintain consistent proportions across keyframes
+- Use scale + rotation together for depth
+- Shadow behavior matches implied light source
+
+## 12. Appeal
+
+- Smooth curves over sharp angles; satisfying timing
+- Personality consistency across all elements
+- Appeal killers: jerky motion, inconsistent timing, abrupt stops, uniform animation
+
+## Combining Principles
+
+| Recipe | Principles Used |
+|--------|----------------|
+| Button press | Anticipation + Squash/Stretch + Follow-Through + Secondary + Timing |
+| Card entrance | Anticipation + Arcs + Slow In/Out + Follow-Through + Staging |
+| Success celebration | Exaggeration + Secondary + Timing + Squash/Stretch + Appeal |
+| Error shake | Timing + Slow In/Out + Staging (no exaggeration) |
+| Loading spinner | Timing + Slow In/Out + Appeal |

.agents/skills/motion-design/director/emotion-mapping.md

@@ -0,0 +1,71 @@
+# Emotion-to-Motion Mapping
+
+## Core Table
+
+| Emotion | Character | Path | Easing | Duration |
+|---------|----------|------|--------|----------|
+| Joy/Delight | Bouncy, arcs, overshoot | Curved, upward | ease-out-back | 200-400ms |
+| Calm/Serenity | Smooth, flowing | Gentle curves | sine ease-in-out | 500-1000ms |
+| Urgency/Alert | Sharp, fast, direct | Straight lines | ease-out | 100-200ms |
+| Sadness/Weight | Slow, downward | Drooping curves | cubic ease-in-out | 600-1200ms |
+| Surprise/Impact | Sudden, expanding | Radial outward | ease-out-expo | 150-300ms |
+| Elegance/Grace | Slow, controlled | Long smooth arcs | (0.4, 0, 0.2, 1) | 400-700ms |
+| Playfulness | Bouncy, irregular | Arcs, squiggly | ease-out-back | 200-350ms |
+| Confidence | Direct, decisive | Straight, horizontal | ease-out | 200-400ms |
+| Curiosity | Exploratory, varied | Mixed, circular | varied | 300-500ms |
+| Tenderness | Soft, gentle | Very subtle curves | soft ease-in-out | 600-1000ms |
+
+## Path as Emotional Language
+
+| Path Type | Connotation |
+|-----------|------------|
+| Angular/sharp | Tense, urgent, mechanical |
+| Curved/smooth | Relaxed, friendly, organic |
+| Spiral | Playful, whimsical |
+| Straight diagonal | Dynamic, purposeful |
+| Vertical up | Growth, achievement |
+| Vertical down | Settling, gravity |
+| Horizontal | Journey, progress |
+| Radial outward | Explosion, release |
+| Radial inward | Focus, convergence |
+
+## Emotional Intensity
+
+| Intensity | Characteristics | When |
+|-----------|----------------|------|
+| Low | Subtle opacity, tiny shifts | Ambient, routine |
+| Medium | Visible but not demanding | Most UI interactions |
+| High | Demands attention, large displacement | Errors, celebrations, onboarding |
+
+## Color Psychology
+
+| Color | Emotion | Animation Pairing |
+|-------|---------|------------------|
+| Blue | Trust, calm | Smooth, medium transitions |
+| Green | Success, growth | Upward, expansion, gentle overshoot |
+| Red | Alert, urgency | Sharp, fast, horizontal shakes |
+| Orange | Energy, warmth | Bouncy, diagonal paths |
+| Purple | Premium, mystery | Slow reveals, elegant easing |
+| Yellow | Optimism, caution | Quick pulses |
+| Teal | Modern, clarity | Clean, snappy transitions |
+
+### Color Transition Rules
+- Success: transition TO green (don't start with it)
+- Error: flash red then settle (don't sustain)
+- Warning: pulse yellow/amber for urgency
+- Neutral: use opacity rather than color change
+
+## Context-Based Emotion Defaults
+
+| Context | Default Emotion |
+|---------|----------------|
+| Form success | Joy + Confidence |
+| Validation error | Mild urgency |
+| Page load | Calm + Confidence |
+| Navigation | Confidence |
+| Notification | Mild surprise |
+| Loading | Calm |
+| Onboarding | Curiosity + Delight |
+| Dashboard | Calm + Confidence |
+| Purchase complete | Joy + Confidence |
+| Delete/remove | Calm (respectful departure) |

.agents/skills/motion-design/director/motion-personality.md

@@ -0,0 +1,89 @@
+# Motion Personality
+
+## Four Archetypes
+
+### Playful
+
+| Parameter | Value |
+|-----------|-------|
+| Duration | 150-300ms |
+| Easing | ease-out-back / bouncy springs |
+| Overshoot | 10-20% |
+| Paths | Arcs and curves, never straight |
+| Squash-stretch | Yes, on impacts |
+
+Signature: bounce settle, squash-stretch on press, rotation wobble, bright color pops, varied stagger timing.
+Use for: children's apps, casual games, social media, celebrations, onboarding, creative tools.
+
+### Premium / Luxury
+
+| Parameter | Value |
+|-----------|-------|
+| Duration | 350-600ms |
+| Easing | cubic-bezier(0.4, 0, 0.2, 1) |
+| Overshoot | 0% |
+| Paths | Smooth curves, subtle parallax |
+| Squash-stretch | Never |
+
+Signature: slow fades, subtle scale (98%→100%), generous pauses, minimal properties (opacity+one), ultra-smooth.
+Use for: fashion, finance, luxury brands, premium SaaS, portfolios, editorial.
+
+### Corporate / Professional
+
+| Parameter | Value |
+|-----------|-------|
+| Duration | 200-400ms |
+| Easing | cubic-bezier(0.2, 0, 0, 1) |
+| Overshoot | 0-3% |
+| Paths | Mostly straight, small arcs for emphasis |
+| Squash-stretch | No |
+
+Signature: consistent timing, clear state transitions, functional motion, predictable patterns, uniform stagger.
+Use for: enterprise, dashboards, business tools, admin, healthcare, banking.
+
+### Energetic / Dynamic
+
+| Parameter | Value |
+|-----------|-------|
+| Duration | 100-250ms |
+| Easing | ease-out-expo / elastic |
+| Overshoot | 15-30% |
+| Paths | Dramatic arcs, large displacement, diagonal |
+| Squash-stretch | Yes, exaggerated |
+
+Signature: large scale changes (50-150%), fast color transitions, particle bursts, accelerating stagger, bold edge entrances.
+Use for: gaming, sports, music, events, marketing, fitness apps.
+
+## Keyword Matching
+
+| Keywords | Archetype |
+|----------|-----------|
+| fun, whimsical, bouncy, cute, friendly | Playful |
+| elegant, minimal, luxury, sophisticated | Premium |
+| clean, professional, business, dashboard | Corporate |
+| dynamic, energetic, bold, exciting | Energetic |
+| (unspecified) + UI | Corporate (default) |
+| (unspecified) + illustration | Playful (default) |
+
+## Brand Motion Identity
+
+Define three constants for recognizable motion:
+
+### 1. Signature Easing (80% of animations)
+Playful: ease-out-back | Premium: (0.4,0,0.2,1) | Corporate: (0.2,0,0,1) | Energetic: ease-out-expo
+
+### 2. Duration Palette
+
+| Tier | Playful | Premium | Corporate | Energetic |
+|------|---------|---------|-----------|-----------|
+| Quick | 150ms | 350ms | 200ms | 100ms |
+| Standard | 250ms | 500ms | 300ms | 180ms |
+| Slow | 400ms | 800ms | 450ms | 300ms |
+
+### 3. Entrance Pattern
+Playful: bounce up from below | Premium: slow fade + scale 98%→100% | Corporate: slide right + opacity | Energetic: snap from edge + overshoot
+
+## Mixing Archetypes
+- 90% primary archetype; specific moments can borrow another
+- Ease into personality shifts, don't snap
+- Example: corporate dashboard borrows Playful for success state only

.agents/skills/motion-design/director/narrative-structure.md

@@ -0,0 +1,62 @@
+# Narrative Structure
+
+## Four-Act Structure
+
+### Act 1: Anticipation (10-20%)
+- Wind-up: small motion opposite to main direction
+- Gathering: elements pull together before dispersing
+- Dimming: context fades for focus; Tension: hold compressed ~50ms
+- Skip for <150ms interactions and hover states
+
+### Act 2: Action (30-50%)
+Peak energy. The primary communicative motion.
+- Fast+direct (sharp easing) → alerts
+- Smooth+flowing (gentle easing, curves) → transitions
+- Explosive+expanding (expo, radial) → celebrations
+- Controlled+precise (linear-ish) → data charts
+
+### Act 3: Reaction (10-20%)
+- Shadows adjust: 50-100ms after primary
+- Siblings shift: 50-150ms after primary
+- Environment ripples: 100-200ms after primary
+- Counter-motion: simultaneous with action
+- Skip for simple toggles/checkboxes
+
+### Act 4: Resolution (20-30%)
+- Overshoot settle (spring/back-easing); opacity reaches final (ease-out)
+- 100-200ms breathing room before next motion
+- Even 50ms of settling transforms the feel
+
+## Scaling to Duration
+
+| Total | Anticipation | Action | Reaction | Resolution |
+|-------|-------------|--------|----------|------------|
+| 100-200ms | skip | 60-70% | skip | 30-40% |
+| 200-400ms | 10-15% | 40-50% | 10-15% | 25-30% |
+| 400-800ms | 15-20% | 30-40% | 15-20% | 20-25% |
+| 800ms+ | 20% | 30-35% | 15-20% | 25-30% |
+
+## Multi-Beat Narratives
+
+Transitions: overlap (fluid) | sequential (clear) | simultaneous (parallel)
+
+Progressions:
+- **Build-Up**: low → rising → peak → settling
+- **Cycle**: depart → peak → return → repeat
+- **Impact**: sudden action → ripple → slow settle
+
+## By Personality
+
+| Personality | Anticipation | Action | Resolution |
+|------------|-------------|--------|------------|
+| Playful | Exaggerated wind-up | Bouncy, overshoot | Wobble settle |
+| Premium | Subtle tension | Smooth, controlled | Elegant ease |
+| Corporate | Minimal/none | Direct, efficient | Clean stop |
+| Energetic | Quick gather | Explosive | Fast snap |
+
+## Common Patterns
+
+- **Reveal**: tension (dim, scale 95%) → emerge (100%, full opacity) → surroundings adjust → settled
+- **Departure**: gather (scale 98%) → exit → close gap → layout settles
+- **Transformation**: destabilize (vibration) → morph → secondary appears → new state breathing
+- **Celebration**: compress (50-100ms) → burst (scale, particles) → settle → calm with positive state