Spring Visualizer
Motion is hard to judge from code. Tune how a spring feels, replay it, and copy the exact values into Framer Motion, SwiftUI, UIKit, Compose, or CSS. For keyframe-based easing instead, try the Cubic Bezier Editor.
{ type: "spring", stiffness: 158, damping: 25, mass: 1 }Why this exists
Motion is hard to judge from code alone. This tool lets you tune how an animation feels, replay it, and copy the exact values into your app – instead of guessing at numbers and rebuilding to check.
Coding agents build UI fast, but they tend to guess at motion. Hand one “a smooth spring” and you get a shrug. Tune the feel here and copy the framework-specific config, or paste it into the prompt, and the guesswork is gone.
Who it is for
Product designers, prototypers, frontend, iOS and Android developers, and anyone building UI with coding agents.
How to use it
Pick a mode, tune the spring, replay the motion, then copy the code for your framework.
What the controls do
- Stiffness – speed and energy. Higher is faster and snappier.
- Damping – how quickly it settles. Higher means less wobble and overshoot.
- Mass – how heavy the object feels. Higher is slower to start and slower to stop.
Prefer Apple’s terms? Duration is roughly how long it takes to settle, and Bounce is how much it overshoots (0 is none, 1 is springy).
Handing it off
Do not hand off “make it smoother”. Hand off the curve, the replay, and the exact config. Tune once, copy it, and keep motion consistent across platforms.
Frequently asked questions
What is a spring animation?
A spring animation moves the way a real spring would: it speeds up, can overshoot, then settles, instead of following a fixed timing curve. That tends to feel more natural than a standard ease. Springs are used in Framer Motion, SwiftUI, UIKit, React Native Reanimated, and Android Jetpack Compose.
What do stiffness, damping, and mass actually do?
Stiffness is speed and energy: higher means faster and snappier. Damping is how quickly it settles: higher means less wobble and overshoot. Mass is how heavy the thing feels: higher means slower to get going and slower to stop. You do not need the math – nudge each one and watch the curve and the replay until the motion feels right.
How does Apple’s duration and bounce work?
It is the same spring described with two friendlier dials. Duration is roughly how long the motion takes to settle. Bounce is how much it overshoots: 0 is no bounce, 1 is very springy. This tool converts between duration/bounce and stiffness/damping/mass, so you can work in whichever your framework uses and copy the other for free.
What values should I use for UI animations?
Start from a preset and adjust to taste: Smooth for subtle transitions, Snappy for responsive taps, Bouncy for playful moments. As a rule of thumb, a settle time under about 600ms feels responsive and over a second feels deliberate.
How do I convert between Framer Motion and SwiftUI?
Switch between Physics and Apple mode – the values convert automatically and update live. Framer Motion uses stiffness, damping, and mass; SwiftUI uses duration and bounce. Copy the snippet in whichever format your framework needs.
Can I use this with a coding agent?
Yes. Coding agents build UI fast but tend to guess at motion. Instead of asking for “a smooth spring”, tune the feel here and paste the exact config into your prompt or code. You get consistent, intentional motion instead of a guess.