Three.js Scroll Prism — Spectrum Dispersion Fan

<section class="prm-stage" id="prmStage">
  <div class="prm-intro"><p>Scroll ↓ to split the light</p></div>
  <canvas id="prmCanvas"></canvas>
  <div class="prm-hud">DISPERSION <span id="prmPct">0</span>%</div>
</section>
<section class="prm-bottom"><p>White light was the whole story all along.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#050508;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.prm-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#8a8a9e;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 20px}
.prm-stage{height:100vh;position:relative;overflow:hidden;background:#050508}
.prm-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:#8a8a9e;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease}
#prmCanvas{display:block;width:100%;height:100%}
.prm-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#f9a8d4;text-transform:uppercase;opacity:.85}

const canvas = document.getElementById('prmCanvas');
const pctEl = document.getElementById('prmPct');
const introEl = document.querySelector('.prm-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(0x050508);
const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 200);

scene.add(new THREE.AmbientLight(0xffffff, 0.35));
const key = new THREE.PointLight(0xffffff, 0.8, 100);
key.position.set(-10, 14, 12);
scene.add(key);

// The prism: a triangular cross-section extruded — CylinderGeometry with
// 3 radial segments is the cheapest equilateral prism in Three.js.
const prism = new THREE.Mesh(
  new THREE.CylinderGeometry(6, 6, 7, 3, 1),
  new THREE.MeshPhysicalMaterial({
    color: 0xd8ecf5, transparent: true, opacity: 0.22, roughness: 0.02,
    metalness: 0, side: THREE.DoubleSide, depthWrite: false,
  })
);
prism.rotation.z = Math.PI / 2; // axis horizontal, triangle facing camera
scene.add(prism);
// Edge wireframe so the glass reads even at low opacity.
const prismEdges = new THREE.LineSegments(
  new THREE.EdgesGeometry(prism.geometry),
  new THREE.LineBasicMaterial({ color: 0x9fd8ee, transparent: true, opacity: 0.5 })
);
prismEdges.rotation.copy(prism.rotation);
scene.add(prismEdges);

// The incoming white beam: a thin bright box from the left edge to the
// prism face. Beams are boxes, not lines, so they can glow via scale.
function beam(color, width) {
  const m = new THREE.Mesh(
    new THREE.BoxGeometry(1, width, width),
    new THREE.MeshBasicMaterial({ color, transparent: true, opacity: 0.85, blending: THREE.AdditiveBlending, depthWrite: false })
  );
  scene.add(m);
  return m;
}
const whiteBeam = beam(0xffffff, 0.5);

// Spectrum: seven rays fanning from the prism's exit face. Each stores
// its rest hue and an exit angle that widens with dispersion.
const SPECTRUM = [0xff3b30, 0xff9500, 0xffd60a, 0x34c759, 0x30c9e8, 0x4169e1, 0x9d4edc];
const rays = SPECTRUM.map((c, i) => ({
  m: beam(c, 0.34),
  // Violet bends most: index 6 gets the widest angle.
  bend: (i - 3) * 1, // -3..3 spread factor
  i,
}));

// Dust motes so the beams have something to illuminate.
const MOTES = 300;
const moteGeo = new THREE.BufferGeometry();
const motePos = new Float32Array(MOTES * 3);
for (let i = 0; i < MOTES; i++) {
  motePos[i * 3] = (Math.random() - 0.5) * 70;
  motePos[i * 3 + 1] = (Math.random() - 0.5) * 40;
  motePos[i * 3 + 2] = (Math.random() - 0.5) * 30;
}
moteGeo.setAttribute('position', new THREE.BufferAttribute(motePos, 3));
const motes = new THREE.Points(moteGeo, new THREE.PointsMaterial({
  color: 0xbfd4e8, size: 0.09, transparent: true, opacity: 0.4, blending: THREE.AdditiveBlending, depthWrite: false,
}));
scene.add(motes);

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

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

// Position a beam box between two points by midpoint + length + yaw-roll.
const A = new THREE.Vector3(), B = new THREE.Vector3();
function layBeam(m, ax, ay, bx, by) {
  A.set(ax, ay, 0); B.set(bx, by, 0);
  const len = A.distanceTo(B);
  m.scale.x = len;
  m.position.set((ax + bx) / 2, (ay + by) / 2, 0);
  m.rotation.z = Math.atan2(by - ay, bx - ax);
}

const clock = new THREE.Clock();
function animate() {
  requestAnimationFrame(animate);
  const t = clock.getElapsedTime();
  const p = disp.p;
  if (introEl) introEl.style.opacity = p > 0.02 ? '0' : '1';

  // Phase 1 (0–0.3): the white beam extends from off-screen to the prism.
  // Phase 2 (0.3–1): dispersion — the fan opens and the prism rotates.
  const reach = Math.min(1, p / 0.3);
  const fan = Math.max(0, (p - 0.3) / 0.7);
  const fanE = fan * fan * (3 - 2 * fan);

  // The beam grows from off-screen left toward the entry point on the
  // prism's left face as reach goes 0 → 1.
  const IN_X = -6 * 0.55, IN_Y = 2.2;
  layBeam(whiteBeam, -46, 8, -46 + reach * (46 + IN_X), 8 + reach * (IN_Y - 8));
  whiteBeam.material.opacity = 0.25 + reach * 0.6;
  // White beam thins as its energy transfers into the spectrum.
  whiteBeam.scale.y = whiteBeam.scale.z = 1 - fanE * 0.55;

  // Spectrum rays exit from the right face, fanning by dispersion. Length
  // also grows with fan so colors shoot to the edge of frame.
  const EXIT_X = 6 * 0.55, EXIT_Y = 0.4;
  rays.forEach((r) => {
    const angle = -0.12 - r.bend * 0.085 * fanE;
    const len = 4 + fanE * 46;
    const ex = EXIT_X + Math.cos(angle) * len;
    const ey = EXIT_Y + Math.sin(angle) * len;
    layBeam(r.m, EXIT_X, EXIT_Y, ex, ey);
    r.m.material.opacity = fanE * 0.9;
    // Rays shimmer independently so the fan feels lit, not painted.
    r.m.scale.y = r.m.scale.z = 1 + Math.sin(t * 3 + r.i) * 0.18;
  });

  // The prism rotates slowly with dispersion — the "cause" of the split —
  // plus a gentle idle wobble.
  prism.rotation.y = fanE * 0.5 + Math.sin(t * 0.4) * 0.05;
  prismEdges.rotation.y = prism.rotation.y;
  prism.material.opacity = 0.16 + fanE * 0.14;

  // Camera swings from edge-on (beam view) toward front (fan view).
  const ang = -0.9 + p * 1.1;
  camera.position.set(Math.sin(ang) * 34, 4 + Math.sin(t * 0.3) * 0.5, Math.cos(ang) * 34);
  camera.lookAt(2, 2, 0);

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

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