<section class="shr-stage" id="shrStage">
  <div class="shr-intro-overlay"><p>Scroll ↓ to assemble the word</p></div>
  <canvas id="shrCanvas"></canvas>
  <div class="shr-hud"><span id="shrCount">0</span> cubes</div>
</section>
<section class="shr-bottom"><p>The letters have scattered into dust.</p></section>

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

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

const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x05050a, 0.012);
const camera = new THREE.PerspectiveCamera(55, 1, 0.1, 200);
camera.position.set(0, 0, 46);

// Sample a word onto an offscreen 2D canvas so we can turn its pixels into a
// cube grid without ever loading a three.js font JSON over the network —
// far more reliable inside a sandboxed preview than FontLoader + TextGeometry.
const WORD = 'SCROLL';
const SAMPLE_W = 220, SAMPLE_H = 60;
const sampleCanvas = document.createElement('canvas');
sampleCanvas.width = SAMPLE_W;
sampleCanvas.height = SAMPLE_H;
const sctx = sampleCanvas.getContext('2d');
sctx.fillStyle = '#000';
sctx.fillRect(0, 0, SAMPLE_W, SAMPLE_H);
sctx.fillStyle = '#fff';
sctx.font = '900 46px "Arial Black", Arial, sans-serif';
sctx.textAlign = 'center';
sctx.textBaseline = 'middle';
sctx.fillText(WORD, SAMPLE_W / 2, SAMPLE_H / 2 + 2);
const pixels = sctx.getImageData(0, 0, SAMPLE_W, SAMPLE_H).data;

// Walk the pixel grid at a stride so we land on a manageable cube count
// (a cube per pixel would be tens of thousands of instances).
const STRIDE = 3;
const targets = [];
for (let y = 0; y < SAMPLE_H; y += STRIDE) {
  for (let x = 0; x < SAMPLE_W; x += STRIDE) {
    const alpha = pixels[(y * SAMPLE_W + x) * 4 + 3];
    if (alpha > 128) {
      targets.push(new THREE.Vector3(
        (x - SAMPLE_W / 2) * 0.34,
        -(y - SAMPLE_H / 2) * 0.34,
        0
      ));
    }
  }
}
const COUNT = targets.length;
countEl.textContent = COUNT;

// A scattered start position per cube — random points in a loose sphere
// shell around the final word, so the "explosion" reads as debris flying
// away from a central point rather than a plain fade.
const scatter = targets.map(() => {
  const r = 26 + Math.random() * 40;
  const theta = Math.random() * Math.PI * 2;
  const phi = Math.acos(Math.random() * 2 - 1);
  return new THREE.Vector3(
    r * Math.sin(phi) * Math.cos(theta),
    r * Math.sin(phi) * Math.sin(theta),
    r * Math.cos(phi)
  );
});
const spins = targets.map(() => ({
  x: Math.random() * Math.PI * 4,
  y: Math.random() * Math.PI * 4,
  z: Math.random() * Math.PI * 4,
}));

const geo = new THREE.BoxGeometry(0.55, 0.55, 0.55);
const mat = new THREE.MeshStandardMaterial({
  color: 0xf472b6,
  emissive: 0xd946ef,
  emissiveIntensity: 0.55,
  metalness: 0.3,
  roughness: 0.35,
});
const mesh = new THREE.InstancedMesh(geo, mat, COUNT);
scene.add(mesh);

scene.add(new THREE.AmbientLight(0x404060, 1.2));
const key = new THREE.PointLight(0xffffff, 1.4, 200);
key.position.set(20, 20, 40);
scene.add(key);
const rim = new THREE.PointLight(0xf472b6, 1.1, 200);
rim.position.set(-30, -10, 20);
scene.add(rim);

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

// A single scrubbed progress value: 0 = fully scattered, 0.5 = word fully
// assembled and held, 1 = shattered apart again. Every cube reads this one
// number each frame, so scrolling in either direction is free.
const progress = { t: 0 };
gsap.to(progress, {
  t: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#shrStage',
    start: 'top top',
    end: '+=350%',
    scrub: 0.6,
    pin: true,
  },
});

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

function easeInOut(x) { return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2; }

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

  const t = progress.t;
  // Map the 0..1 scroll range onto a scatter -> assemble -> shatter arc,
  // with a short hold in the middle so the word is actually readable.
  let assemble;
  if (t < 0.45) assemble = easeInOut(t / 0.45);
  else if (t < 0.6) assemble = 1;
  else assemble = 1 - easeInOut((t - 0.6) / 0.4);

  for (let i = 0; i < COUNT; i++) {
    const p = scatter[i].clone().lerp(targets[i], assemble);
    dummy.position.copy(p);
    const s = spins[i];
    dummy.rotation.set(
      s.x * (1 - assemble),
      s.y * (1 - assemble),
      s.z * (1 - assemble)
    );
    const scale = 0.6 + assemble * 0.4;
    dummy.scale.setScalar(scale);
    dummy.updateMatrix();
    mesh.setMatrixAt(i, dummy.matrix);
  }
  mesh.instanceMatrix.needsUpdate = true;

  mesh.rotation.y = (1 - assemble) * 0.6;
  camera.position.z = 46 - assemble * 6;

  renderer.render(scene, camera);
}

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