| name | motion-system |
| description | Define reusable motion principles and patterns for hierarchy, continuity, feedback, transitions, emphasis, duration, easing, and reduced-motion alternatives. |
Motion System
Use when a product or brand needs coherent motion behavior across many interactions or assets.
Procedure
- Identify the jobs motion must perform: orientation, causality, hierarchy, feedback, state change, delight, narrative, or brand expression.
- Define core principles such as spatial continuity, responsiveness, restraint, physicality, or stylization in observable terms.
- Create a small duration and easing vocabulary tied to interaction scale and urgency rather than arbitrary animation presets.
- Define recurring transition patterns for entering or exiting, expanding or collapsing, reordering, navigation, loading, success or error, and other relevant states.
- Specify how motion should adapt or reduce for users who request reduced motion and for low-performance contexts.
- Map patterns to design-system components or tokens or production templates where reuse adds value.
- Test sequences in context at real interaction speed, including interruptions and rapid repeated input.
- Document exceptions where cinematic or brand motion intentionally departs from product interaction rules.
Decision rules
- Motion should communicate state or hierarchy before it decorates.
- Duration should follow interaction scale and responsiveness, not one global number.
- Reduced motion is an alternate communication path, not simply animation disabled everywhere.
- Interrupted animations must leave the interface or scene in a valid state.
Quality gate
The motion system is ready when recurring interactions have coherent timing and transition logic, motion communicates causality and hierarchy, reduced-motion behavior is defined, interruptions are safe, and teams can reuse the system without flattening every motion context into one effect.
