Tool · Motion
Spring physics playground
Three numbers decide how a spring feels: stiffness, damping and mass. Drag them, release the box, then copy the code that reproduces exactly what you saw.
- ω₀ rad/s
- 14.8
- ζ damping
- 0.61
- Overshoot
- 9.0%
- Settle
- 400ms
How to read it: ζ below 1 overshoots, ζ of 1 lands cleanly at the fastest speed, above 1 creeps in. Overshoot under ~5% reads as UI polish; 15–25% reads as playfulness. Settle is when motion is within 2% of the target.
Why springs instead of cubic-bezier
An easing curve describes a path in time. A spring describes a force. That difference matters the moment motion gets interrupted: a curve restarts from zero velocity, so a half-open drawer snaps and stutters when you close it mid-flight. A spring carries the velocity it already had, which is why interruptible UI — drawers, toasts, toggles, anything you can tap twice — feels better with one.
The same model also makes the numbers portable. A designer'sstiffness: 220, damping: 18, mass: 1 lands on iOS, Android and the web identically, because it is physics rather than a hand-drawn curve.
Picking the numbers
Work backwards from the damping ratio, not from the sliders. ζ is what your eye actually reads.
| Feel | ζ | Overshoot | Use for |
|---|---|---|---|
| Crisp | 0.7 – 0.9 | 0 – 3% | Menus, sheets, page transitions |
| Springy | 0.5 – 0.7 | 4 – 16% | Toggles, cards, hover reveals |
| Bouncy | 0.25 – 0.5 | 16 – 45% | One playful moment per screen |
| Heavy | 0.9 – 1.1 | ≈ 0% | Large panels, drag release |
Then fix the duration with stiffness and mass. Doubling stiffness halves the period but also doubles the acceleration, which can look violent; raising mass slows it down while keeping the arc soft. In practice:m: 1 with k between 150 and 400 covers most interface motion.
The CSS output
The CSS tab samples the spring's step response into alinear() easing function, which browsers have supported since 2023. It is a sampled approximation, not a simulation: it reproduces the shape of the curve including overshoot, but it cannot inherit velocity mid-transition. If the motion has to survive interruption, use the Motion version.