| name | motion-design |
| description | Design motion that communicates hierarchy, causality, state change, brand character, and pacing while respecting accessibility and performance. |
Motion Design
Use for UI animation, transitions, explainers, brand motion, product demos, and interactive feedback.
Procedure
- Define what the motion must explain or make feel different.
- Identify start/end states, trigger, duration constraints, interruption behavior, and whether motion carries functional information.
- Choose easing, sequencing, distance, scale, opacity, or transforms to reinforce causality and hierarchy.
- Keep related objects temporally coherent and avoid decorative motion that competes with the user's task.
- Define reduced-motion behavior where the motion is nonessential or potentially problematic.
- Prototype at real size/speed and review in context.
- Hand off timing, curves, state transitions, and assets precisely enough to implement.
Quality gate
A user should understand the state change better with the motion than without it.
