Foundations
Motion
Motion is restrained and functional — it confirms an action happened, it never performs for its own sake. Every animated property respects prefers-reduced-motion.
Try it
Hover the square — it scales using --duration-base (200ms) and --easing. Quick UI feedback (hover, focus) uses --duration-fast (120ms) instead.
Usage rules
| Token / rule | Detail |
|---|---|
| --duration-fast (120ms) | Micro-interactions: hover, focus, small state toggles. |
| --duration-base (200ms) | Everything else: elevation changes, expand/collapse, page transitions. |
| --easing | cubic-bezier(0.4, 0, 0.2, 1) on every animated property — no linear or bounce easing. |
| Reduced motion | All durations collapse to ~0 automatically under prefers-reduced-motion — never bypass this per-component. |
Showing static fallback rules — add a "Foundation" document in Sanity Studio with slug motion to manage the usage rules above from the CMS.