Three.js Scroll Gear Train — GSAP Mechanical Ratios

The Three.js Scroll Gear Train Mechanism snippet builds five interlocking brass gears procedurally — disc, teeth, hub, and spoke cutouts — and lets scroll act as the crank: GSAP's ScrollTrigger scrubs the driver gear's angle, and every downstream gear derives its rotation through the real tooth-count ratios, counter-rotating at each mesh point exactly as physical gears would. The scene reads as a machine because the math underneath is the machine's math.

Procedural gears from primitives

Each gear is a Group: a CylinderGeometry disc rotated flat, N tooth boxes placed around the rim at (cos a, sin a) × (r + 0.1r) with each tooth rotated a + π/2 to point radially outward, a smaller dark hub cylinder, and four dark wedge boxes that fake spoke cutouts on the face. Building gears in code rather than loading a model means tooth count is a real parameter — and tooth count is exactly what the animation math needs. Tooth width derives from circumference, (2πr / teeth) × 0.45, so any radius/teeth combination produces a plausible gear with correct-looking pitch.

Real gear ratios, not decorative spinning

Most gear animations on the web rotate everything at arbitrary speeds and hope nobody looks closely. Here each gear's angle is computed by chaining angle × (teethPrev / teethCurrent) down the train while flipping direction at every mesh — the actual kinematics of spur gears. The 24-tooth driver turning twice (4π across the scroll) spins the 10-tooth fourth gear nearly five times in the opposite direction. Because ratios are exact and both gears in each pair carry a half-tooth phase offset (π / teeth on alternating gears), teeth visibly interleave through the mesh point instead of clipping through each other — the detail that sells the whole illusion.

Scroll as the crank handle

The single scrubbed value here is not an abstract progress fraction but the driver's angle itself, tweened from 0 to 4π with ease: 'none'. That framing matters: scrolling *is* cranking, at a fixed mechanical advantage, and scrolling backwards runs the machine in reverse — which is free, since every gear's angle is a pure function of the driver's. The HUD converts the same value to degrees, so users see DRIVE 720° at full scroll. This is the purest expression of the derive-everything pattern used across this series, from the portal gate sequence to the Rubik's cube assembly.

A dolly that follows power through the train

The camera starts on the big slow driver and dollies rightward along the zigzagging train as the drive angle accrues, ending close on the smallest, fastest gear — following the power flow, like a documentary camera would. Position and look-at both derive from normalized drive progress, with a small clock-time bob so the shot never feels locked off. Warm directional and amber point lights against high-metalness, mid-roughness MeshStandardMaterial give the brass look; fog matched to the dark background swallows the train's far end.

Where to take it

Because ratios are parameter-driven, the train doubles as a live mechanism diagram: change any teeth value and both the geometry and the motion update coherently. Add a chain of number counters geared to each wheel for an odometer effect, or pair it with the clockwork feel of scroll timeline dots for process storytelling. For a more organic machine aesthetic, the fabric ripple snippet shows the same scrub philosophy applied to soft surfaces instead of rigid bodies.