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 force — higher = snappier
Friction — higher = less bounce
Inertia — higher = slower
Launch velocity at t=0
// 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.