Tokens

Motion

The base layer animates by setting data-state and leaving the transition to CSS. Without these tokens every component picks its own number.

Duration

Distance sets duration. A tooltip travels almost nowhere and is done in 150ms; a sheet crossing the screen needs 400ms or it reads as a jump cut.

duration[70]70msHover and press color changes

duration[100]100msCheckbox, switch, icon rotation

duration[150]150msTooltip, badge, inline expand

duration[200]200msThe default: popover, dropdown, toast

duration[300]300msDialog, drawer

duration[400]400msBottom sheet, page transition

Easing

Direction sets easing. Something arriving decelerates so it lands; something leaving accelerates, because nobody waits out a dismissal they asked for.

easing.standardcubic-bezier(0.2, 0, 0, 1)Moves and resizes: anything staying on screen

easing.entrancecubic-bezier(0.05, 0.7, 0.1, 1)Appearing. Decelerates so it lands

easing.exitcubic-bezier(0.3, 0, 0.8, 0.15)Leaving. Accelerates, and can be quicker

easing.linearlinearSpinners and progress

Durations are numbers because they are measurable; easings are names because a curve is four numbers, the same argument that keeps shadows on t-shirt sizes.