Three.js Scroll Kaleidoscope Mandala — Radial Instanced Bloom

<section class="kdm-stage" id="kdmStage">
  <div class="kdm-intro-overlay"><p>Scroll ↓ to bloom the mandala into full symmetry</p></div>
  <canvas id="kdmCanvas"></canvas>
  <div class="kdm-hud"><span id="kdmPct">0</span>% bloomed</div>
</section>
<section class="kdm-bottom"><p>A fully bloomed, radially symmetric mandala.</p></section>

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

const canvas = document.getElementById('kdmCanvas');
const pctEl = document.getElementById('kdmPct');
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(50, 1, 0.1, 200);
camera.position.set(0, 0, 26);
camera.lookAt(0, 0, 0);
scene.add(new THREE.AmbientLight(0x442255, 1.1));
const light1 = new THREE.PointLight(0xff6ec7, 1.6, 100);
light1.position.set(10, 10, 18);
scene.add(light1);
const light2 = new THREE.PointLight(0x6ecfff, 1.2, 100);
light2.position.set(-12, -8, 14);
scene.add(light2);

// A mandala is built from SEGMENTS radial mirrors, each containing RINGS rows
// of shapes. Every shape instance starts collapsed at the center with zero
// scale and blooms outward to its ring radius, rotating as it grows.
// Rings are grouped into three color tiers, each its own InstancedMesh with a
// solid-color material - this keeps the whole mandala at exactly three draw
// calls without depending on per-instance instanced vertex colors.
const SEGMENTS = 10;
const RINGS = 5;
const PER_RING = 4;
const geo = new THREE.OctahedronGeometry(0.55, 0);

const tierDefs = [
  { rings: [0, 1], color: 0xff6ec7, emissive: 0x330f22 },
  { rings: [2], color: 0x6ecfff, emissive: 0x0f2733 },
  { rings: [3, 4], color: 0xffe08a, emissive: 0x33280f },
];

const tiers = tierDefs.map((def) => {
  const count = SEGMENTS * def.rings.length * PER_RING;
  const mat = new THREE.MeshStandardMaterial({ color: def.color, emissive: def.emissive, roughness: 0.35, metalness: 0.5 });
  const mesh = new THREE.InstancedMesh(geo, mat, count);
  scene.add(mesh);
  return {
    mesh,
    count,
    ringSet: def.rings,
    targetAngle: new Float32Array(count),
    targetRadius: new Float32Array(count),
    spinSpeed: new Float32Array(count),
    spinOffset: new Float32Array(count),
    ringIndexArr: new Float32Array(count),
  };
});

for (const tier of tiers) {
  let idx = 0;
  for (let seg = 0; seg < SEGMENTS; seg++) {
    const baseAngle = (seg / SEGMENTS) * Math.PI * 2;
    for (let ri = 0; ri < tier.ringSet.length; ri++) {
      const r = tier.ringSet[ri];
      const ringT = r / (RINGS - 1);
      for (let p = 0; p < PER_RING; p++) {
        const microAngle = baseAngle + (p / PER_RING) * (Math.PI * 2 / SEGMENTS) * 0.7;
        tier.targetAngle[idx] = microAngle;
        tier.targetRadius[idx] = 1.6 + ringT * 9.5;
        tier.spinSpeed[idx] = 0.4 + Math.random() * 0.6;
        tier.spinOffset[idx] = Math.random() * Math.PI * 2;
        tier.ringIndexArr[idx] = ringT;
        idx++;
      }
    }
  }
}

const dummy = new THREE.Object3D();
const introEl = document.querySelector('.kdm-intro-overlay');
gsap.registerPlugin(ScrollTrigger);

const form = { t: 0 };
gsap.to(form, {
  t: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#kdmStage',
    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();
}

let globalSpin = 0;
let clock = 0;

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

  const t = form.t;
  const eased = t * t * (3 - 2 * t);
  clock += 0.016;

  for (const tier of tiers) {
    for (let i = 0; i < tier.count; i++) {
      const radius = tier.targetRadius[i] * eased;
      const angle = tier.targetAngle[i] + globalSpin * (0.3 + tier.ringIndexArr[i] * 0.4);
      const x = Math.cos(angle) * radius;
      const y = Math.sin(angle) * radius;
      const scale = 0.15 + eased * 0.85;

      dummy.position.set(x, y, Math.sin(clock * 0.5 + tier.spinOffset[i]) * 0.6 * eased);
      dummy.rotation.set(clock * tier.spinSpeed[i] * 0.5, clock * tier.spinSpeed[i], tier.spinOffset[i]);
      dummy.scale.setScalar(scale);
      dummy.updateMatrix();
      tier.mesh.setMatrixAt(i, dummy.matrix);
    }
    tier.mesh.instanceMatrix.needsUpdate = true;
  }

  globalSpin += 0.0012 * (0.3 + eased);
  for (const tier of tiers) tier.mesh.rotation.z = globalSpin * 0.15;

  const camDist = 26 - eased * 8;
  camera.position.set(0, 0, camDist);
  camera.lookAt(0, 0, 0);

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

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