Motion
Motion is functional, not decorative. It communicates state change, progress, focus, and hierarchy.
Motion Principles
- Use motion to indicate state change, progress, focus, and hierarchy.
- Keep transitions short, direct, and consistent.
- Avoid decorative flourishes that do not communicate system meaning.
- Respect prefers-reduced-motion; provide instant state changes when requested.
Duration Scale
| Duration | Usage |
|---|---|
| 100 ms | Micro-feedback (button press, toggle) |
| 150 ms | Hover states, small UI reveals |
| 250 ms | Panel transitions, state changes |
| 400 ms | Page transitions, hero reveals |
| 600 ms+ | Ambient or instructional motion only |
Easing
- Standard: ease-out for objects entering or moving forward.
- Symmetric: ease-in-out for state toggles and reversible transitions.
- Snap: cubic-bezier(0.2, 1, 0.3, 1) for confident, precise arrivals.
PENDING Product-level motion audit and prefers-reduced-motion tests are still pending. Motion curve and timing tokens are now in design_tokens.md.