Motion Design

---
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
1. Define what the motion must explain or make feel different.
2. Identify start/end states, trigger, duration constraints, interruption behavior, and whether motion carries functional information.
3. Choose easing, sequencing, distance, scale, opacity, or transforms to reinforce causality and hierarchy.
4. Keep related objects temporally coherent and avoid decorative motion that competes with the user's task.
5. Define reduced-motion behavior where the motion is nonessential or potentially problematic.
6. Prototype at real size/speed and review in context.
7. 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.