# Spring Animation

> Why spring-driven motion feels alive, and the math (Hooke's law plus a damping term) behind a small spring playground.

## 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](https://preetmishra.com/craft). 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.

## 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.

---
Source: https://www.akshatgoel.com/internal/spring-animation