Motion
| Token | Value |
|---|---|
motion.fast | 150ms |
motion.base | 200ms |
motion.easing | cubic-bezier(0.2, 0, 0.38, 1) |
Motion confirms that something changed. It never carries meaning on its own and it never makes the user wait.
1Interactive feedback — hover, press, toggle, a border changing colour:
fast.2Content transitions — rail collapse, dialog enter and exit:
base.3Animate
opacity, transform and colour — never a layout property. The GPU is busy rendering your preview; animating height or width drops frames.4Nothing exceeds
base. Nothing bounces, overshoots or lingers.5Generation progress is not an animation. It is a number and a stage name.
6No entrance animation on load.
7
prefers-reduced-motion: reduce collapses every duration to zero. Nothing is lost, because no state is conveyed by motion alone.A property card collapses by changing hidden and the chevron's transform, with no height animation. A segmented control switches with a 150ms change of fill and shadow. Every state change in the demos on these pages uses the three values above.