Motion vocabulary is the layer above 'add some animations'. It's a set of duration tokens (fast, base, slow) and easing tokens (ease-out, ease-in-out, spring) that components reference, the same way they reference color and spacing. Once the vocabulary exists, every micro-interaction in the system gets predictable timing and feel without per-component decisions.
These references document motion as a first-class foundation — not just animations to copy, but tokens to inherit. Apple's Human Interface Guidelines, Carbon, Material Design, and Polaris all treat motion this way.
- 01Duration tokens (instant, fast, base, slow, slower) with explicit millisecond values.
- 02Easing tokens with curve definitions (ease-out, ease-in-out, spring) — not arbitrary cubic-beziers per component.
- 03Per-platform spring physics where appropriate — Apple's HIG documents stiffness and damping for native UIs.
- 04Reduced-motion handling — components honor prefers-reduced-motion and degrade transitions to opacity.
- 05Motion documented at the system level, not per-component — components reference the tokens.
- 01Every component invents its own animation duration and easing; the product feels inconsistent without anyone being able to name why.
- 02prefers-reduced-motion isn't honored — accessibility users are stuck with full-fat animations they didn't ask for.
- 03Animations are too long (>300ms for micro-interactions) and the product feels sluggish.
Apple Human Interface Guidelines
Apple
Spring physics
iOS uses spring physics throughout (stiffness, damping, mass) — the reference for natural-feeling motion on native UI.
Carbon
IBM
Motion tokens
Documented duration tokens (duration-fast-01 through duration-slow-02) with explicit millisecond values and use cases.
Material 3
Motion system
Material's motion is a documented foundation — duration ramps, easing curves, container transformations. The most thorough public motion documentation.
Polaris
Shopify
Motion tokens
Duration and easing tokens engineered for admin UIs — restrained, fast, predictable. The opposite of consumer-app drama.