System

Motion. Six durations and four easings the registry never shipped.

Durations

The registry ships no duration tokens, so every one of these is this site's. The rule they encode: interface motion stays at or under --duration-slow, and anything a user triggers a hundred times a day should not animate at all.

Play them together
Reduced motion

popover100ms

fast150ms

base200ms

deliberate240ms

slow300ms

canvas-ready600ms

TokenValueUse
popover100msA popover or dropdown appearing. Short enough that the panel feels attached to the click rather than sent for.
fast150msThe default for a state change on something already on screen: a hover, a fill, a border.
base200msThe default for something entering or leaving.
deliberate240msA movement the reader is meant to follow rather than absorb.
slow300msThe ceiling for interface motion. Past this a transition reads as waiting.
canvas-ready600msNot an interface duration: the beat a canvas or shader gets to warm up before it is shown.

Easings

Five curves. Only --ease-out-quart comes from the registry; the other four are this site's. Each swatch draws its own cubic-bezier, so the shape beside it is the curve the token actually holds.

Play each curve--ease-*

small

large

expressive

expressive-spring

expressive-pop

out-quartregistry

out

in

in-out

morph

CurveTokenValueUse
smallcubic-bezier(0, 0, 0.2, 1)No description yet.
largecubic-bezier(0, 0, 0.2, 1)No description yet.
expressivecubic-bezier(0.22, 1, 0.36, 1)No description yet.
expressive-springcubic-bezier(0.34, 1.56, 0.64, 1)No description yet.
expressive-popcubic-bezier(0.34, 1.96, 0.94, 1)No description yet.
out-quartregistrycubic-bezier(0.165, 0.84, 0.44, 1)The registry's own curve, the one token on this page that is not ours. Sharper than --ease-out.
outcubic-bezier(0.215, 0.61, 0.355, 1)Entering and leaving, both directions. Exits were moved off ease-in in the motion audit, because an exit that accelerates reads as the interface dropping something.
incubic-bezier(0.55, 0.085, 0.68, 0.53)Kept for the rare case of something genuinely leaving the screen for good. Almost never the right answer.
in-outcubic-bezier(0.645, 0.045, 0.355, 1)An element already on screen moving to a new position.
morphcubic-bezier(0.32, 0.72, 0, 1)One shape becoming another, where the start and end are the same object.