Motion
Movement should feel like the interface is already running, and the user just caught up to it. Fast, confident, out of the way. Never decorative.
Four speeds
Pick by scale: small elements move fast, big elements move slow. Hover the bar to see the relative length.
Six curves
Hover any card to play the animation. Standard is the default — only reach for the others when the motion wants to say something specific.
How we move
Fast on exit, slower on entrance.
A modal opens in 320ms · closes in 200ms. The user's already moved on — don't make them wait for the curtain.
Never animate opacity alone.
Something that just fades in feels ghostly. Add a short translate (4–8px) so the motion reads as a move, not a reveal.
Stagger by 40ms, never more.
When multiple elements enter together, offset them slightly so the eye can follow. Longer and the sequence feels slow.
Respect reduced motion.
Under prefers-reduced-motion, swap every transition for a crossfade at 80ms. No translates, no springs.