← Back to catalog📄 Implementation guide
Motion / Interaction

Spring Animation

Adds physics-based movement with bounce and settling.

Natural, polished, app-like

Professional
Casual
Exotic
Visual impact
Difficulty
Performance cost

Best use: Menus, modals, draggable UI

Resono
Cassette Sun June Halliday · Paper Weather
Grab the card — throw it and let go. It springs back to home and settles.

Spring physics

One integrator drives it all. Tune it, then throw the card.

Haptic bounceKnob overshoots, then settles

Technique: a per-frame spring integrator — F = −k·x − c·v (stiffness / damping) stepped with semi-implicit Euler in requestAnimationFrame, driving CSS transform. Drag throws it; release springs it home.