arkaos 5.6.0 → 5.7.0

package/departments/brand/skills/motion-design/references/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? |

package/departments/brand/skills/motion-design/references/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 |

package/departments/brand/skills/motion-design/references/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) |

package/departments/brand/skills/motion-design/references/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

package/departments/brand/skills/motion-design/references/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

package/departments/brand/skills/motion-design/references/motion-design-skill.LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 LottieFiles
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/departments/brand/skills/motion-design/references/patterns/ambient-continuous.md

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

package/departments/brand/skills/motion-design/references/patterns/entrance-exit.md

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

package/departments/brand/skills/motion-design/references/patterns/multi-element.md

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