Three.js Scroll Bridge Build — Planks Assemble Ahead

The Three.js Scroll Bridge Build Crossing snippet puts the camera in first person at the edge of a canyon and lets scroll walk it across — with the catch that the rope bridge does not exist yet: planks fly up from the depths and twist into place just ahead of each footstep, rope rails zipping along behind them, so the walker is perpetually a few steps from the void. GSAP's ScrollTrigger scrubs the crossing; a build frontier that *leads* the camera turns one value into both journey and construction.

The frontier leads the walker

Two derived positions move across the span: the camera at raw progress p, and the build frontier at p × (1 + LEAD) with LEAD = 0.16. Because the frontier multiplier exceeds one, construction stays ahead of the walker — about seven planks of safety margin at mid-span — and both positions finish together at the far cliff. Each plank compares the frontier against its own span parameter through a short window, the parameter-keyed stagger pattern from the domino run, but here the front *creates* rather than destroys.

Planks arrive with story

A plank's local progress drives an easeOutCubic flight from 26 units below and 14 units ahead, untwisting from a seeded random spin as it rises — so each board visibly *arrives from somewhere* rather than fading in. The seeded hash (shared across this series since the Rubik's cube assembly) keeps every plank's tumble identical across reloads and reversals. Rope rail segments scale up along their length (scale.y from 0 to 1) slightly behind the planks they connect, reading as rope being pulled taut segment by segment.

A catenary from one sine

Real rope bridges sag. Every plank's rest height is sin(u × π) × −2.4 — a half-sine dip that approximates a catenary closely enough at this scale — and the rope segments inherit the sag by connecting neighboring plank positions with per-segment rotation from atan2. Crucially, the walker camera's height follows the same sag function evaluated at its own position, so descending into the dip and climbing out of it is *felt* in first person, not just seen.

A footstep bob sells first person

The camera's Y adds |sin(p × 60)| × 0.35 — the absolute-value sine that mimics the rise-fall-rise of walking gait, keyed to scroll so steps only happen while moving. The look-at aims 16 units ahead at the arrival zone where planks are flying in (the natural place a person crossing a half-built bridge would stare), then lifts toward the far side as the crossing completes. Canyon walls are displaced-vertex boxes with computeVertexNormals for jagged cliff shading, and a river plane 58 units below plus matched fog supply the vertigo.

One value, two motions, honest reversal

Scrolling backwards is the full effect in reverse: the walker retreats while planks *behind* the frontier tumble back into the depths and rope segments unzip — the bridge unbuilds itself in your wake. Nothing fires or toggles; walker, frontier, plank flights, rope scales, sag, bob, and the SPAN HUD all derive from one scrubbed number. For the sibling that builds a structure while orbiting it rather than crossing it, see the voxel build; for another first-person scrubbed traversal, the staircase climb.