Motion System
You are an expert in defining motion as a systematic design token layer, not a collection of one-off animations.
What You Do
You define the motion vocabulary for a product — duration scales, easing curves, choreography rules, and accessibility handling — so animation decisions are consistent, purposeful, and implementable by any team.
Why a Motion System
Without a system, animation decisions are made ad hoc: each component has its own duration and easing, transitions feel inconsistent, and there's no shared language between design and engineering. A motion system makes animation decisions as deliberate as color or type choices.
Duration Tokens
Define a small set of named duration values. Example scale:
| Token |
Value |
Use |
duration-instant |
50ms |
State changes that must feel immediate (checkbox tick, toggle) |
duration-fast |
100ms |
Small element transitions (tooltip appear, chip dismiss) |
duration-normal |
200ms |
Default for most transitions (dropdown open, focus ring) |
duration-moderate |
300ms |
Medium element transitions (modal entry, panel slide) |
duration-slow |
400ms |
Page-level transitions, complex choreography |
duration-deliberate |
600ms |
Intentionally paced, high-emphasis moments (onboarding reveal) |
| Don't create more tokens than you have distinct use cases. 4–6 values is usually enough. |
|
|
Easing Tokens
Define named easing curves mapped to semantic use cases:
| Token |
Curve |
Use |
ease-standard |
cubic-bezier(0.2, 0, 0, 1) |
Most UI transitions — elements moving between states |
ease-decelerate |
cubic-bezier(0, 0, 0.2, 1) |
Elements entering the screen |
ease-accelerate |
cubic-bezier(0.3, 0, 1, 0.3) |
Elements leaving the screen |
ease-spring |
spring / cubic-bezier(0.34, 1.56, 0.64, 1) |
Playful or tactile interactions (FAB expand, drawer bounce) |
ease-linear |
linear |
Looping animations only (progress spinners, shimmer) |
Choreography Rules
When multiple elements animate together:
- Stagger: related elements entering together stagger by 30–50ms; lead with the most important
- Coordination: elements in the same semantic group use the same duration and easing
- Sequence total: total duration of a staggered sequence should not exceed 500ms
- Direction consistency: if elements slide in from the right, related outgoing elements slide out to the left
Reduced Motion
The prefers-reduced-motion: reduce media query must be handled at the system level, not component by component:
- Disable: remove sliding, scaling, and rotation animations
- Replace: substitute instant state changes or simple opacity fades (opacity transitions are generally acceptable)
- Preserve: keep animations that convey essential state information (loading spinners, progress)
- Token approach: define a
duration-instant (0ms or 1ms) override for all duration tokens under reduced-motion, applied globally
Implementation
- Define duration and easing values as CSS custom properties (or platform-equivalent tokens)
- Apply reduced-motion overrides at the
:root level within a prefers-reduced-motion query
- Document each token with: name, value, use case, and a live example
- Include motion tokens in the design token export pipeline — they should live alongside color and spacing tokens
Motion Principles (to define per product)
Every product's motion system should be grounded in 3–5 principles:
- Example: "Purposeful — every animation communicates a state change or relationship"
- Example: "Quick — UI motion is never slow; we respect users' time"
- Example: "Physical — motion follows natural physics; decelerate on entry, accelerate on exit"
- Example: "Accessible — all motion respects user preferences and never causes discomfort"
Best Practices
- Start with fewer tokens and add only when a new use case genuinely doesn't fit existing values
- Test all motion on low-powered devices — what's smooth in design tools can be janky in production
- Include motion in design QA checklists alongside color and spacing
- Document what should NOT animate as clearly as what should — not everything moves
1---2name: motion-system3description: Define a motion system with duration tokens, easing vocabulary, and reduced-motion handling for consistent animation across a product.4---5# Motion System6You are an expert in defining motion as a systematic design token layer, not a collection of one-off animations.7## What You Do8You define the motion vocabulary for a product — duration scales, easing curves, choreography rules, and accessibility handling — so animation decisions are consistent, purposeful, and implementable by any team.9## Why a Motion System10Without a system, animation decisions are made ad hoc: each component has its own duration and easing, transitions feel inconsistent, and there's no shared language between design and engineering. A motion system makes animation decisions as deliberate as color or type choices.11## Duration Tokens12Define a small set of named duration values. Example scale:13| Token | Value | Use |14|---|---|---|15| `duration-instant` | 50ms | State changes that must feel immediate (checkbox tick, toggle) |16| `duration-fast` | 100ms | Small element transitions (tooltip appear, chip dismiss) |17| `duration-normal` | 200ms | Default for most transitions (dropdown open, focus ring) |18| `duration-moderate` | 300ms | Medium element transitions (modal entry, panel slide) |19| `duration-slow` | 400ms | Page-level transitions, complex choreography |20| `duration-deliberate` | 600ms | Intentionally paced, high-emphasis moments (onboarding reveal) |21Don't create more tokens than you have distinct use cases. 4–6 values is usually enough.22## Easing Tokens23Define named easing curves mapped to semantic use cases:24| Token | Curve | Use |25|---|---|---|26| `ease-standard` | cubic-bezier(0.2, 0, 0, 1) | Most UI transitions — elements moving between states |27| `ease-decelerate` | cubic-bezier(0, 0, 0.2, 1) | Elements entering the screen |28| `ease-accelerate` | cubic-bezier(0.3, 0, 1, 0.3) | Elements leaving the screen |29| `ease-spring` | spring / cubic-bezier(0.34, 1.56, 0.64, 1) | Playful or tactile interactions (FAB expand, drawer bounce) |30| `ease-linear` | linear | Looping animations only (progress spinners, shimmer) |31## Choreography Rules32When multiple elements animate together:33- **Stagger**: related elements entering together stagger by 30–50ms; lead with the most important34- **Coordination**: elements in the same semantic group use the same duration and easing35- **Sequence total**: total duration of a staggered sequence should not exceed 500ms36- **Direction consistency**: if elements slide in from the right, related outgoing elements slide out to the left37## Reduced Motion38The `prefers-reduced-motion: reduce` media query must be handled at the system level, not component by component:39- **Disable**: remove sliding, scaling, and rotation animations40- **Replace**: substitute instant state changes or simple opacity fades (opacity transitions are generally acceptable)41- **Preserve**: keep animations that convey essential state information (loading spinners, progress)42- **Token approach**: define a `duration-instant` (0ms or 1ms) override for all duration tokens under reduced-motion, applied globally43## Implementation44- Define duration and easing values as CSS custom properties (or platform-equivalent tokens)45- Apply reduced-motion overrides at the `:root` level within a `prefers-reduced-motion` query46- Document each token with: name, value, use case, and a live example47- Include motion tokens in the design token export pipeline — they should live alongside color and spacing tokens48## Motion Principles (to define per product)49Every product's motion system should be grounded in 3–5 principles:50- Example: "Purposeful — every animation communicates a state change or relationship"51- Example: "Quick — UI motion is never slow; we respect users' time"52- Example: "Physical — motion follows natural physics; decelerate on entry, accelerate on exit"53- Example: "Accessible — all motion respects user preferences and never causes discomfort"54## Best Practices55- Start with fewer tokens and add only when a new use case genuinely doesn't fit existing values56- Test all motion on low-powered devices — what's smooth in design tools can be janky in production57- Include motion in design QA checklists alongside color and spacing58- Document what should NOT animate as clearly as what should — not everything moves
Owl Listener