Spring Physics — React Deep Dive

duration + easing → physics

A tween moves a value from A to B over a fixed duration along an easing curve. A spring has no duration — it simulates a mass on a spring. Each frame the solver computes the restoring force from Hooke's law plus a damper, integrates, and repeats until the system settles. Because it carries velocity, a spring overshoots, settles naturally, and survives interruptions (a new target just re-aims the same moving mass).

F = -k·x - c·v        (Hooke's law + damping force)

  k = stiffness   (spring strength — pull back toward target)
  x = displacement (position - target)
  c = damping     (friction — bleeds energy each frame)
  v = velocity

acceleration = F / mass
velocity    += acceleration · dt     // semi-implicit Euler (stable)
position    += velocity    · dt
repeat until |v| ≈ 0 AND |position - target| ≈ 0

parameter	unit	raise it →	effect
`stiffness` (k)	N/m	stronger pull	faster, snappier, more oscillation
`damping` (c)	N·s/m	more friction	less overshoot, settles sooner (c critical = no bounce)
`mass` (m)	kg	heavier object	slower acceleration, sluggish feel

1 · the spring solver you write (edit me)

function SpringDemo() {
  var [target, setTarget] = React.useState(50);
  var [stiffness, setStiffness] = React.useState(100);
  var [damping, setDamping] = React.useState(12);
  var posRef = React.useRef(50);   // animated position (NOT state — no re-render)
  var velRef = React.useRef(0);    // animated velocity
  var ballRef = React.useRef(null);
  var rafRef = React.useRef(null);

  // Spring simulation loop — re-runs whenever the target or tuning changes.
  React.useEffect(function () {
    var mass = 1;
    var dt = 0.016; // ~60fps

    function step() {
      var pos = posRef.current;
      var vel = velRef.current;
      // F = -k*x - c*v  (Hooke's law + damping)
      var force = -stiffness * (pos - target) - damping * vel;
      var acc = force / mass;
      vel += acc * dt;      // semi-implicit Euler = stable for springs
      pos += vel * dt;
      posRef.current = pos;
      velRef.current = vel;
      if (ballRef.current) ballRef.current.style.left = pos + '%';
      // Continue only while the spring still has energy.
      if (Math.abs(vel) > 0.01 || Math.abs(pos - target) > 0.01) {
        rafRef.current = requestAnimationFrame(step);
      }
    }

    if (ballRef.current) ballRef.current.style.left = posRef.current + '%';
    rafRef.current = requestAnimationFrame(step);
    return function () { if (rafRef.current) cancelAnimationFrame(rafRef.current); };
  }, [target, stiffness, damping]);

  function applyPreset(s, d) { setStiffness(s); setDamping(d); }

  function onTrackClick(e) {
    var rect = e.currentTarget.getBoundingClientRect();
    var pct = ((e.clientX - rect.left) / rect.width) * 100;
    setTarget(Math.max(0, Math.min(100, pct)));
  }

  var presets = [
    { name: 'Gentle', s: 100, d: 12 },
    { name: 'Wobbly', s: 180, d: 12 },
    { name: 'Stiff',  s: 210, d: 20 },
    { name: 'Slow',   s: 280, d: 60 }
  ];

  return (
    <div className="max-w-xl mx-auto p-5 bg-[#161b22] rounded-xl border border-[#30363d]">
      <h2 className="text-lg font-bold text-[#61dafb] mb-1">Spring Playground</h2>
      <p className="text-xs text-[#8b949e] mb-4">
        F = -stiffness·(pos - target) - damping·vel · click the track or a preset
      </p>

      <div
        data-testid="track"
        onClick={onTrackClick}
        className="relative h-16 bg-[#0d1117] border border-[#30363d] rounded-lg cursor-crosshair overflow-hidden"
      >
        <div
          data-testid="target"
          style={{ left: target + '%' }}
          className="absolute top-0 bottom-0 w-0.5 bg-[#e74c3c] opacity-70"
        />
        <div
          data-testid="ball"
          ref={ballRef}
          className="absolute top-1/2 -translate-y-1/2 -ml-3 w-6 h-6 rounded-full bg-[#61dafb]"
        />
      </div>

      <div className="flex justify-between text-xs text-[#8b949e] mt-1">
        <span>0%</span>
        <span>target: <span data-testid="target-read" className="text-[#e74c3c]">{Math.round(target)}%</span></span>
        <span>100%</span>
      </div>

      <div className="mt-4 space-y-3">
        <label className="block">
          <div className="flex justify-between text-xs text-[#8b949e] mb-1">
            <span>stiffness (k)</span>
            <span className="text-[#61dafb]">{stiffness}</span>
          </div>
          <input
            data-testid="stiffness"
            type="range" min="10" max="500" value={stiffness}
            onChange={function (e) { setStiffness(Number(e.target.value)); }}
            className="w-full accent-[#61dafb]"
          />
        </label>
        <label className="block">
          <div className="flex justify-between text-xs text-[#8b949e] mb-1">
            <span>damping (c)</span>
            <span className="text-[#61dafb]">{damping}</span>
          </div>
          <input
            data-testid="damping"
            type="range" min="1" max="100" value={damping}
            onChange={function (e) { setDamping(Number(e.target.value)); }}
            className="w-full accent-[#61dafb]"
          />
        </label>
      </div>

      <div className="mt-4 flex flex-wrap items-center gap-2">
        {presets.map(function (p) {
          return (
            <button
              key={p.name}
              data-testid="preset"
              onClick={function () { applyPreset(p.s, p.d); }}
              className="px-3 py-1.5 text-xs font-bold rounded border border-[#30363d] text-[#e6edf3] hover:border-[#61dafb] hover:text-[#61dafb]"
            >
              {p.name}
            </button>
          );
        })}
        <button
          data-testid="set80"
          onClick={function () { setTarget(80); }}
          className="px-3 py-1.5 text-xs font-bold rounded bg-[#61dafb] text-[#0d1117] ml-auto"
        >
          Set Target: 80%
        </button>
      </div>
    </div>
  );
}

createRoot(document.getElementById('root')).render(<SpringDemo/>);

2 · Babel compiles JSX → element tree

<SpringDemo/> becomes React.createElement(SpringDemo). The effect's step() loop mutates the ball via ballRef — no React re-render per frame, so 60fps stays cheap.

// (hit "compile & render" to see Babel's output)

3 · live React (the solver, proven)

Drag the sliders, click a preset, or click anywhere on the track to re-aim the target. The gold-check does this automatically: it asserts the ball starts at ~50%, clicks Set Target: 80%, waits for the spring to settle, then asserts the ball landed near 80% — proving F = -kx - cv drives real motion.

ball pos: — · gold: start ~50% → click 80% → settle near 80% (moved > 20%)

spring vs tween · presets

intent	spring	tween (duration + easing)
model	physics: `F = -kx - cv`	time-mapped curve (linear/ease-out/cubic-bezier)
duration	emergent — settles when `\|v\| ≈ 0`	fixed (`300ms`)
interruption	keeps velocity → smooth re-aim	restarts from a new curve (can jump)
overshoot	physical (underdamped only)	only if easing allows
best for	gestures, drag, swipe, UI	choreographed sequences, loops

preset	stiffness	damping	feel
`Gentle`	100	12	soft, natural (≈ Framer default)
`Wobbly`	180	12	playful bounce
`Stiff`	210	20	snappy
`Slow`	280	60	heavy, slow
`Molasses`	280	120	very slow, no overshoot