Three.js Scroll Shatter & Assemble — Crystal Debris Effect

<section class="shx-stage" id="shxStage">
  <div class="shx-intro-overlay"><p>Scroll ↓ to assemble the shattered crystal</p></div>
  <canvas id="shxCanvas"></canvas>
  <div class="shx-hud"><span id="shxPct">0</span>% assembled</div>
</section>
<section class="shx-bottom"><p>Whole again.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#0a0710;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.shx-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#9b8fc4;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 24px}
.shx-stage{height:100vh;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#150e26 0%,#0a0710 75%)}
.shx-intro-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;pointer-events:none;z-index:5;color:#9b8fc4;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease;}
#shxCanvas{display:block;width:100%;height:100%}
.shx-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#c9a8ff;text-transform:uppercase;opacity:.85}

const canvas = document.getElementById('shxCanvas');
const pctEl = document.getElementById('shxPct');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, 1, 0.1, 100);
camera.position.set(0, 1.5, 11);
camera.lookAt(0, 0, 0);

// Lighting matters far more here than in a flat wireframe scene: MeshStandardMaterial
// needs real lights to read as solid glowing crystal rather than a silhouette.
scene.add(new THREE.AmbientLight(0x8866ff, 0.35));
const key = new THREE.PointLight(0x9d7bff, 3.2, 40);
key.position.set(6, 8, 8);
scene.add(key);
const rim = new THREE.PointLight(0x00e5ff, 1.6, 40);
rim.position.set(-8, -4, -6);
scene.add(rim);
const fill = new THREE.DirectionalLight(0xffffff, 0.5);
fill.position.set(-4, 6, 4);
scene.add(fill);

// Build the "assembled" reference shape by sampling faces of a big icosahedron,
// then generate one small fragment mesh per sampled face: a tetrahedron given
// a target position/rotation on the surface, and a scattered start position/
// rotation flung out into space.
const SHAPE_RADIUS = 3.2;
const FRAGMENTS = 90;
const refGeo = new THREE.IcosahedronGeometry(SHAPE_RADIUS, 1);
const refPos = refGeo.attributes.position;
const faceCount = refPos.count / 3;

const fragments = [];
const tmpA = new THREE.Vector3();
const tmpB = new THREE.Vector3();
const tmpC = new THREE.Vector3();
const up = new THREE.Vector3(0, 1, 0);

for (let f = 0; f < FRAGMENTS; f++) {
  const faceIndex = f % faceCount;
  const i0 = faceIndex * 3;
  tmpA.fromBufferAttribute(refPos, i0);
  tmpB.fromBufferAttribute(refPos, i0 + 1);
  tmpC.fromBufferAttribute(refPos, i0 + 2);
  const center = tmpA.clone().add(tmpB).add(tmpC).divideScalar(3);
  const outward = center.clone().normalize();

  const size = 0.34 + Math.random() * 0.22;
  const geo = new THREE.TetrahedronGeometry(size, 0);
  const hue = 0.68 + (center.y / SHAPE_RADIUS) * 0.12; // subtle violet-to-cyan gradient by height
  const mat = new THREE.MeshStandardMaterial({
    color: new THREE.Color().setHSL(hue, 0.6, 0.58),
    emissive: new THREE.Color().setHSL(hue, 0.8, 0.22),
    metalness: 0.55,
    roughness: 0.25,
    flatShading: true,
  });
  const mesh = new THREE.Mesh(geo, mat);

  // Target: sits just off the icosahedron surface, oriented so one face
  // roughly faces outward — good enough for a "solid crystal" read without
  // real boolean face-fitting.
  const targetPos = center.clone().addScaledVector(outward, 0.05);
  const targetQuat = new THREE.Quaternion().setFromUnitVectors(up, outward);

  // Start: flung out along the same outward direction to a random distance,
  // with a fully randomized tumble rotation.
  const flingDist = 6 + Math.random() * 10;
  const scatterOffset = new THREE.Vector3(
    (Math.random() - 0.5) * 4,
    (Math.random() - 0.5) * 4,
    (Math.random() - 0.5) * 4
  );
  const startPos = outward.clone().multiplyScalar(flingDist).add(scatterOffset);
  const startQuat = new THREE.Quaternion().setFromEuler(
    new THREE.Euler(Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2)
  );

  mesh.position.copy(startPos);
  mesh.quaternion.copy(startQuat);
  scene.add(mesh);

  fragments.push({ mesh, startPos, targetPos, startQuat, targetQuat, spin: (Math.random() - 0.5) * 0.02 });
}

const introEl = document.querySelector('.shx-intro-overlay');
gsap.registerPlugin(ScrollTrigger);

const assemble = { t: 0 };
gsap.to(assemble, {
  t: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#shxStage',
    start: 'top top',
    end: '+=450%',
    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();
}

function animate() {
  requestAnimationFrame(animate);
  if (introEl) introEl.style.opacity = (assemble.t > 0.03) ? '0' : '1';

  const t = assemble.t;
  const eased = t * t * (3 - 2 * t); // smoothstep: fragments accelerate in, then settle

  for (const frag of fragments) {
    frag.mesh.position.lerpVectors(frag.startPos, frag.targetPos, eased);
    // slerp handles the rotation lerp correctly (quaternion lerpVectors would
    // not stay normalized), so the tumble smoothly resolves into alignment.
    frag.mesh.quaternion.slerpQuaternions(frag.startQuat, frag.targetQuat, eased);
    // Residual spin fades out as the piece locks into place, selling weight.
    frag.mesh.rotateY(frag.spin * (1 - eased));
  }

  // Slowly orbit the whole assembled crystal once it's mostly together, and
  // pull the camera in slightly for a satisfying final close-up.
  scene.rotation.y += 0.0025 * eased;
  camera.position.z = 11 - eased * 2.2;
  camera.lookAt(0, 0, 0);

  pctEl.textContent = Math.round(eased * 100);
  renderer.render(scene, camera);
}

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