Three.js Scroll Pendulum Wave — GSAP Physics Scrub

The Three.js Scroll Pendulum Wave snippet recreates the famous physics demonstration — fifteen pendulums of graduated frequency swinging from one beam, drifting from a perfect traveling wave into apparent chaos and snapping back into unison — with one twist: scroll position *is* time. GSAP's ScrollTrigger scrubs a simulated-time value from 0 to 30 seconds, so users can play the demonstration forward, pause at any instant, and run physics backwards, which no video of the real apparatus can do.

The pendulum wave equation

The classic apparatus works because pendulum i completes exactly 26 + i oscillations in one shared cycle. This snippet encodes that directly: each pendulum's angular frequency is (26 + i) / 30 × 2π rad/s, and its swing angle at any instant is A × sin(ω × T). At T = 0 all fifteen are in phase; small frequency differences accumulate into traveling snakes, then two interleaved groups swinging opposite ways, then apparent randomness — and at exactly T = 30 every phase difference is a whole multiple of 2π and the line snaps back together. None of this is choreographed; it falls out of fifteen sine evaluations per frame.

Scrubbing time instead of animating it

Because the swing angle is a closed-form function of T (no integration, no accumulated state), simulated time can jump anywhere without error: scroll fast and the wave fast-forwards, stop mid-scroll and it freezes at a physically exact configuration, scroll up and entropy visibly runs backwards into order. This is the deepest version of the derive-from-one-value pattern in this series — where the gear train scrubs an angle, this scrubs the independent variable of a physics equation. Any simulation expressible in closed form gets scrub-reversibility for free.

Rotation about the pivot, not bob positioning

Each pendulum is a Group positioned at the beam with the wire and bob as children hanging below the group origin. Setting group.rotation.x swings the entire assembly about the pivot — the wire tilts and the bob traces its arc automatically through the transform hierarchy, the same scene-graph leverage used by the chips in the exploded view. Computing bob arc positions by hand would need trigonometry per frame and would leave the wire pointing the wrong way.

Emissive glow at the turning points

Real pendulum bobs seem to hang at their extremes, where velocity crosses zero. To emphasize this, each bob's emissiveIntensity scales with |angle| / A — bobs glow brightest exactly where they pause. Since neighboring pendulums reach extremes at different instants, the glow sweeps along the line as its own secondary wave, making phase relationships readable even from the front view. Bob hues sweep a blue-to-magenta HSL range so each pendulum is identifiable across camera moves.

A camera move that changes what you understand

The pendulum wave looks completely different from different angles: side-on you see the swing amplitude; front-on you see the phase pattern — the snakes and interleaving groups. The camera slides 1.2 radians from profile toward front view across the cycle, so the scroll journey doubles as a lesson in why this demonstration is filmed from the end of the beam. A small clock-driven bob keeps the shot alive during scroll pauses, consistent with the idle-motion convention across this series, like the drifting clouds of the planet approach.