baldart 3.6.2

package/framework/.claude/skills/motion-design/SKILL.md

@@ -0,0 +1,336 @@
+---
+name: motion-design
+description: >
+  Applies motion design principles to create emotionally-driven, technically sound animations and transitions.
+  Provides timing, easing, choreography, and Disney animation principles adapted for UI.
+  Use when creating animations, transitions, micro-interactions, loading states, page transitions,
+  scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring,
+  or any animation system.
+license: MIT
+metadata:
+  author: LottieFiles
+  version: "1.0.0"
+---
+
+# Motion Design Skill
+
+## Project Context
+
+**Reads from `baldart.config.yml`:** `paths.design_system`, `paths.ui_guidelines`, `stack.animation.canonical`, `identity.design_philosophy`.
+**Gated by features:** `features.has_design_system` (when `true`, project illustration-motion spec is BLOCKING).
+**Overlay:** loads `.baldart/overlays/motion-design.md` if present — project-specific motion vocabulary, brand-mandated easing curves, character-motion library.
+**On missing/empty keys:** ask the user; do not assume defaults. See `framework/agents/project-context.md` § 3.
+
+## Visual Contract
+
+When designing motion for generated marketing illustrations, prompts, or short product videos, the project's illustration-motion spec is a BLOCKING prerequisite when present:
+
+- `${paths.design_system}/patterns/illustration-motion.md` (when `features.has_design_system: true` and the file exists)
+- `${paths.ui_guidelines}` for motion personality + brand timing language
+
+If `stack.animation.canonical` is set, target those libraries (e.g. Framer Motion, Lottie) in any generated spec. If the list is empty, ask the user which animation system the project uses.
+
+Generated video prompts MUST use the "Surgical Motion Design" contract:
+define, element by element, what moves, what reacts, and what stays fixed.
+Do not leave characters, smartphones, badges, UI labels, signal lines,
+decorative objects, or backgrounds to implicit model interpretation.
+
+## When to Apply
+
+Use this skill when:
+- Creating UI animations (buttons, cards, modals, page transitions)
+- Designing micro-interactions and feedback animations
+- Building loading, success, or error states
+- Animating illustrations or decorative elements
+- Planning scroll-triggered or progress-based animations
+- Establishing brand motion identity
+- Choreographing multi-element sequences
+
+**Decision tree:**
+1. Does it serve a functional purpose (feedback, guidance)? → Timing rules for responsiveness
+2. Does it express brand personality? → Motion Personality archetypes
+3. Does it tell a story or guide attention? → Disney principles + choreography
+4. Is this a complex multi-element scene? → 1/3 Rule + stagger patterns
+
+---
+
+## Quick Reference: 8-Step Checklist
+
+Before creating any animation:
+
+1. **Emotional target?** — joy, calm, urgency, elegance
+2. **Motion Personality?** — Playful, Premium, Corporate, Energetic
+3. **Primary property?** — position, scale, rotation, opacity
+4. **Duration?** — see duration table below
+5. **Easing family?** — entrance=decelerate, exit=accelerate
+6. **Hero element?** — apply staging principles
+7. **Secondary + ambient layers?** — add richness
+8. **1/3 rules?** — motion distance, simultaneous elements
+
+---
+
+## Three Pillars (CRITICAL)
+
+Every animation must satisfy three pillars before any technical decisions:
+
+| Pillar | Question | Drives |
+|--------|----------|--------|
+| **Emotional Intent** | What should the viewer FEEL? | Easing, timing, amplitude |
+| **Visual Narrative** | What's the micro-story? | Setup → Action → Resolution |
+| **Motion Craft** | How do we make it believable? | Physics, secondary motion, paths |
+
+**Three motion layers** (flat animation = missing layers):
+- **Primary**: Main action the viewer follows
+- **Secondary**: Supporting richness (shadows, icons shifting)
+- **Ambient**: Background life (gradients, subtle pulses)
+
+> Deep dive: [director/core-philosophy.md](director/core-philosophy.md)
+
+---
+
+## Motion Personality
+
+Select ONE archetype per project. Apply consistently.
+
+| Archetype | Duration | Easing | Overshoot | Keywords |
+|-----------|----------|--------|-----------|----------|
+| **Playful** | 150-300ms | ease-out-back | 10-20% | fun, whimsical, bouncy, cute |
+| **Premium** | 350-600ms | cubic-bezier(0.4,0,0.2,1) | 0% | elegant, minimal, luxury, sophisticated |
+| **Corporate** | 200-400ms | cubic-bezier(0.2,0,0,1) | 0-3% | clean, professional, business, dashboard |
+| **Energetic** | 100-250ms | ease-out-expo | 15-30% | dynamic, energetic, bold, exciting |
+
+**Default**: Corporate for UI, Playful for illustrations.
+
+**Brand Motion Identity** — define three constants:
+1. **Signature easing**: One curve for 80% of animations
+2. **Duration palette**: 3 durations (quick / standard / slow)
+3. **Entrance pattern**: One consistent entry style
+
+> Deep dive: [director/motion-personality.md](director/motion-personality.md)
+
+---
+
+## Property Selection
+
+| Effect Goal | Primary Property | Secondary Properties |
+|-------------|------------------|---------------------|
+| Entrance/Exit | position | opacity, scale |
+| Emphasis/Attention | scale | rotation (subtle), opacity pulse |
+| State Change | opacity, color | scale (press feedback) |
+| Direction/Flow | position | rotation (follow path) |
+| Depth/3D Feel | scale + shadow | position (parallax) |
+| Loading/Progress | rotation (spinner) | scale, opacity pulse |
+| Success | scale (pop) | color, rotation (checkmark draw) |
+| Error/Alert | position (shake) | color, rotation (wobble) |
+
+**Simplicity threshold**: Use the minimum properties needed. One = direct. Two = polished. Three+ = potentially overwhelming.
+
+> Deep dive: [reference/property-selection.md](reference/property-selection.md)
+
+---
+
+## Duration Table
+
+| Element Type | Duration | Rationale |
+|-------------|----------|-----------|
+| Tooltip / micro-feedback | 80-120ms | Must feel instant |
+| Button press / toggle | 120-180ms | Responsive feedback |
+| Icon transition | 150-250ms | Clear state change |
+| Card enter / exit | 200-350ms | Spatial awareness |
+| Modal / dialog | 300-400ms | Focus shift |
+| Page transition | 400-600ms | Context switch |
+| Dramatic reveal | 600-1200ms | Theatrical build |
+
+**Distance scales duration**: 100px = base. 200px = 1.3x. 400px = 1.6x.
+
+**Enter > Exit**: Entrances 30-50% longer than exits. Users care about what appears.
+
+**Interactive feedback**:
+- Hover: <100ms
+- Press: <150ms
+- Release/settle: 200-300ms
+- Error shake: 300-400ms (2-3 oscillations)
+
+> Deep dive: [reference/timing-easing-tables.md](reference/timing-easing-tables.md)
+
+---
+
+## Easing Selection
+
+**Directional rules**:
+- **Entrance** → decelerate (fast start, gentle landing): ease-out family
+- **Exit** → accelerate (gentle start, fast departure): ease-in family
+- **On-screen** → smooth both ends: ease-in-out family
+- **Looping ambient** → seamless: sine-based ease-in-out
+
+**Industry standards**:
+
+| Standard | Cubic Bezier | Use For |
+|----------|-------------|---------|
+| Material Design 3 | (0.2, 0, 0, 1) | Default on-screen |
+| MD3 Emphasized | (0.05, 0.7, 0.1, 1) | Entrances, attention |
+| MD3 Accelerate | (0.3, 0, 1, 1) | Exits, dismissals |
+| Apple HIG | (0.25, 0.1, 0.25, 1) | Standard iOS |
+| Snappy UI | (0.2, 0, 0, 1) | Fast, decisive |
+| Gentle float | (0.4, 0, 0.2, 1) | Ambient, background |
+| Bounce settle | (0.175, 0.885, 0.32, 1.275) | Overshoot, playful |
+
+**Material-based easing**:
+
+| Material | Duration Scale | Overshoot |
+|----------|---------------|-----------|
+| Rigid (metal, stone) | 1.2x | 0% |
+| Elastic (rubber, gel) | 0.8x | 15-25% |
+| Fluid (water, paint) | 1.5x | 5% |
+| Paper (cards, sheets) | 1.0x | 3-5% |
+| Gas (smoke, fog) | 2.0x | 0% |
+| Glass (brittle) | 0.9x | 0% |
+
+> Deep dive: [reference/timing-easing-tables.md](reference/timing-easing-tables.md)
+
+---
+
+## Common Patterns
+
+### Button Press (Playful)
+1. **Anticipation**: Scale to 0.97 (50ms, ease-out)
+2. **Squash**: Scale to [1.04, 0.96] (100ms, ease-in)
+3. **Follow through**: Overshoots to 1.02, settles to 1.0 (spring, 200ms)
+4. **Secondary**: Shadow shrinks during press, icon shifts down 2px
+5. **Total**: ~150ms press + 200ms settle
+
+### Card Entrance (Premium)
+1. **Start**: 20px below target, opacity 0
+2. **Path**: Slight curve (10px X offset at midpoint)
+3. **Easing**: ease-out-cubic deceleration
+4. **Follow through**: Shadow arrives 50ms after card
+5. **Secondary**: Content fades in 100ms after card lands
+6. **Staging**: Other cards dim to 80%
+
+### Success State (Playful)
+1. **Primary**: Scale pop with ease-out-back
+2. **Secondary**: Checkmark draws in
+3. **Ambient**: Subtle particle burst
+4. **Color**: Green fill
+5. **Total**: 300-400ms
+
+### Error Shake (Corporate)
+1. **Primary**: Position oscillates 2-3 times, ±10-15px horizontal
+2. **Easing**: ease-in-out for sharp stops
+3. **Color**: Red tint
+4. **Total**: 300-400ms
+5. **No overshoot**: Errors feel firm
+
+> More patterns: [patterns/entrance-exit.md](patterns/entrance-exit.md) | [patterns/state-feedback.md](patterns/state-feedback.md)
+
+---
+
+## Choreography Essentials
+
+**Coordinated entry**:
+- Lead with the hero — primary element enters first or most prominently
+- Spatial consistency — all elements enter from same direction
+- Counter-motion — hero moves right → ambient moves left at 20-30% speed
+
+**1/3 Rule (distance)**: No motion travels more than 1/3 of screen without a keyframe change.
+
+**1/3 Rule (elements)**: With 3+ elements, no more than 1/3 in active motion simultaneously.
+
+**Stagger budgets**:
+
+| Pattern | Delay | Total Budget | Use Case |
+|---------|-------|-------------|----------|
+| Micro cascade | 20-40ms | <200ms | List items, grid cells |
+| Standard | 50-100ms | <400ms | Cards, panels, nav |
+| Dramatic | 100-200ms | <600ms | Hero sections |
+| Wave | 30-60ms | <500ms | Data visualizations |
+
+**Critical**: Total stagger must stay under 500ms.
+
+> Deep dive: [director/choreography.md](director/choreography.md)
+
+---
+
+## Emotion-to-Motion Map
+
+| Emotion | Character | Path | Easing | Duration |
+|---------|-----------|------|--------|----------|
+| Joy | Bouncy, arcs | Curved, upward | ease-out-back | 200-400ms |
+| Calm | Smooth, flowing | Gentle curves | sine ease-in-out | 500-1000ms |
+| Urgency | Sharp, fast | Straight lines | ease-out | 100-200ms |
+| Sadness | Slow, downward | Drooping curves | cubic ease-in-out | 600-1200ms |
+| Surprise | Sudden, expanding | Radial outward | ease-out-expo | 150-300ms |
+| Elegance | Slow, controlled | Long arcs | (0.4,0,0.2,1) | 400-700ms |
+| Playfulness | Bouncy, irregular | Arcs, squiggly | ease-out-back | 200-350ms |
+
+**Path as language**: Angular = tense. Curved = friendly. Spiral = whimsical. Diagonal = purposeful. Vertical = growth/weight. Horizontal = progress.
+
+> Deep dive: [director/emotion-mapping.md](director/emotion-mapping.md)
+
+---
+
+## Weight Classification
+
+| Weight | Examples | Duration | Overshoot | Easing |
+|--------|----------|----------|-----------|--------|
+| Heavy | Modals, overlays | 300-500ms | 0% | Gentle, high damping |
+| Medium | Cards, panels | 200-350ms | 3-5% | Moderate |
+| Light | Tooltips, badges, icons | 80-200ms | 5-15% | Responsive |
+
+---
+
+## Quality Rules
+
+### CRITICAL — never break
+1. **Never linear for spatial movement** — always use easing curves (linear only for spinners, progress bars)
+2. **Never opacity-only** for important state changes — combine with position or scale
+3. **Never exceed 1/3 screen** without intermediate keyframe
+4. **Always three motion layers** — primary + secondary + ambient
+
+### HIGH — strongly follow
+1. Match duration to element type (see tables)
+2. Use directional easing (ease-out entrance, ease-in exit)
+3. Apply Disney principles (especially anticipation, follow-through)
+4. Maintain consistent personality across scene
+
+> Full checklist: [reference/quality-checklist.md](reference/quality-checklist.md)
+
+---
+
+## Troubleshooting Quick Reference
+
+| Problem | Likely Cause | Fix |
+|---------|-------------|-----|
+| Looks robotic | Linear easing or no arcs | Add easing curves + arc paths |
+| Feels too slow | Duration too long for element type | Check duration table, use ease-out |
+| Feels cheap/flat | Missing secondary + ambient | Add shadow motion + background life |
+| Too distracting | Too many elements moving | Apply 1/3 rule, reduce amplitude |
+| No personality | Generic easing everywhere | Apply personality archetype consistently |
+
+> Deep dive: [reference/troubleshooting.md](reference/troubleshooting.md)
+
+---
+
+## File Reference
+
+**Philosophy** (director/):
+- [core-philosophy.md](director/core-philosophy.md) — Three Pillars deep dive
+- [decision-framework.md](director/decision-framework.md) — Full decision pipeline
+- [disney-principles.md](director/disney-principles.md) — 12 principles, UI-adapted
+- [motion-personality.md](director/motion-personality.md) — 4 archetypes + brand identity
+- [emotion-mapping.md](director/emotion-mapping.md) — Emotion → motion + color psychology
+- [choreography.md](director/choreography.md) — Multi-element coordination
+- [narrative-structure.md](director/narrative-structure.md) — Micro-story framework
+- [context-adaptation.md](director/context-adaptation.md) — Platform, a11y, performance
+
+**Reference** (reference/):
+- [timing-easing-tables.md](reference/timing-easing-tables.md) — Duration + easing lookups
+- [property-selection.md](reference/property-selection.md) — Property communication guide
+- [troubleshooting.md](reference/troubleshooting.md) — Animation smells + fixes
+- [quality-checklist.md](reference/quality-checklist.md) — Evaluation criteria
+
+**Patterns** (patterns/):
+- [entrance-exit.md](patterns/entrance-exit.md) — Entrance/exit recipes
+- [state-feedback.md](patterns/state-feedback.md) — Success, error, loading, hover
+- [ambient-continuous.md](patterns/ambient-continuous.md) — Looping, breathing, parallax
+- [multi-element.md](patterns/multi-element.md) — Stagger + choreography recipes

package/framework/.claude/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%)

package/framework/.claude/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

package/framework/.claude/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

package/framework/.claude/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? |