Most spring presets feel either floaty or twitchy. A short heuristic helps.
The shape I aim for
Critically-damped springs settle without overshoot, which is fine for utility transitions (menus, modals). Slightly underdamped springs overshoot about 5–10%, which is better for hero motion, where the bounce reads as personality.
Numbers I keep handy
- Sheet open:
{ stiffness: 380, damping: 36 } - Modal in:
{ stiffness: 260, damping: 26 } - Hero float:
{ stiffness: 120, damping: 14 }
You can derive more by ear, but this set covers most of what I reach for.