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,81 @@
+# Ambient & Continuous Patterns
+
+Ambient amplitude: 10-20% of primary motion. Never compete for attention.
+
+## Breathing / Pulse
+
+- Scale oscillation 0.98-1.02, sine ease-in-out, 2000-4000ms/cycle
+- Alt: opacity oscillation 0.7-1.0
+
+| Context | Scale Range | Duration | Opacity Range |
+|---------|-----------|----------|--------------|
+| Active indicator | 0.95-1.05 | 2000ms | 0.6-1.0 |
+| Waiting/idle | 0.98-1.02 | 3000ms | 0.8-1.0 |
+| Background element | 0.99-1.01 | 4000ms | 0.9-1.0 |
+| CTA attention | 0.97-1.03 | 2500ms | 0.7-1.0 |
+
+Pulsing >±5% scale becomes attention-demanding.
+
+## Floating / Hovering
+
+- Y position ±5-15px, sine ease-in-out, 3000-5000ms/cycle
+- Optional: slight rotation ±2-3°, offset 30% of position cycle
+
+**Layered floating** (multiple elements — different durations prevent sync):
+- Element 1: 4000ms, ±10px
+- Element 2: 5500ms, ±8px (offset 30%)
+- Element 3: 3500ms, ±12px (offset 60%)
+
+## Gradient Shift
+
+- Background-position or gradient angle shift
+- Duration: 8000-20000ms/cycle; range: ±10-20% position or ±15° angle
+- Easing: linear or sine; should be imperceptible at a glance
+
+## Parallax
+
+| Layer | Speed Ratio | Content |
+|-------|------------|---------|
+| Foreground | 1.0x | Interactive, text |
+| Midground | 0.5x | Decorative, cards |
+| Background | 0.2x | Patterns, scenery |
+| Deep background | 0.1x | Texture, atmospheric |
+
+**Scroll-driven**: total displacement <100px; avoid on mobile; never parallax text
+**Mouse-driven**: foreground 10-20px max, background 5-10px opposite direction, 100-200ms interpolation
+
+## Continuous Rotation
+
+- Spinners: linear easing, 1000-2000ms/revolution
+
+| Variant | Speed | Use Case |
+|---------|-------|----------|
+| Slow spin | 10-30s/rev | Background decoration |
+| Gear-like | 3-5s/rev | Technical/mechanical |
+| Orbital | 5-15s/rev | Space/science theme |
+| Wobble | 2-4s/cycle, sine | Playful idle |
+
+## Shimmer / Gleam
+
+- Gradient sweep left-to-right, 1500-2500ms/sweep
+- Pause 2000-5000ms between sweeps
+- Opacity gradient: 0%→30%→0%
+- Use for: skeleton loading, premium accents, "new" badges
+
+## Particle Ambient
+
+### Snow/Falling: 10-20 elements, 20-60px/s down, ±10-20px drift, 3-8px, 30-70% opacity
+### Dust/Motes: 5-10 elements, 10-30px/s mixed, 2-5px, 20-50% opacity
+### Sparkle/Stars: 8-15 elements, opacity pulse 0→100%→0, 500-1500ms/sparkle, random stagger
+
+**Performance**: <20 ambient elements, transform+opacity only, larger/fewer over small/numerous
+
+## Combining Ambient Layers
+
+| Layer | Type | Example |
+|-------|------|---------|
+| Background | Gradient shift or parallax | Slow color temperature change |
+| Midground | Floating or particles | Gentle floating elements |
+| Foreground | Breathing or shimmer | Subtle pulse on content |
+
+Total ambient: max 20% of primary motion's visual energy.
@@ -0,0 +1,82 @@
+# Entrance & Exit Patterns
+
+## Entrance Strategies
+
+### 1. Direct Entrance (Slide In)
+- Position + opacity; offset 20-40px + opacity 0 → final position + opacity 1
+- Easing: ease-out; duration 200-350ms
+
+| Personality | Offset | Easing | Overshoot |
+|------------|--------|--------|-----------|
+| Playful | 30-50px | ease-out-back | 10-15% |
+| Premium | 15-25px | (0.4, 0, 0.2, 1) | 0% |
+| Corporate | 20-30px | (0.2, 0, 0, 1) | 0-3% |
+| Energetic | 40-80px | ease-out-expo | 15-25% |
+
+Direction: below=arrival, right=forward, left=back, above=dropdown/authority.
+
+### 2. Emergent Entrance (Scale In)
+- Scale + opacity; start 85-95% + opacity 0 → 100% + opacity 1
+- Duration 250-400ms
+
+| Personality | Start Scale | Easing | Overshoot |
+|------------|------------|--------|-----------|
+| Playful | 70-80% | ease-out-back | 10-20% |
+| Premium | 95-98% | (0.4, 0, 0.2, 1) | 0% |
+| Corporate | 90-95% | (0.2, 0, 0, 1) | 0-3% |
+| Energetic | 50-70% | ease-out-expo | 15-30% |
+
+Best for: modals, dialogs, notifications, popovers, tooltips.
+
+### 3. Reveal Entrance (Clip/Mask)
+- clip-path or mask + opacity; 300-500ms, ease-out
+- Directions: top-to-bottom (dramatic), L-to-R (reading order), center-out (focus), edge-in (contained)
+
+### 4. Assembled Entrance (Multi-Part)
+- Parts arrive from different positions; stagger 50-100ms; total 300-600ms
+- Best for: icon assembly, logo builds, data viz construction
+
+## Exit Strategies
+
+**Rule**: Exits = 65-75% of entrance duration.
+
+### 1. Direct Exit (Slide Out)
+- Offset 20-40px + opacity 0; ease-in; 150-250ms
+
+### 2. Dissolve Exit (Fade Out)
+- Opacity (+ optional scale to 98%); ease-in; 150-250ms
+- Best for: gentle departures, backgrounding, crossfades
+
+### 3. Collapse Exit (Shrink Out)
+- Scale 85-95% + opacity 0; ease-in; 150-250ms
+- Best for: deletion, closing modals, dismissal
+
+### 4. Transfer Exit (Move Away)
+- Position toward destination + scale shrink; ease-in-out; 250-400ms
+- Best for: add-to-cart, save-to-collection, move-to-folder
+
+## Entrance-Exit Continuity
+- Eye follows naturally from exit to entrance
+- Exit point near entry point when possible
+- 100-150ms timing overlap between exit and entrance
+- Same easing family for paired entrance-exit
+
+## Common Recipes
+
+### Notification Slide-In
+1. Slide from right + opacity (250ms, ease-out)
+2. Overshoot 3-5% (corporate) or 10-15% (playful)
+3. Icon appears (100ms, 50ms delay)
+
+### Toast Dismiss
+1. Slide toward edge + opacity (180ms, ease-in)
+2. Remaining toasts shift up (200ms, ease-in-out)
+
+### Dropdown Open
+1. Scale Y 0→100% (200ms, ease-out)
+2. Items stagger fade in (30ms apart, 50ms after container)
+
+### Page Transition (Forward)
+1. Current page slides left + fades (300ms, ease-in)
+2. New page from right + fades in (400ms, ease-out, 100ms delay)
+3. Shared elements morph (400ms, ease-in-out)
@@ -0,0 +1,69 @@
+# Multi-Element Patterns
+
+## Stagger Recipes
+
+### List Items
+- Slide up 20px + fade (200ms, ease-out); stagger 40-60ms; total <400ms for 8 items
+
+| Personality | Duration | Stagger | Easing |
+|------------|---------|---------|--------|
+| Playful | 250ms | 60ms | ease-out-back |
+| Premium | 350ms | 80ms | (0.4, 0, 0.2, 1) |
+| Corporate | 200ms | 50ms | (0.2, 0, 0, 1) |
+| Energetic | 150ms | 30ms | ease-out-expo |
+
+### Grid Cards
+- Scale from 95% + fade (250ms, ease-out); stagger 50-80ms reading order; +20ms per new row
+- Shadow 50ms after card. Alt patterns: center-out, column-first, random
+
+### Navigation Items
+- Slide from side + fade (180ms, ease-out); stagger 30-50ms; total <300ms
+
+### Dashboard Widgets
+```
+0ms   — Skeletons visible
+100ms — Hero metric (250ms, ease-out)
+200ms — Widgets begin (200ms each, 60ms stagger)
+350ms — Hero complete, chart draws (300ms)
+500ms — All landed
+650ms — Ambient pulse begins
+```
+
+## Coordinated Sequences
+
+### Modal with Content
+0ms: backdrop dims (200ms) → 50ms: modal scales 95%→100% (300ms) → 200ms: title → 280ms: body → 350ms: buttons → 400ms: close button. Content in reading order.
+
+### Tab Switch
+0ms: indicator slides (250ms, ease-in-out) + old fades (150ms) → 100ms: new content from tab direction (200ms) → 150ms: elements stagger (40ms)
+
+### Accordion
+Expand: arrow rotates (150ms) + height expands (250ms) + content fades at 50ms (200ms); siblings shift (200ms). Collapse: reverse, ease-in.
+
+### Page Transition
+Current slides left+fades (300ms, ease-in) → new from right (400ms, ease-out, 100ms delay) → hero scales in → content staggers (50ms). Optional shared element morph (400ms).
+
+### Drag and Drop
+Drag: lift (scale 1.03, 150ms); others shift (200ms). Drop: settle (scale 1.0, 200ms); gaps close.
+
+## Choreography Rules
+
+### Timing Overlap
+0%=methodical | 25%=brisk (standard) | 50%=fluid | 75%=rapid (energetic)
+
+### Group Rules
+- Same easing family; different durations/delays fine
+- Exception: secondary/ambient can differ
+
+### Shared Origin
+Motion from trigger point; closer=first; farther=more delay
+
+### Counter-Motion
+
+| Hero Does | Counter-Motion |
+|-----------|---------------|
+| Slides right | Background left (20-30%) |
+| Scales up | Shadow spreads |
+| Lifts up | Shadow drops+softens |
+| Rotates CW | Ambient CCW |
+| Expands | Siblings compress |
@@ -0,0 +1,96 @@
+# State & Feedback Patterns
+
+## Button Press
+
+### Playful
+- Press: scale 0.95 (60ms, ease-out); Release: overshoot 1.05 (80ms); Settle: 1.0 (120ms, spring)
+- Secondary: shadow shrinks/grows; color darkens/brightens. Total ~260ms
+
+### Premium
+- Press: scale 0.98 (80ms); Release: 1.0 (150ms, no overshoot)
+- Opacity dims to 90% on press. Total ~230ms
+
+### Corporate
+- Press: scale 0.97 (60ms); Release: 1.0 (100ms); overshoot 0-2%
+- Background darkens 10%. Total ~160ms
+
+## Hover States
+
+| Element | Effect | Duration |
+|---------|--------|----------|
+| Button | Scale 1.02-1.05 | <100ms |
+| Card | Scale 1.01-1.02 + shadow lift | <100ms |
+| Link | Color change + underline | <100ms |
+| Icon | Scale 1.1 + rotation 2-5° | <100ms |
+| Image | Scale 1.03 (overflow hidden) | 150ms |
+
+Hover enter <100ms; hover exit 150-200ms (slower = polished).
+
+## Toggle / Switch
+- Thumb slides (120-180ms, ease-in-out); track color transitions simultaneously
+- Slight squash in movement direction
+- Playful: bounce at destination; Premium: smooth, no overshoot
+
+## Success State
+
+### Checkmark Success
+1. Container: scale 0.9→1.0 (200ms, ease-out-back, 5-10% overshoot)
+2. Checkmark: stroke draw (150ms, ease-out, 100ms delay)
+3. Color: to green (200ms); ambient glow/particles (300ms)
+4. Total: 400-500ms
+
+### Confirmation Badge
+1. Badge scales from 0 (200ms, ease-out-back)
+2. Text fades in (150ms, 50ms delay)
+3. Background pulse (300ms, sine)
+
+### Payment Success
+1. Spinner → checkmark crossfade (200ms)
+2. Checkmark draws (200ms); container → success color (200ms)
+3. Text fades in (200ms, 100ms delay); optional confetti (300-500ms)
+
+## Error State
+
+### Error Shake
+- Horizontal oscillation ±10-15px, 2-3 cycles decreasing amplitude
+- ease-in-out, 300-400ms total; red tint; no overshoot; settles at origin
+
+### Inline Validation
+1. Error text slides down + fades in (200ms)
+2. Border → red (150ms); icon scales in (150ms, 50ms delay)
+3. Optional single shake (200ms)
+
+### Form Submission Error
+1. Button returns to normal (200ms)
+2. Error message slides in (250ms)
+3. Affected fields highlight red (150ms, staggered 30ms)
+4. Smooth scroll to first error (300ms, ease-in-out)
+
+## Loading States
+
+### Spinner
+- Continuous 360°, linear, 1000-1500ms/rev; optional breathing pulse (2-3s)
+
+### Skeleton
+- Gradient sweep L→R, 1500-2000ms; base 10-20% opacity, peak 30-40%
+
+### Progress Bar
+- Width/transform, ease-in-out; optional color milestones + shimmer
+
+### Indeterminate
+- Oscillating position/width, 1500-2500ms, ease-in-out; continuous, never frantic
+
+## Warning State
+1. Yellow/amber border (150ms)
+2. Warning icon scales in (150ms, subtle overshoot)
+3. Optional icon pulse (2-3s, sine); text fades in (200ms, 50ms delay)
+
+## Disabled / Enabled
+
+- **Disabling**: opacity to 50-60% (200ms); optional scale to 98%
+- **Enabling**: opacity to 100% (200ms); optional scale pulse 98%→100%
+
+## Focus States
+- Focus ring: scale 95%→100% + opacity (150ms)
+- Card focus: scale 1.01, shadow increase (150ms)
+- Tab nav focus: <100ms; must work with reduced-motion