Motion & Interaction
How a product moves, defined once and implemented properly.
- Build iterations
- Principles, then passes
- Deliverables
Motion is where a product stops being a set of screens and acquires a temperament. The same layout reads as precise or sluggish depending entirely on how it moves.
Defined as a system
- Easing and duration fixed as a scale, not chosen per component.
- Transition logic — what enters, what persists, what is never animated.
- Documented, so a future feature makes the same decisions.
Implemented, not handed over
Motion is specified in the same tokens the rest of the system uses and implemented directly. That closes the usual gap between the animation that was approved and the one that shipped.
Motion & Interaction: common questions
Design or implementation?
Both. Motion that exists only in After Effects tends to arrive in production as something slower and worse. Here it ships as code.
Will it hurt performance?
No. Animation runs on compositor-friendly properties with a measured frame budget. If it cannot hold sixty frames per second it does not ship.
What about motion sensitivity?
`prefers-reduced-motion` is respected everywhere, and the reduced state is designed rather than merely switched off.