Three.js Scroll Voxel Tower Build — GSAP Block Drop

The Three.js Scroll Voxel Tower Build snippet drops a few hundred voxel blocks out of the sky, one after another, assembling a tapering tower with setbacks, a spire, and side wings as the user scrolls — each block popping in with an easeOutBack overshoot while a crane-style camera tracks the rising build front. GSAP's ScrollTrigger scrubs one progress value; every block simply owns a slice of it.

A voxel plan, not hardcoded geometry

The tower is described as data before any mesh exists: a ring() helper pushes hollow square courses of grid coordinates into a plan array, called with shrinking half-widths (4, then 3, then 2) to produce classic skyscraper setbacks, topped by a four-block spire and flanked by two small wings. Because the plan is plain coordinates, swapping in any other voxel shape — a logo, a character, letters — means replacing the plan-building loop and nothing else. The hollow-ring optimization also matters: interior blocks that would never be visible are simply never created, keeping the mesh count to the visible shell.

Per-block scroll slices instead of tweens

With hundreds of blocks, creating one GSAP tween per block would work but allocates hundreds of tween objects for what is pure arithmetic. Instead, block i maps its local progress from the global value as (p − start) / win, where start distributes blocks evenly across the scroll and win is sized so roughly fourteen blocks are airborne at any moment. This is the same slice pattern that drives the domino run and the peel in the exploded view — a stagger that is a pure function of one scrubbed number, hence perfectly reversible.

Mason-order shuffling within each course

Blocks sort bottom-up by level, but within a level they shuffle using a seeded sin-hash — the same deterministic randomness technique as the Rubik's cube assembly. Without the shuffle, each course would sweep in reading order like a printer; with it, blocks land scattered around the ring like a mason laying bricks, while determinism keeps every scroll-up/scroll-down cycle identical.

easeOutBack landings and scale pop-in

Each falling block interpolates from a randomized drop height down to its slot through easeOutBack, whose characteristic overshoot dips the block a hair below its rest position and settles it back up — reading as a bounce without running any physics. Simultaneously the block's scale ramps from near-zero over the first third of its slice, hiding the visual pop of a box appearing mid-air. Blocks outside their slice sit at scale 0.001 rather than visible = false, so toggling requires no scene-graph churn.

A crane camera that tracks the build front

The camera height and look-at target both derive from p × maxLevel, so the view cranes upward exactly as fast as the tower tops out, while a slow clock-driven orbit plus a scroll-linked 1.4-radian swing keeps the silhouette rotating through profile views. Fog matched to the background swallows the ground plate edges, focusing attention on the build. The HUD counts blocks whose slice has completed — the same honest arrival counting used by the portal gate sequence — so the number reflects blocks actually landed, not raw scroll percentage.