Why springs feel good
Hand-tuned cubic-bezier curves move predictably. Springs don't. They reflect the energy of the user's input — a gentle drag returns gently, a flick overshoots and settles. That asymmetry is what makes spring-driven motion feel alive instead of canned.
This component creates a playful, skeuomorphic animation inspired by the work of Preet Mishra. Three logo cards drop into a pocket-shaped frame using spring physics — each with its own stiffness and damping so the motion staggers naturally. Hit replay to watch them land again.
Under the hood
Each card uses framer-motion with type: "spring" and a different combination of stiffness, damping, and mass. Higher stiffness pulls harder back to rest; higher damping bleeds energy out faster. Vary either, and the cards land with a different feel — bouncy, floaty, or quick.
The pocket shape itself is just a custom SVG <clipPath> applied to a rounded container, so the cards appear to drop into the pocket rather than over it.
A simple playground
If you want to feel the math directly — no bezier, no presets — drag the circle below. Release it and the spring pulls it back to center. Tune the parameters and watch how the character of the motion changes.
drag the circle, then let go.
The math
A spring's motion is governed by Hooke's law plus a damping term:
F = -k * x - c * v
Where k is stiffness, c is damping, v is current velocity, and x is current displacement from rest. Each frame, force is divided by mass to get acceleration, then integrated forward in time:
v += (F / m) * dt
x += v * dt
That's it. No animation curve, no fixed duration. The motion stops when the system reaches equilibrium.
Why this matters in ui
Drag a sheet down, release, and a spring decides where it goes. Tap a button, and a spring decides how it scales back. Resize a window, and a layout that uses springs continues from whatever velocity the user just gave it — instead of restarting from zero.
This is why ios and most modern apps feel responsive in a way css keyframes don't: the system never lies about where the energy came from.