Three.js Scroll Rubik’s Cube Assembly — GSAP Scrub

The Three.js Scroll Rubik’s Cube Assembly snippet scatters 27 colored cubelets across a wide spherical cloud and lets scroll pull them into a solved 3×3×3 Rubik’s cube, finishing with a turntable presentation spin — all scrubbed through one GSAP ScrollTrigger value with a hand-rolled, fully reversible stagger. It shares DNA with the particle assembly snippet but works at mesh scale: 27 solid boxes with per-face materials rather than thousands of points, which makes material choices and stagger design the interesting problems.

Per-face materials so the interior reads as plastic

A real Rubik’s cube only shows color on outward faces; the interior is black plastic. Each BoxGeometry cubelet receives an array of six materials, and a face gets its classic color only when the cubelet sits on that face of the 3×3×3 grid (x === 1 gets red, y === 1 gets white, and so on) — every other side shares one dark material instance. This matters mid-flight: as scattered cubelets tumble toward home you see their dark interior sides, and when the cube closes up, the thin dark gaps between stickers appear automatically, with no texture work.

Deterministic scatter from a seeded hash

Scatter positions come from a tiny sin-hash function (Math.sin(seed × 127.1 + 311.7) × 43758.5453, take the fraction) instead of Math.random(). Each cubelet derives its scatter direction, radius, and tumble spin from its index, so the cloud is identical on every page load. That determinism is what keeps the scrub honest: scroll down, up, and down again and every cubelet retraces exactly the same flight path, something unseeded randomness regenerated on any rebuild would silently break.

A hand-rolled stagger that scrubs in both directions

GSAP timelines offer stagger, but this snippet computes stagger manually so everything stays a pure function of one scrubbed value: each cubelet's local progress is (build − delay) / (1 − 0.35) clamped to 0–1 and shaped by an ease-out cubic, where delay is proportional to the cubelet's distance from the cube center. The result is a cube that grows from its core outward — the center cubelet snaps in first, corners arrive last — and reverses into an outward explosion when scrolling up. Position uses lerpVectors(scatter, home, lp) while rotation multiplies the tumble spin by (1 − lp), so every cubelet lands at exactly zero rotation.

A phase split: 80% build, 20% presentation

The scrubbed progress is split into two windows, the same pattern as the staging in product stages: the first 80% drives assembly, the final 20% drives a full 360° turntable rotation plus a 5-unit camera dolly-in. Because present is derived (not a separate tween), the handoff point cannot drift, and reversing through it un-spins the cube before disassembling it.

A live percentage from arrival counting

The HUD counts cubelets whose local progress exceeds 0.985 and shows the fraction as a percentage. Counting arrivals rather than echoing raw scroll progress makes the number honest — it sits at 0% while everything is still tumbling, climbs as pieces click in center-out, and reaches 100% just as the presentation spin begins, giving the user a satisfying sense of completion mechanics similar to the gate counter in the portal gate sequence.