Fix Your Timestep: JS Animation Loop Simulator

Three Animation Loops

Naive variable dt — y += v*dt every frame, no guard Clamped variable dt — dt capped, still one step/frame Fixed-timestep accumulator — the correct pattern

Simulated Frame Conditions

Frame jitter (dropped-frame severity) 35%

Simulated FPS cap 60 fps

Gravity g 9.8 m/s²

Restitution e (bounciness) 0.80

Live Readouts

Frame dt (jittered)0 ms

Naive energy error0.0%

Clamped energy error0.0%

Sub-steps this frame0

How it works

Every browser animation runs on requestAnimationFrame, which hands you the time elapsed since the last frame (dt) — but real dt is never constant: garbage collection, layout thrash, background tabs and slow devices all produce dropped or delayed frames. How your loop turns that jittery dt into motion decides whether physics stays correct.

// 1) NAIVE — breaks under jitter
v -= g*dt; y += v*dt;           // one lag spike = a huge dt = a huge jump

// 2) CLAMPED — safer, but drifts in slow motion
dt = min(dt, dtMax); v -= g*dt; y += v*dt;   // sustained low fps = the
                                              // whole simulation runs slow

// 3) FIXED-TIMESTEP ACCUMULATOR — the correct pattern
accumulator += dt;
while (accumulator >= FIXED_DT) {
  v -= g*FIXED_DT; y += v*FIXED_DT;
  accumulator -= FIXED_DT;
}
render(lerp(previous, current, accumulator / FIXED_DT));

All three balls receive the exact same jittered dt stream this frame — only the integration strategy differs. Each bounce reflects velocity by v → −e·v (restitution e), so total mechanical energy E = ½v² + g·y should decay by a predictable factor every bounce. The naive ball's energy visibly spikes upward on a lag burst (a big dt makes gravity over-accelerate it before the next floor check); the clamped ball avoids blow-ups but loses real time whenever dt is clamped, so it drifts behind; the fixed-timestep ball keeps stepping physics in small, constant increments no matter how the real frames arrive, so its energy tracks the analytic decay curve regardless of jitter or FPS cap.

This is exactly the failure mode described in Glenn Fiedler's classic "Fix Your Timestep!" — the reason every serious game engine and physics-based UI library (Framer Motion, react-spring, Rive) decouples simulation stepping from render timing.

⚠ Couldn't load the 3D engineThree.js failed to load from the CDN. Check your connection and reload.