Three.js Scroll Black Hole — Accretion Disk Dive

<section class="bkh-stage" id="bkhStage">
  <div class="bkh-intro"><p>Scroll ↓ to fall toward the event horizon</p></div>
  <canvas id="bkhCanvas"></canvas>
  <div class="bkh-hud">TIME DILATION <span id="bkhDil">1.00</span>×</div>
</section>
<section class="bkh-bottom"><p>Past the point of no return.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#000005;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.bkh-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#77689a;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.bkh-stage{height:100vh;position:relative;overflow:hidden;background:#000005}
.bkh-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:#77689a;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease}
#bkhCanvas{display:block;width:100%;height:100%}
.bkh-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('bkhCanvas');
const dilEl = document.getElementById('bkhDil');
const introEl = document.querySelector('.bkh-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(0x000005);
const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 500);

// The hole itself: a pure black sphere — the one mesh in the scene that
// ignores all light by design.
const hole = new THREE.Mesh(
  new THREE.SphereGeometry(6, 64, 64),
  new THREE.MeshBasicMaterial({ color: 0x000000 })
);
scene.add(hole);

// Photon ring: the thin bright halo hugging the shadow.
const photonRing = new THREE.Mesh(
  new THREE.TorusGeometry(6.55, 0.16, 16, 128),
  new THREE.MeshBasicMaterial({ color: 0xfff3d0, transparent: true, opacity: 0.9 })
);
scene.add(photonRing);

function rand(seed) {
  const x = Math.sin(seed * 157.3 + 113.7) * 40853.8461;
  return x - Math.floor(x);
}

// Accretion disk: particles on Keplerian-style orbits — inner ones orbit
// much faster (ω ∝ r^-1.5), and each stores polar parameters, never
// positions, so the scrub stays exact (same stateless design as the
// tornado snippet).
const COUNT = 5200;
const diskGeo = new THREE.BufferGeometry();
const diskPos = new Float32Array(COUNT * 3);
const diskCol = new Float32Array(COUNT * 3);
diskGeo.setAttribute('position', new THREE.BufferAttribute(diskPos, 3));
diskGeo.setAttribute('color', new THREE.BufferAttribute(diskCol, 3));
const parts = [];
const hot = new THREE.Color(0xfff7e8), warm = new THREE.Color(0xffb347), cool = new THREE.Color(0xb3452a);
const cTmp = new THREE.Color();
for (let i = 0; i < COUNT; i++) {
  const r = 7.4 + Math.pow(rand(i), 1.6) * 22;
  parts.push({
    r,
    phase: rand(i + 1e5) * Math.PI * 2,
    tilt: (rand(i + 2e5) - 0.5) * 0.5,
    omega: 14 / Math.pow(r, 1.5), // Keplerian falloff
  });
  // Inner disk is white-hot, fading through orange to rust outside.
  const f = (r - 7.4) / 22;
  cTmp.copy(hot).lerp(warm, Math.min(1, f * 2)).lerp(cool, Math.max(0, f * 2 - 1));
  diskCol[i * 3] = cTmp.r; diskCol[i * 3 + 1] = cTmp.g; diskCol[i * 3 + 2] = cTmp.b;
}
const disk = new THREE.Points(diskGeo, new THREE.PointsMaterial({
  size: 0.22, vertexColors: true, transparent: true, opacity: 0.95,
  blending: THREE.AdditiveBlending, depthWrite: false,
}));
disk.rotation.x = 0.42;
scene.add(disk);

// Background stars.
const starGeo = new THREE.BufferGeometry();
const starPos = new Float32Array(1500 * 3);
for (let i = 0; i < 1500; i++) {
  const rr = 180 + rand(i + 3e5) * 250;
  const th = rand(i + 4e5) * Math.PI * 2, ph = Math.acos(2 * rand(i + 5e5) - 1);
  starPos[i * 3] = rr * Math.sin(ph) * Math.cos(th);
  starPos[i * 3 + 1] = rr * Math.cos(ph);
  starPos[i * 3 + 2] = rr * Math.sin(ph) * Math.sin(th);
}
starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
const stars = new THREE.Points(starGeo, new THREE.PointsMaterial({ color: 0xcfd6ff, size: 0.8, sizeAttenuation: true }));
scene.add(stars);

gsap.registerPlugin(ScrollTrigger);
const fall = { p: 0 };
gsap.to(fall, {
  p: 1,
  ease: 'none',
  scrollTrigger: { trigger: '#bkhStage', start: 'top top', end: '+=500%', 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 animate() {
  requestAnimationFrame(animate);
  const t = clock.getElapsedTime();
  const p = fall.p;
  if (introEl) introEl.style.opacity = p > 0.02 ? '0' : '1';

  // Approach curve: distance collapses steeply near the end — falling in
  // accelerates, unlike the braking of a planet arrival.
  const dist = 90 - 76 * Math.pow(p, 1.7);

  // "Time dilation": disk angular speed multiplies as you get closer, so
  // the same clock time sweeps particles faster — the visual metaphor for
  // an outside observer's view compressing.
  const dil = 1 + Math.pow(p, 2.4) * 11;
  const T = t * dil * 0.22;
  for (let i = 0; i < COUNT; i++) {
    const pt = parts[i];
    const a = pt.phase + T * pt.omega;
    diskPos[i * 3] = Math.cos(a) * pt.r;
    diskPos[i * 3 + 1] = Math.sin(a * 2 + pt.phase) * pt.tilt;
    diskPos[i * 3 + 2] = Math.sin(a) * pt.r;
  }
  diskGeo.attributes.position.needsUpdate = true;

  // The disk and ring tilt more edge-on as the camera dives toward the
  // orbital plane.
  disk.rotation.x = 0.42 + p * 0.5;
  photonRing.rotation.x = disk.rotation.x;
  photonRing.scale.setScalar(1 + Math.sin(t * 3) * 0.008 + p * 0.12);
  photonRing.material.opacity = 0.55 + p * 0.4;

  // FOV creep adds the stretched, pulled-in feeling near the horizon.
  camera.fov = 60 + p * 24;
  camera.updateProjectionMatrix();
  const ang = t * 0.03 + p * 1.6;
  camera.position.set(Math.sin(ang) * dist, 14 - p * 9, Math.cos(ang) * dist);
  camera.lookAt(0, 0, 0);

  // Stars slide subtly opposite the camera swing — a cheap stand-in for
  // gravitational lensing distortion.
  stars.rotation.y = -p * 0.35;
  stars.rotation.z = p * 0.18;

  dilEl.textContent = dil.toFixed(2);
  renderer.render(scene, camera);
}

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