Motion — Design System

Duration and easing

Token	Value	Use for
`--motion-duration-fast`	120ms	Hover, focus, and menu open/close.
`--motion-duration-normal`	180ms	Button feedback and small layout changes.
`--motion-duration-slow`	280ms	Intentional surface movement; use sparingly.
`--motion-ease-standard`	Decelerating curve	Most state changes.
`--motion-ease-emphasized`	Soft overshoot curve	Small, reversible emphasis such as a popover entrance.

Dialog, Tooltip, Popover, Select, and Menu use opacity and scale transitions that reverse from the current visual state when closed during entry. The shared motion-popover class limits transitions to opacity, scale, and transform so unrelated changes, such as scrollbar colors, do not delay removal. Dialog backdrops use the same 120ms timing.

Interactive example

Hover or focus the surface to see the normal duration and emphasized easing. The motion communicates that the surface is interactive; it does not carry essential information.

Hover or focus this example

Reduced motion

The global stylesheet honors prefers-reduced-motion: reduce by collapsing animations and transitions to an effectively instant change. Do not reintroduce motion with an inline style that bypasses this contract.

Animate opacity or a small transform when it helps users track an element entering or leaving.

Do not

Use continuous loops, large parallax movement, or a transition to hide a loading state.