Skip to main content

Motion

Foundations

The motion system: duration and easing tokens that every transition uses, scaled by the person's motion preference down to none.

Examples

4 live examples

Gate Full Motion

Reads the EFFECTIVE transition duration of a probe element under explicit `data-motion-pref="full"`. Explicit "full" overrides any OS reduce request, so this is environment-independent: it must resolve to the full ~0.18s base.

Gate Floor Never Zero

Guardrail for the load-bearing `--motion-min` floor: even at the worst case (`--motion-factor` = 0) the effective duration must stay strictly > 0s. A literal 0s never fires `transitionend`, which would strand Radix's CSS unmount-suspension (overlays would never unmount). Locks the `max(…, --motion-min)` in themes.css against a future "simplify" that drops the floor.

Utilities Generated

Proves the Tailwind UTILITIES (not just the raw CSS vars) are generated and resolve to the tuned, gated scale (fast ≈0.16s, base ≈0.26s, slow ≈0.38s), and that `ease-standard` is the standard cubic-bezier — these are what components actually use. If a long-running dev server hasn't picked up the @theme additions, these resolve to defaults/none and this fails.