Motion
Every duration is
calc(var(--cfg-motion) × …). Three settings, one override. The toolbar stamps it here.
| Stamp | --cfg-motion | What it means |
|---|---|---|
data-ui-motion="on" | 1 | normal |
data-ui-motion="off" | 0 | instant |
data-ui-motion="debug" | 10 | ten times slower, for study |
@media (prefers-reduced-motion: reduce) | 0 | the OS preference wins over every stamp |
data-ui-motion rides <html>. The OS preference wins by one rule: @media (prefers-reduced-motion: reduce) { :root, [data-ui-motion] { --cfg-motion: 0 } }.A surface that liftsHover. Surface and ink transition on the clock.
A drawerSlide and scrim share one duration.
A dialogOpacity and scale, top-pinned.