FoundationsShipped
Motion
Things settle. One house curve, five durations named by role, every animation behind prefers-reduced-motion.
Easing
Show code
<div class="d-motion-track ease-out"><span class="d-motion"></span></div>
<div class="d-motion-track ease-io"><span class="d-motion"></span></div>
<div class="d-motion-track ease-snap"><span class="d-motion"></span></div>
<button class="btn btn-ghost btn-sm" data-replay>Play: out · io · snap</button>| Token | Value | Role | Status |
|---|---|---|---|
--ease-out | cubic-bezier(.22,1,.36,1) | Settle. Reveals, nav tuck, icon nudge - the house curve. | Shipped |
--ease-io | cubic-bezier(.22,.61,.36,1) | Morphs that start and stop on screen: the loader drum. | Shipped |
--ease-snap | cubic-bezier(.32,.72,0,1) | Physical UI: switches, drawers, chevrons. | In tools |
--d-fast | 200ms | Opacity and colour on links. | Shipped |
--d-base | 250ms | Fills and borders on buttons. | Shipped |
--d-move | 320ms | Things that travel: nav tuck, toggles, toasts. | Shipped |
--d-slow | 450ms | Icon nudge, image filters, crossfades. | Shipped |
--d-reveal | 950ms | Scroll reveal. Only ever on entry. | Shipped |
Rules
- Entry only. Reveals play once as content arrives and never again on scroll back.
- Cursors do not ease. The hero's pixel hand moves with
steps(1,end)- smooth reads as a floating illustration. - Two animations do not compose
transform. Split them across nested elements. - Reduce removes motion, not meaning. The nav still tucks and the loader still runs - each in one frame.
Reduced motion
@media (prefers-reduced-motion:reduce){
.rv{opacity:1;transform:none;filter:none;transition:none;}
.nav{transition:none;} /* still tucks - a layout response, not decoration */
}