Motion

Five durations, three curves. Motion is the one part of a design system that can actively hurt people, so the reduced-motion story is part of the spec rather than a patch.

Duration

--d-instant90msColour swaps that must feel immediate

--d-fast150msHover, focus, pressed states

--d-base240msPanels opening, density changes

--d-slow380msLarge surfaces entering

--d-slower600msFull-page transitions

Tailwind resolves duration-* from --transition-duration-*, not --duration-*. Naming them wrong produces no error and no utility — the class simply never gets generated.

Easing

--e-outcubic-bezier(.22,.61,.36,1)

Almost everything — enters fast, settles

--e-inoutcubic-bezier(.65,.05,.36,1)

Moves that start and end on screen

--e-springcubic-bezier(.34,1.56,.64,1)

Overshoot — switch thumbs, toasts

Reduced motion

The token layer collapses every CSS transition and animation to 0.01ms under prefers-reduced-motion: reduce. That covers hovers, menus, toasts and the switch thumb without any component opting in.

What it does not cover is JavaScript-driven motion. A requestAnimationFrame loop moving something frame by frame is invisible to CSS, so honouring the preference there has to be done in the code that drives it. The agent console’s trace replay is the worked example: instead of a continuous sweep, the cursor steps from one span boundary to the next. The feature survives; the continuous movement does not.

Rule

If motion is driven by CSS, the token layer already handled it. If motion is driven by JavaScript, you have to handle it yourself.