Spring Settings Are Design Decisions

A spring has three numbers: stiffness, damping and mass. They decide whether a panel snaps into place, drifts, or overshoots and wobbles back. Nobody sees the numbers, but everyone feels the result, so choosing them is a design decision, not an implementation detail to settle at the end.

What the Numbers Do

Stiffness is how hard the spring pulls toward its target. Damping is how quickly that motion dies away. Mass is how heavy the moving thing feels. High stiffness with low damping arrives fast and overshoots. Moderate stiffness with more damping arrives a little later and stops cleanly.

// Arrives fast, overshoots, wobbles before it settles
const overshooting = {
  stiffness: 400,
  damping: 10,
  mass: 0.5,
}

// Arrives a little later and stops without overshoot
const settled = {
  stiffness: 200,
  damping: 25,
  mass: 1,
}

Neither is better in general. Overshoot suits something you threw, like a card flicked off screen. It is wrong for a control that should simply answer, because the wobble reads as hesitation. So the values belong with the palette and the type scale: a small set, chosen once, reused everywhere.

Where This Shows Up Here

On this site's project list, the chevron turns on the snappy spring (stiffness 500, damping 35): it answers the click and settles without a wobble. The row itself opens on a timed curve instead, 300ms for height and 200ms for opacity, and it closes faster than it opens, in 220ms, because leaving should cost less than arriving. With reduced motion on, both drop to zero.

None of that shows up in a mockup. It only exists once the interface runs, which is why I tune it in code, with the thing in my hand, rather than describing it and handing it off.