System
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.
popover100ms
fast150ms
base200ms
deliberate240ms
slow300ms
canvas-ready600ms
| Token | Value | Use |
|---|---|---|
| popover | 100ms | A popover or dropdown appearing. Short enough that the panel feels attached to the click rather than sent for. |
| fast | 150ms | The default for a state change on something already on screen: a hover, a fill, a border. |
| base | 200ms | The default for something entering or leaving. |
| deliberate | 240ms | A movement the reader is meant to follow rather than absorb. |
| slow | 300ms | The ceiling for interface motion. Past this a transition reads as waiting. |
| canvas-ready | 600ms | Not an interface duration: the beat a canvas or shader gets to warm up before it is shown. |
Five curves. Only --ease-out-quartcomes 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.
--ease-*out-quartregistry
out
in
in-out
morph
| Curve | Token | Value | Use |
|---|---|---|---|
| out-quartregistry | cubic-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. | |
| out | cubic-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. | |
| in | cubic-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-out | cubic-bezier(0.645, 0.045, 0.355, 1) | An element already on screen moving to a new position. | |
| morph | cubic-bezier(0.32, 0.72, 0, 1) | One shape becoming another, where the start and end are the same object. |