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

<section class="rbx-stage" id="rbxStage">
  <div class="rbx-intro"><p>Scroll ↓ to assemble the cube</p></div>
  <canvas id="rbxCanvas"></canvas>
  <div class="rbx-hud"><span id="rbxPct">0</span>% ASSEMBLED</div>
</section>
<section class="rbx-bottom"><p>Solved.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#0b0b12;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.rbx-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#8b8ba3;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.rbx-stage{height:100vh;position:relative;overflow:hidden;background:#0b0b12}
.rbx-intro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;pointer-events:none;z-index:5;color:#8b8ba3;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease}
#rbxCanvas{display:block;width:100%;height:100%}
.rbx-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#fbbf24;text-transform:uppercase;opacity:.85}

const canvas = document.getElementById('rbxCanvas');
const pctEl = document.getElementById('rbxPct');
const introEl = document.querySelector('.rbx-intro');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0b0b12);
const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 200);

scene.add(new THREE.AmbientLight(0xffffff, 0.65));
const key = new THREE.DirectionalLight(0xffffff, 0.9);
key.position.set(8, 12, 10);
scene.add(key);

// Classic face colors. Each cubelet gets 6 materials; interior faces stay
// dark plastic so gaps between cubelets read correctly mid-flight.
const FACE = {
  px: 0xdc2626, nx: 0xf97316, py: 0xfafafa, ny: 0xfbbf24, pz: 0x16a34a, nz: 0x2563eb,
};
const DARK = new THREE.MeshLambertMaterial({ color: 0x18181f });
const SIZE = 1.9, GAP = 0.12, STEP = SIZE + GAP;
const cubelets = [];
const group = new THREE.Group();
scene.add(group);

// Deterministic pseudo-random scatter so every page load (and every scroll
// back up) produces the identical cloud — Math.random would break scrub
// reversibility across reloads but, more importantly, per-cubelet phase
// offsets below must be stable.
function rand(seed) {
  const x = Math.sin(seed * 127.1 + 311.7) * 43758.5453;
  return x - Math.floor(x);
}

let idx = 0;
for (let x = -1; x <= 1; x++) for (let y = -1; y <= 1; y++) for (let z = -1; z <= 1; z++) {
  const mats = [
    x === 1 ? new THREE.MeshLambertMaterial({ color: FACE.px }) : DARK,
    x === -1 ? new THREE.MeshLambertMaterial({ color: FACE.nx }) : DARK,
    y === 1 ? new THREE.MeshLambertMaterial({ color: FACE.py }) : DARK,
    y === -1 ? new THREE.MeshLambertMaterial({ color: FACE.ny }) : DARK,
    z === 1 ? new THREE.MeshLambertMaterial({ color: FACE.pz }) : DARK,
    z === -1 ? new THREE.MeshLambertMaterial({ color: FACE.nz }) : DARK,
  ];
  const m = new THREE.Mesh(new THREE.BoxGeometry(SIZE, SIZE, SIZE), mats);
  const home = new THREE.Vector3(x * STEP, y * STEP, z * STEP);
  const theta = rand(idx) * Math.PI * 2, phi = Math.acos(2 * rand(idx + 100) - 1);
  const r = 16 + rand(idx + 200) * 18;
  const scatter = new THREE.Vector3(
    r * Math.sin(phi) * Math.cos(theta),
    r * Math.cos(phi),
    r * Math.sin(phi) * Math.sin(theta)
  );
  const spin = new THREE.Vector3(rand(idx + 300) * 6, rand(idx + 400) * 6, rand(idx + 500) * 6);
  group.add(m);
  // Stagger: outer cubelets arrive later than the core, so the cube grows
  // from its center outward.
  const delay = home.length() / (STEP * Math.sqrt(3)) * 0.35;
  cubelets.push({ m, home, scatter, spin, delay });
  idx++;
}

gsap.registerPlugin(ScrollTrigger);
const asm = { p: 0 };
gsap.to(asm, {
  p: 1,
  ease: 'none',
  scrollTrigger: { trigger: '#rbxStage', start: 'top top', end: '+=400%', scrub: 0.6, pin: true },
});

function resize() {
  const w = canvas.clientWidth, h = canvas.clientHeight;
  renderer.setSize(w, h, false);
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}

const clock = new THREE.Clock();
function easeOutCubic(x) { return 1 - Math.pow(1 - x, 3); }

function animate() {
  requestAnimationFrame(animate);
  const t = clock.getElapsedTime();
  const p = asm.p;
  if (introEl) introEl.style.opacity = p > 0.03 ? '0' : '1';

  // First 80% of the scroll assembles the cube; the last 20% presents it
  // with a full turntable rotation.
  const build = Math.min(1, p / 0.8);
  const present = Math.max(0, (p - 0.8) / 0.2);

  let arrived = 0;
  cubelets.forEach((c) => {
    // Each cubelet's local progress is the global build progress shifted by
    // its stagger delay, then eased — a hand-rolled stagger that stays
    // perfectly scrubbable in both directions.
    const lp = easeOutCubic(Math.min(1, Math.max(0, (build - c.delay) / (1 - 0.35))));
    c.m.position.lerpVectors(c.scatter, c.home, lp);
    c.m.rotation.set(c.spin.x * (1 - lp), c.spin.y * (1 - lp), c.spin.z * (1 - lp));
    if (lp > 0.985) arrived++;
  });

  group.rotation.y = 0.4 + t * 0.08 + present * Math.PI * 2;
  group.rotation.x = 0.28 + Math.sin(t * 0.4) * 0.04 - present * 0.1;

  const dist = 26 - present * 5;
  camera.position.set(0, 3, dist);
  camera.lookAt(0, 0, 0);

  pctEl.textContent = Math.round((arrived / cubelets.length) * 100);
  renderer.render(scene, camera);
}

resize();
window.addEventListener('resize', resize);
animate();