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,95 @@
+# Property Selection
+
+## Position
+
+| Direction | Meaning |
+|-----------|---------|
+| Upward | Growth, improvement, aspiration |
+| Downward | Settling, completion, grounding |
+| Leftward | Regression, backward, departure |
+| Rightward | Progression, forward, arrival |
+| Toward center | Focus, convergence |
+| Away from center | Distribution, expansion |
+
+## Scale
+
+| Direction | Meaning |
+|-----------|---------|
+| Scale up | Importance, activation, proximity |
+| Scale down | Deprioritization, distance |
+| Pulse | Attention, heartbeat, life |
+| Breathing | Presence, waiting |
+
+## Rotation
+
+| Range | Meaning |
+|-------|---------|
+| Small (5-15°) | Subtle adjustment |
+| Medium (45-90°) | Transformation |
+| Full (360°) | Completion, processing |
+| Continuous | Ongoing activity |
+
+## Opacity
+
+| Direction | Meaning |
+|-----------|---------|
+| Fade in | Arrival, enablement |
+| Fade out | Departure, disablement |
+| Partial | Secondary, disabled state |
+
+**Rule**: NEVER opacity alone for important state changes. Combine with position or scale.
+
+## Color
+
+| Transition | Meaning |
+|-----------|---------|
+| To green | Success, go |
+| To red | Error, stop |
+| To blue | Trust, active |
+| To gray | Disabled, inactive |
+| Brightening | Activation, focus |
+| Dimming | Deactivation, background |
+
+## Combined Properties
+
+| Combination | Best For |
+|-------------|----------|
+| Position + Opacity | Content appearing/disappearing |
+| Scale + Opacity | Cards, modals, notifications |
+| Position + Scale | Selected items, focused content |
+| Rotation + Scale | Celebrations, playful activation |
+| Position + Rotation | Organic transitions |
+| Color + Scale | State emphasis |
+
+Primary property carries meaning; secondary adds polish. Two properties is the sweet spot.
+
+## Property Selection by Goal
+
+| Goal | Primary | Secondary | Avoid |
+|------|---------|-----------|-------|
+| Entrance | position | opacity | rotation |
+| Exit | position | opacity | scale up |
+| Button press | scale | color | position |
+| Hover | scale or color | opacity | position |
+| Success | scale | color + opacity | position |
+| Error | position (shake) | color | scale |
+| Loading | rotation | opacity | position |
+| Toggle | position | color | rotation |
+| Notification | position + scale | opacity | rotation |
+| Delete | scale + opacity | position | grow |
+| Selection | scale | color, opacity | rotation |
+| Progress | position or scale | color | opacity |
+
+## Performance
+
+| Property | Performance |
+|----------|-------------|
+| transform (translate, scale, rotate) | Excellent — GPU-accelerated |
+| opacity | Excellent — GPU-accelerated |
+| color / background-color | Good — triggers paint |
+| clip-path | Good — GPU on modern browsers |
+| width / height | Poor — triggers layout |
+| margin / padding | Poor — triggers layout |
+| box-shadow | Poor — expensive paint |
+
+**Rule**: Prefer transform + opacity for all motion.
@@ -0,0 +1,67 @@
+# Quality Checklist
+
+## Visual Quality
+- [ ] Elements >40px for motion, >100px for detail
+- [ ] Readable at full speed without slow-motion
+- [ ] Clear primary, secondary, ambient layers
+- [ ] Counter-motion for balance where needed
+- [ ] Natural arcs (unless intentionally mechanical)
+- [ ] 1/3 rule (distance): no unbroken motion >1/3 container
+- [ ] 1/3 rule (density): max 1/3 elements active simultaneously
+
+## Technical Quality
+- [ ] No linear easing on spatial movement
+- [ ] Duration matches element type table
+- [ ] Ease-out entrances, ease-in exits
+- [ ] Duration proportional to distance
+- [ ] Entrance duration >= exit duration
+- [ ] Not opacity-only for important state changes
+- [ ] Stagger total <500ms
+- [ ] Follow-through: child elements offset 50-150ms
+
+## Emotional Quality
+- [ ] Target emotion identified before properties
+- [ ] Personality archetype matches brand
+- [ ] Setup → action → resolution structure
+- [ ] Intensity matches interaction importance
+- [ ] Consistent: same interaction = same motion
+- [ ] Appropriate on 100th viewing
+
+## Performance Quality
+- [ ] Primary motion uses transform + opacity
+- [ ] <20 animated elements per viewport
+- [ ] No layout-triggering properties animated
+- [ ] Elements staggered, not simultaneous
+- [ ] Maintains 60fps (30fps acceptable for ambient)
+
+## Accessibility Quality
+- [ ] prefers-reduced-motion alternative provided
+- [ ] No vestibular triggers without alternative
+- [ ] Same interaction = same animation
+- [ ] Critical info not motion-only
+- [ ] Animations >5s are pausable
+
+## Severity Tiers
+
+### CRITICAL
+- Linear easing on spatial movement
+- Opacity-only for important states
+- Exceeds 1/3 screen rule
+- Missing primary layer
+- Stagger >500ms
+- Layout property animation causing jank
+
+### HIGH
+- Missing secondary layer
+- Duration mismatch with element type
+- Wrong directional easing
+- Inconsistent personality
+- No follow-through
+- Missing reduced-motion alternative
+
+### MEDIUM
+- Missing ambient layer
+- No anticipation phase
+- Overshoot mismatch
+- Could use better arcs
+- Missing counter-motion
@@ -0,0 +1,106 @@
+# Timing & Easing Tables
+
+## Duration by Element Type
+
+| Element | Duration |
+|---------|----------|
+| Tooltip / micro-feedback | 80-120ms |
+| Button / toggle | 120-180ms |
+| Icon transition | 150-250ms |
+| Card enter/exit | 200-350ms |
+| Modal / dialog | 300-400ms |
+| Page transition | 400-600ms |
+| Dramatic reveal | 600-1200ms |
+| Ambient | 2000-20000ms |
+
+## Distance-Duration Scaling
+
+50px=0.8x | 100px=1.0x | 200px=1.3x | 300px=1.5x | 400px=1.6x | Full screen=1.8-2.0x
+
+## Enter vs. Exit
+Entrance = base (100%). Exit = 65-75% of entrance.
+
+## Interactive Feedback
+
+| Interaction | Max Latency |
+|------------|-------------|
+| Hover | <100ms |
+| Press/tap | <150ms |
+| Release/settle | 200-300ms |
+| Error shake | 300-400ms |
+| Long press | 500-800ms |
+| Drag start | <50ms |
+
+## Duration by Personality
+
+| Personality | Quick | Standard | Slow |
+|------------|-------|----------|------|
+| Playful | 150ms | 250ms | 400ms |
+| Premium | 350ms | 500ms | 800ms |
+| Corporate | 200ms | 300ms | 450ms |
+| Energetic | 100ms | 180ms | 300ms |
+
+## Easing: Directional Rules
+
+Entrance=ease-out | Exit=ease-in | On-screen=ease-in-out | Looping=sine | Rotation/progress=linear
+
+## Easing: Industry Standards
+
+| Name | Cubic Bezier | Use |
+|------|-------------|-----|
+| MD3 Standard | (0.2, 0, 0, 1) | Default on-screen |
+| MD3 Emphasized | (0.05, 0.7, 0.1, 1) | Entrances |
+| MD3 Accelerate | (0.3, 0, 1, 1) | Exits |
+| MD3 Decelerate | (0, 0, 0, 1) | Entering |
+| Apple HIG | (0.25, 0.1, 0.25, 1) | iOS default |
+| Apple Spring | stiffness:300 damping:20 | Interactive |
+| Snappy UI | (0.2, 0, 0, 1) | Fast, decisive |
+| Gentle float | (0.4, 0, 0.2, 1) | Ambient |
+| Bounce settle | (0.175, 0.885, 0.32, 1.275) | Playful |
+| Elastic snap | (0.68, -0.55, 0.265, 1.55) | Dramatic |
+
+## Material-Based Easing
+
+| Material | Duration Scale | Overshoot |
+|----------|---------------|-----------|
+| Rigid (metal) | 1.2x | 0% |
+| Elastic (rubber) | 0.8x | 15-25% |
+| Fluid (water) | 1.5x | 5% |
+| Paper (cards) | 1.0x | 3-5% |
+| Gas (smoke) | 2.0x | 0% |
+| Glass | 0.9x | 0% |
+
+## Spring Parameters
+
+| Feel | Stiffness | Damping |
+|------|-----------|---------|
+| Very stiff | 400+ | 25-30 |
+| Standard | 250-350 | 18-24 |
+| Bouncy | 150-250 | 10-15 |
+| Very bouncy | 100-200 | 5-10 |
+| Gentle | 100-150 | 20-25 |
+
+Damping: <1.0=oscillates, 1.0=fastest no-oscillation, >1.0=slow settle.
+
+## Stagger Patterns
+
+| Pattern | Delay | Budget |
+|---------|------|--------|
+| Micro cascade | 20-40ms | <200ms |
+| Standard | 50-100ms | <400ms |
+| Dramatic | 100-200ms | <600ms |
+| Wave | 30-60ms | <500ms |
+
+Direction: top-to-bottom (lists) | L-to-R (horizontal) | center-out (hero) | random (organic) | reverse (exits)
+
+Total stagger MUST stay <500ms.
+
+## Overshoot Budget
+
+| Context | Overshoot |
+|---------|-----------|
+| Success | 5-10% |
+| Error | 0% |
+| Feedback | 2-5% |
+| Celebration | 15-25% |
+| Premium | 0% |
@@ -0,0 +1,73 @@
+# Troubleshooting
+
+## Looks Robotic
+- Linear easing → use ease-out (entrance) or ease-in-out
+- Straight paths → add 10-20px arc at midpoint
+- Uniform timing → stagger 50-100ms between elements
+- Everything synced → offset start/stop 50-150ms
+- No secondary → add shadow, icon reaction, ambient
+
+## Feels Too Slow
+- Duration exceeds type budget → check duration table
+- ease-in-out when ease-out works → ease-out feels faster
+- Too much anticipation → reduce to 10% or remove
+- Stagger exceeded → total <500ms
+- Overshoot settle too long → increase damping
+
+## Feels Too Fast / Jarring
+- Duration below minimum → modals 300ms+, pages 400ms+
+- No easing → add ease-out minimum
+- Missing resolution → add 50-100ms settle
+- No anticipation on large motion → add 100-200ms wind-up
+
+## Feels Cheap / Flat
+- Only primary motion → add secondary + ambient
+- Opacity-only → combine with position or scale
+- Same easing everywhere → vary primary vs secondary
+- No follow-through → child elements trail 50-150ms
+- No overshoot → add 3-10%
+
+## Too Distracting
+- Too many moving → 1/3 rule
+- Amplitude too large → reduce to minimum
+- Competing heroes → one per moment, dim rest
+- Ambient too prominent → 10-20% amplitude, slower
+- No breathing room → 100-200ms pause between beats
+
+## No Personality
+- Default easing → apply archetype's signature
+- Same duration for all → use personality palette
+- No consistent entrance → define one for project
+- Mixed archetypes → pick one for 90%+
+
+## Inconsistent Feel
+- Different easing same-type → standardize per motion type
+- Duration varies same type → use palette consistently
+- Entry direction changes → one origin everywhere
+- Overshoot inconsistent → apply rules consistently
+
+## Performance (Dropped Frames)
+- Animating width/height/margin → use transform
+- Too many elements → <20 per viewport
+- Complex shadows/filters → simplify or pre-render
+- No GPU acceleration → transform + opacity
+- All simultaneous → stagger to spread load
+
+## Quick Diagnostic
+
+1. No linear on spatial movement
+2. Duration matches element type
+3. Primary + secondary layers
+4. Consistent personality
+5. Directional easing correct
+6. 1/3 screen rule
+7. 1/3 element rule
+8. Follow-through present
+9. Every motion has purpose
+10. Fine on 100th viewing
+
+## Personality Mistakes
+- **Playful**: overshoot >25% = broken; not everything bounces; short+bounce = glitchy
+- **Premium**: too subtle = invisible; too slow = waiting; zero = broken
+- **Corporate**: too conservative = boring; playful easing breaks trust; identical = monotonous
+- **Energetic**: max everywhere = nothing stands out; too many particles; no settle = chaos