Motion tokens — durations (0–500ms) and easing curves. L2 aliases give semantic names like dur-fast (100ms, state changes), dur-normal (150ms, menus/tooltips), dur-gentle (200ms, transitions), ease-ui (standard UI), and ease-bounce (playful spring). Components that animate drop their motion individually under prefers-reduced-motion: reduce — there is no global reset.
a11y (built in): under prefers-reduced-motion: reduce the previews below freeze and a visible notice appears above them — the token values still resolve, only the motion stops. Each row carries a real <button aria-label="Play preview">, so a preview is keyboard-triggerable rather than hover-only, and continuous looping is opt-in behind a role=switch toggle that starts off. Components with ambient or transform motion drop it under the same query — the badge pulse and the interactive-card lift, among others.
Animation Demo
Reduced-motion enabled — previews below are static. Token values still apply when motion is re-enabled in your OS settings.
Hover a row or press Play to preview. Box travels the same distance each time, so differences in duration or easing are directly visible.
L1 Duration primitives
--lb-duration-0
0ms (instant)
--lb-duration-50
50ms
--lb-duration-100
100ms
--lb-duration-150
150ms
--lb-duration-200
200ms
--lb-duration-300
300ms
--lb-duration-500
500ms
L1 Easing primitives
--lb-ease-linear
cubic-bezier(0, 0, 1, 1)
--lb-ease-standard
cubic-bezier(0.2, 0, 0, 1) — UI default
--lb-ease-decelerate
cubic-bezier(0, 0, 0, 1) — ease-in
--lb-ease-accelerate
cubic-bezier(0.3, 0, 1, 1) — ease-out
--lb-ease-spring
cubic-bezier(0.2, 1.4, 0.4, 1) — bounce
L2 Semantic aliases
--lb-animation-dur-instant
→ duration-0 · Instant state
--lb-animation-dur-micro
→ duration-50 · Button press feedback
--lb-animation-dur-fast
→ duration-100 · Hover, focus
--lb-animation-dur-normal
→ duration-150 · Menus, tooltips
--lb-animation-dur-gentle
→ duration-200 · Modals, popovers
--lb-animation-dur-slow
→ duration-300 · Drawers, page transitions
--lb-animation-dur-collapse
→ duration-500 · Large collapse/expand motion (no shipped component uses it yet)
--lb-animation-ease-ui
→ ease-standard · Default for all UI motion
--lb-animation-ease-in
→ ease-decelerate · Enter animations (element arriving)