Builds a coherent UI motion system - a duration token scale, named easing curves, choreography rules, and a per-component mapping - so every transition in the product draws from one vocabulary instead of ad-hoc values. Use when someone asks "define our motion tokens", "our animations feel inconsistent", "what duration should this modal use", "set up easing standards", or is starting a design system and needs the motion layer. Do NOT use to spec the motion of one specific component or flow - use motion-spec instead; for animated type treatments, use kinetic-typography.
Click to play with sound.
---
name: Animation System
description: Builds a coherent UI motion system - a duration token scale, named easing curves, choreography rules, and a per-component mapping - so every transition in the product draws from one vocabulary instead of ad-hoc values. Use when someone asks "define our motion tokens", "our animations feel inconsistent", "what duration should this modal use", "set up easing standards", or is starting a design system and needs the motion layer. Do NOT use to spec the motion of one specific component or flow - use motion-spec instead; for animated type treatments, use kinetic-typography.
---
# Animation System
Without a motion system, every engineer picks a duration and curve from memory, and the product accumulates dozens of near-identical transitions that read as sloppy even when no single one is wrong. This skill produces the token set and rules that make motion feel like one hand designed it - and prevents the expensive alternative: auditing and re-timing every transition after launch.
Motion must do a job: direct attention, show cause and effect, express hierarchy, or soften a change. A motion that does none of these gets cut - it is latency wearing a costume.
## Operating procedure
Durations come before easings, and both come before choreography, because choreography rules reference the tokens.
### Step 1: Gather inputs
1. Brand feel on a calm↔energetic axis - it shifts the scale ±50ms and decides whether springs are allowed.
2. Platforms (web, iOS, Android) and the animation stack (CSS, Framer Motion, native).
3. The largest animated surfaces (full-page transitions? sheets?) - they set the slow end of the scale.
4. Existing timing values in the codebase, to map onto tokens rather than orphan.
5. Token naming convention already in use, so motion tokens match it.
### Step 2: Define the duration scale
… install to load the full skill