Spring Tuner

Nice interface motion isn't a duration and a curve you picked from a menu — it's a little spring with a weight on the end. Three numbers decide everything it does. Click the stage to throw the card at the other slot, then drag the three knobs and watch the same motion redraw itself as a line.

click the stage · or press space

Travel over time

A chart of the card's travel over time.

How this spring behaves

—overshoot
—settle time
—bounces
ready

Settled is the moment it stops leaving the shaded band — 2% of the trip either side of the slot. That is the number that matters: it is how long the motion feels like it lasts.

Start from a feel

The three knobs

How hard the spring pulls. More stiffness, faster trip — and a harder arrival.
The brake. Too little and it wobbles for ages; too much and it crawls in.
How heavy the card feels. Weight slows it down and makes it harder to stop.

Take it with you

transition: transform

Same spring, written as an easing curve any browser can replay on its own.