motion-design

1# Motion Design Skill
2 
3## When to Apply
4 
5Use this skill when:
6- Creating UI animations (buttons, cards, modals, page transitions)
7- Designing micro-interactions and feedback animations
8- Building loading, success, or error states
9- Animating illustrations or decorative elements
10- Planning scroll-triggered or progress-based animations
11- Establishing brand motion identity
12- Choreographing multi-element sequences
13 
14**Decision tree:**
151. Does it serve a functional purpose (feedback, guidance)? → Timing rules for responsiveness
162. Does it express brand personality? → Motion Personality archetypes
173. Does it tell a story or guide attention? → Disney principles + choreography
184. Is this a complex multi-element scene? → 1/3 Rule + stagger patterns
19 
20---
21 
22## Quick Reference: 8-Step Checklist
23 
24Before creating any animation:
25 
261. **Emotional target?** — joy, calm, urgency, elegance
272. **Motion Personality?** — Playful, Premium, Corporate, Energetic
283. **Primary property?** — position, scale, rotation, opacity
294. **Duration?** — see duration table below
305. **Easing family?** — entrance=decelerate, exit=accelerate
316. **Hero element?** — apply staging principles
327. **Secondary + ambient layers?** — add richness
338. **1/3 rules?** — motion distance, simultaneous elements
34 
35---
36 
37## Three Pillars (CRITICAL)
38 
39Every animation must satisfy three pillars before any technical decisions:
40 
41| Pillar | Question | Drives |
42|--------|----------|--------|
43…