Three.js Scroll Coral Reef Grow — Procedural Branching Effect

<section class="crf-stage" id="crfStage">
  <div class="crf-intro-overlay"><p>Scroll ↓ to grow a coral reef from a barren seabed</p></div>
  <canvas id="crfCanvas"></canvas>
  <div class="crf-hud"><span id="crfPct">0</span>% grown</div>
</section>
<section class="crf-bottom"><p>A dense coral reef, fully branched.</p></section>

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

const canvas = document.getElementById('crfCanvas');
const pctEl = document.getElementById('crfPct');
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.Fog(0x04263a, 10, 62);
const camera = new THREE.PerspectiveCamera(55, 1, 0.1, 200);
camera.position.set(0, 9, 22);
camera.lookAt(0, 3, 0);

scene.add(new THREE.AmbientLight(0x88aabb, 0.7));
const key = new THREE.DirectionalLight(0xfff0e0, 0.9);
key.position.set(6, 14, 8);
scene.add(key);

// Seabed: a simple dark plane the reef grows out of.
const seabed = new THREE.Mesh(
  new THREE.CircleGeometry(30, 48),
  new THREE.MeshStandardMaterial({ color: 0x08222f, roughness: 1 })
);
seabed.rotation.x = -Math.PI / 2;
scene.add(seabed);

// --- Procedural branch generation (L-system style) ---------------------
// Each branch is a straight segment from "from" to "to". Children spawn at
// the tip of a parent with a randomized spread angle and shrinking
// length/radius, recursively, until maxDepth. Every segment also carries an
// "order" (its index in generation sequence) used later to stagger growth.
const segments = [];
function grow(from, dir, length, radius, depth, maxDepth) {
  const to = from.clone().addScaledVector(dir, length);
  segments.push({ from, to, radius, depth });
  if (depth >= maxDepth) return;
  const children = depth === 0 ? 5 : (Math.random() < 0.7 ? 2 : 3);
  for (let c = 0; c < children; c++) {
    const spread = 0.45 + Math.random() * 0.55;
    const axis = new THREE.Vector3(Math.random() - 0.5, Math.random() * 0.4, Math.random() - 0.5).normalize();
    const newDir = dir.clone().applyAxisAngle(axis, spread * (Math.random() < 0.5 ? 1 : -1)).normalize();
    newDir.y = Math.max(newDir.y, 0.15); // bias upward growth
    newDir.normalize();
    grow(to.clone(), newDir, length * (0.62 + Math.random() * 0.14), radius * 0.66, depth + 1, maxDepth);
  }
}

const CLUSTERS = 6;
for (let k = 0; k < CLUSTERS; k++) {
  const angle = (k / CLUSTERS) * Math.PI * 2 + Math.random() * 0.4;
  const r = 3 + Math.random() * 9;
  const base = new THREE.Vector3(Math.cos(angle) * r, 0, Math.sin(angle) * r);
  grow(base, new THREE.Vector3(0, 1, 0), 1.6 + Math.random() * 0.8, 0.22, 0, 4);
}

const COUNT = segments.length;
const geo = new THREE.CylinderGeometry(1, 1, 1, 6, 1);
const material = new THREE.MeshStandardMaterial({ vertexColors: true, roughness: 0.55, metalness: 0.05 });
const mesh = new THREE.InstancedMesh(geo, material, COUNT);
mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
scene.add(mesh);

// Growth staggering: deeper / later segments start growing later so the
// reef visibly branches outward generation by generation rather than
// popping in all at once.
const growStart = new Float32Array(COUNT);
const growEnd = new Float32Array(COUNT);
const coralA = new THREE.Color(0xff6f61); // coral pink
const coralB = new THREE.Color(0xff9c4a); // warm orange
for (let i = 0; i < COUNT; i++) {
  const s = segments[i];
  const base = s.depth / 5;
  growStart[i] = Math.max(0, base - 0.06 + Math.random() * 0.05);
  growEnd[i] = Math.min(1, growStart[i] + 0.22 + Math.random() * 0.12);
  const c = coralA.clone().lerp(coralB, s.depth / 4);
  mesh.setColorAt(i, c);
}
mesh.instanceColor.needsUpdate = true;

const dummy = new THREE.Object3D();
const up = new THREE.Vector3(0, 1, 0);
const dirV = new THREE.Vector3();
const mid = new THREE.Vector3();

function updateGrowth(t) {
  for (let i = 0; i < COUNT; i++) {
    const s = segments[i];
    const g = Math.min(1, Math.max(0, (t - growStart[i]) / (growEnd[i] - growStart[i])));
    const eased = g * g * (3 - 2 * g);
    const len = s.from.distanceTo(s.to) * eased;
    dirV.subVectors(s.to, s.from).normalize();
    mid.copy(s.from).addScaledVector(dirV, len / 2);
    dummy.position.copy(mid);
    dummy.quaternion.setFromUnitVectors(up, dirV);
    const rad = Math.max(0.0001, s.radius);
    dummy.scale.set(rad, Math.max(0.0001, len), rad);
    dummy.updateMatrix();
    mesh.setMatrixAt(i, dummy.matrix);
  }
  mesh.instanceMatrix.needsUpdate = true;
}

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

const form = { t: 0 };
gsap.to(form, {
  t: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#crfStage',
    start: 'top top',
    end: '+=420%',
    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 = (form.t > 0.03) ? '0' : '1';
  updateGrowth(form.t);
  camera.position.set(Math.sin(form.t * 0.6) * 4, 9 - form.t * 3, 22 - form.t * 8);
  camera.lookAt(0, 3 + form.t * 2, 0);
  pctEl.textContent = Math.round(form.t * 100);
  renderer.render(scene, camera);
}

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