Designing motion that feels physical, not decorative

Motion is the part of an interface people feel before they read anything. A menu that opens with a tiny overshoot reads as responsive; the same menu on a linear fade reads as slow, even when it is faster.

Why springs beat easing curves

Easing curves are defined by duration. Springs are defined by physics — stiffness, damping and mass — so they settle naturally from whatever velocity they start with. That makes them the right default for anything a user can grab, flick or interrupt.

If a user can interrupt it, it should be a spring.

Tuning stiffness and damping

We use three presets across the library. Snappy for small controls, smooth for panels and gentle for page-level transitions.

1export const springs = {
2  snappy: { type: "spring", stiffness: 500, damping: 30 },
3  smooth: { type: "spring", stiffness: 380, damping: 32 },
4  gentle: { type: "spring", stiffness: 120, damping: 20 },
5} as const;

Interruptible by default

Because springs carry velocity, reversing a drawer halfway through its open animation simply redirects it. No jump, no queued animation.

Respecting reduced motion

Every component checks the user's reduced-motion preference and swaps movement for opacity. Nothing important is ever communicated by motion alone.

Wrapping up

Good motion is invisible: it explains where things came from and where they went, then gets out of the way.