Motion
Fast by default. Easing lives in tokens so that rhythm stays consistent across the site instead of being re-invented inside each component.
Duration
Below about 100ms a change reads as instantaneous and the reader cannot tell what moved. Above about 300ms they are waiting on the interface. The default sits just above the lower bound.
- --duration-fast 140ms — colour, border, opacity
- --duration 160ms — the default for anything interactive
- --duration-moderate 260ms — something moving through space
- --duration-slow 800ms — one-off reveals, never a control
Easing
Press play on each — a curve is far easier to judge in motion than as four numbers.
Reduced motion
Under prefers-reduced-motion: reduce every duration token collapses to 0ms, so the dots above jump rather than travel and every transition in the system stops at once. Components do not need to know about this.