Tokens · Token families

Motion

The durations and easings of every transition, which drop to zero when the reader asks for reduced motion. Ships with @luz-ds/tokens.

Files: tokens.json → duration, tokens.json → easing

Take every duration from a token. Under prefers-reduced-motion: reduce all the durations become 0s, so motion stops everywhere with no extra CSS.

Run transitions

Reduced motion is on, so the dots jump instead of travelling.

Durations

--luz-easing-standard cubic-bezier(0.3, 0, 0.1, 1)
--luz-easing-enter cubic-bezier(0.15, 0.6, 0.3, 1)
--luz-easing-exit cubic-bezier(0.5, 0, 0.85, 0.4)
--luz-easing-spring cubic-bezier(0.3, 1.35, 0.55, 1)
--luz-easing-linear linear

Ships with tokens, with the switch to 0s under reduced motion, so a page with tokens alone loses its motion too.

.panel {
  transition: opacity var(--luz-duration-base) var(--luz-easing-standard);
}

Standard for movement within the page, enter for things that arrive, exit for things that leave.
Spring overshoots a little: keep it for small, playful details.
Never hard-code a duration: it would ignore reduced motion.