Motion

Five durations, three curves, six composed pairs — each figure performs its own function at its token's pace. Motion explains change, it never decorates. Reduced-motion preferences collapse all of it to instant.

Durations

Each duration performs its own function on a loop — the press flash, the toggle, the fill, the expanding panel, the arriving window — every change takes exactly its token's pace.

--duration-instant

50ms — Perceptual micro-change — a press flash.

--duration-fast

100ms — Small state changes — a toggle flips.

--duration-normal

150ms — Most transitions — a fill completes.

--duration-slow

250ms — Large, deliberate change — a panel expands.

--duration-immersion

500ms — Immersive surfaces — a window arrives.

Easings

The character of the movement at a fixed pace — every track runs the same slow duration, only the curve changes.

Standard settles, in accelerates away, out glides to rest.

--ease-standard

decelerate-settle — The default throughout the system.

--ease-in

accelerates — Reserved for exit.

--ease-out

decelerates — Reserved for enter.

Motion

The composed pairs — duration and curve travel together, exactly like a text role pairs size and weight. One pass per replay.

Enter settles, exit clears — the pairs carry both pace and character.

--motion-fast

Small state changes — hovers, presses.

--motion-normal

The everyday transition.

--motion-slow

Large, deliberate change.

--motion-enter

Content entering — settles on the enter curve.

--motion-exit

Content leaving — clears fast.

--motion-immersion

Immersive surfaces — windows and layers.