Motion

Duration and easing tokens, and reduced-motion.

Durations

--duration-instant75msState flips: hover, active

--duration-fast150msSmall transitions: colour, opacity

--duration-normal250msEntering and leaving elements

--duration-slow400msLarge surfaces: sheets, drawers

--duration-slower600msProgress and celebratory motion

Easing

Press play to compare. Standard easings feel mechanical; quart-out decelerates the way physical objects do.

linear

ease-out

--ease-out-quart

--ease-spring

Reduced motion is not optional

The base layer collapses every animation and transition to 0.01ms under prefers-reduced-motion: reduce. Vestibular disorders make large-surface motion genuinely nauseating — this isn't a preference toggle, it's an accessibility requirement.