real spring physicsrace any two curvesexports CSS, Tailwind, Framer Motion
Motion
Stage
Drop in your icon, logo or SVG and watch it move on your curve. It stays in this browser.
Race against
yours
ease-in-out
421msto settle
2.3%overshoot
1overshoot pass
0.77damping ratio
20linear() stops
yoursease-in-out
01
Bring your own motion
Race what you already ship.
Paste an easing out of your codebase, or a whole stylesheet. Nothing is uploaded \u2014 the parsing happens in this tab.
The snippet reads the motion off whatever page you have open — including localhost and pages behind a login, which a URL fetcher could never reach. Paste it into DevTools, then paste the result back here.
Nothing inspected yet.
02
The library
Sixteen presets, all running at once.
Each on its own clock, with its real numbers on the card. Steal one, or open it and make it yours.
Springs
Gentle
1050ms
no overshoot
ζ 1.10
Overdamped — never overshoots. Panels, drawers.
Snappy
421ms
2.3% past
ζ 0.77
Quick, barely a wobble. Buttons, toggles.
Bouncy
951ms
22% past
ζ 0.43
Two passes, 22% past the target. Playful, use sparingly.
Wobbly
1576ms
37.5% past
ζ 0.30
Three passes, 37% past the target. Toys and games.
Stiff
345ms
0.2% past
ζ 0.90
Fast and flat. Tooltips, menus.
Heavy
1110ms
9.9% past
ζ 0.59
Weight behind it. Large surfaces, sheets.
Curves
Standard
520ms
x1 0.4
y2 1
The workhorse. Tailwind ships this as ease-in-out.
Decelerate
520ms
x1 0
y2 1
Enters fast, lands soft. Things arriving on screen.
Accelerate
520ms
x1 0.4
y2 1
Leaves in a hurry. Things being dismissed.
Anticipate
520ms
x1 0.6
y2 0.045
Pulls back before it moves. Dips below zero.
Back out
520ms
x1 0.175
y2 1.275
Overshoots once. The only bézier that can.
CSS keywords
ease
520ms
x1 0.25
y2 1
Defined by the CSS specification.
ease-in
520ms
x1 0.42
y2 1
Defined by the CSS specification.
ease-out
520ms
x1 0
y2 1
Defined by the CSS specification.
ease-in-out
520ms
x1 0.42
y2 1
Defined by the CSS specification.
linear
520ms
x1 0
y2 1
Defined by the CSS specification.
03
How it works
Four moves from a feeling to a line of code.
Then the one idea worth knowing, and the questions people ask.
01
Tune the spring
Pull stiffness, damping and mass until the card moves the way you mean.
02
Race another curve
Two lanes, one start gun. The gap between them is the argument.
03
Fling to set velocity
Throw the card on the Fling stage. Your release speed becomes the initial velocity.
04
Copy the code
CSS, Tailwind, Framer Motion or a Base44 prompt. Save curves, export the lot as tokens.
Why springs export as linear()
Spring: passes the target, comes back, settles
Bézier: flattens into the target, never crosses
The target value
A cubic-bezier() has four control values, so it can reach its target but never pass it. A spring that crosses, comes back and crosses again cannot be written as one, and tools round it off into something that feels wrong. linear() carries a list of sampled points instead, so the whole shape survives. Overshoot samples the solved spring, thins the list, and prints what is left.
Questions
Does it work in every browser?
The studio itself runs anywhere. linear() easing ships in current Chrome, Safari and Firefox; where it is missing the stage falls back to ease-out and says so, and the exported code stays correct.
Is my data uploaded anywhere?
No. Every curve is solved in this browser tab, there is no account and nothing is sent to a server. Curves you save live in this browser’s IndexedDB, so clearing site data clears them.
Can I use this in Figma?
There is no file to import, but the numbers carry: type the stiffness, damping and mass readouts into Figma’s custom spring easing, or paste the four control points for a bézier. Check it by eye afterwards.
What is the damping ratio?
It is ζ = c / (2√(km)) — damping measured against stiffness and mass. Below 1 the spring passes its target before settling; at 1 or above it arrives without ever crossing.
