Three.js Scroll Domino Run — Edge-Pivot Chain Topple

The Three.js Scroll Domino Run snippet lines 64 dominoes along a snaking S-curve and lets scroll drive the topple front down the chain — each tile tipping about its bottom edge with a gravity-fast ease, settling into a lean against its neighbor, while a low tabletop camera chases the falling front along the spline. GSAP's ScrollTrigger scrubs the front's position; everything else is derived per frame.

The pivot is a geometry translation

A domino must rotate about its bottom-front edge — the edge it tips over in reality. Like the spine hinge in the book pages snippet, this is solved with a one-time geometry translation: geometry.translate(0, H/2, D/2) moves the box so that edge sits at the local origin, and from then on plain rotation.x *is* the topple. No pivot groups, no matrix composition — the same trick that handles doors, levers, and lids handles a falling tile.

A spline placement that snakes

The run follows a CatmullRomCurve3 through five control points, sampled at 64 even parameters with getPointAt. Each domino's yaw comes from the curve tangent via atan2(tangent.x, tangent.z), so tiles always face along the path — through both S-bends — without any manual angle bookkeeping. Re-routing the entire run means editing five control points; count, spacing, and facing all recompute. A hue ramp across the chain (magenta fading toward orange) makes the front's progress legible even in wide shots.

A topple front with per-domino windows

The scrubbed value positions an invisible *front* traveling the chain from u = 0 to u = 1. Each domino compares the front against its own path parameter: once passed, it animates through a short window (WIN = 0.055) from upright to its rest angle. The window overlap means the previous tile is still falling as the next one starts — the visual signature of a chain reaction — using the same derived-stagger arithmetic as the voxel build, but keyed to path parameter rather than index, so the front moves at constant *speed along the curve* even where control points crowd.

Two constants encode the physics feel

easeOutQuad on each tile's window mimics gravity taking over — the tip starts fast and decelerates into rest, the inverse of a thrown object. And the rest angle is π/2 × 0.82, not a full quarter turn: real toppled dominoes never lie flat, they lean on the next tile at roughly 74°. That 0.82 factor is the difference between a chain of tiles that reads as *resting on each other* and one that reads as pancaked. Tiles never intersect because neighbors farther down the chain are always at an equal or lesser angle.

A chase camera on the same spline

The camera samples the curve twice — once at the front for its look-at, once 0.12 behind for its own anchor — then offsets low and wide like a tabletop tracking shot. Because both samples derive from the same scrubbed front, the camera decelerates through bends exactly as the front does, and reversing the scroll rewinds the chase shot along with the un-toppling tiles. The DOWN counter counts tiles whose window has completed, honest-count style like the portal gate sequence. For the launch-scale version of a chain of staged events, compare the rocket launch phase table.