⚡

Spring Physics Playground

Simulate real spring physics using RK4 numerical integration. Adjust stiffness, damping ratio, mass, and initial velocity to see how they affect oscillation, overshoot, and settling time. Export to Framer Motion, GSAP, or React Spring.

Spring animations feel more natural than timed easing because they simulate real physics — mass, stiffness, and damping. A damping ratio below 1 produces a bouncy overshoot; exactly 1 settles fastest without oscillating. Adjust these parameters here and export to Framer Motion or GSAP.

Designing bouncy UI micro-interactionsMatching iOS/Android spring feelFine-tuning Framer Motion spring configUnderstanding damping vs stiffness trade-offs

100% private — all processing runs in your browser. No files are uploaded to any server.

Underdamped

ζ = 0.707 — oscillates before settling

Stiffness (k)200

Spring force — higher = snappier

Damping (c)20

Friction — higher = less bounce

Mass (m)1

Inertia — higher = slower

Initial Velocity0

Launch velocity at t=0

Overshoot

4.3%

Settle Time

0.51s

ω₀ (rad/s)

14.1

ζ (ratio)

0.707

target

start

Position over time3.0s window

Velocity

Export

// Framer Motion
<motion.div
  animate={{ x: 100 }}
  transition={{
    type: "spring",
    stiffness: 200,
    damping: 20,
    mass: 1,
  }}
/>

Frequently Asked Questions

What is stiffness?

Stiffness (k) controls the spring force. Higher stiffness means the spring pulls harder toward its target, resulting in faster but potentially more oscillatory motion.

What does damping do?

Damping (c) is the friction that slows the spring down. Critical damping (ζ=1) settles the fastest without oscillation. Underdamping (ζ<1) causes bouncing; overdamping (ζ>1) is sluggish.

What is the damping ratio?

The damping ratio ζ = c / (2 * sqrt(k * m)) normalizes damping relative to stiffness and mass. Values below 1 produce oscillation; 1 is critically damped; above 1 is overdamped.

Related Tools

JSON Formatter

Format, beautify and minify JSON with syntax highlighting.

JSON Validator

Validate JSON syntax with detailed error messages and line numbers.

Base64 Encoder/Decoder

Encode and decode Base64 strings and files instantly.