Three.js Scroll Jellyfish Drift — Bioluminescent Underwater Effect

<section class="jel-stage" id="jelStage">
  <div class="jel-intro-overlay"><p>Scroll ↓ to drift jellyfish upward through deep water</p></div>
  <canvas id="jelCanvas"></canvas>
  <div class="jel-hud"><span id="jelPct">0</span>% ascended</div>
</section>
<section class="jel-bottom"><p>Bioluminescent drifters, nearing the light.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#020a1a;color:#dff3ff;font-family:system-ui,-apple-system,sans-serif}
.jel-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#3f7fb0;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 24px}
.jel-stage{height:100vh;position:relative;overflow:hidden;background:linear-gradient(180deg,#03142e 0%,#010712 85%)}
.jel-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:#8fd8ff;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease;text-shadow:0 0 10px rgba(143,216,255,.4)}
#jelCanvas{display:block;width:100%;height:100%}
.jel-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#8fd8ff;text-transform:uppercase;opacity:.85}

const canvas = document.getElementById('jelCanvas');
const pctEl = document.getElementById('jelPct');
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(0x020a1a, 8, 55);
const camera = new THREE.PerspectiveCamera(55, 1, 0.1, 200);
camera.position.set(0, 0, 22);
camera.lookAt(0, 4, 0);

scene.add(new THREE.AmbientLight(0x224466, 0.8));
const rim = new THREE.DirectionalLight(0x8fd8ff, 0.5);
rim.position.set(4, 20, 10);
scene.add(rim);

// Light shafts: additive-blended cones fanning down from above, subtly
// swaying. Purely decorative, no interaction with the jellyfish.
const rayGroup = new THREE.Group();
for (let i = 0; i < 4; i++) {
  const ray = new THREE.Mesh(
    new THREE.ConeGeometry(3.2, 34, 12, 1, true),
    new THREE.MeshBasicMaterial({ color: 0x6fd0ff, transparent: true, opacity: 0.05, blending: THREE.AdditiveBlending, side: THREE.DoubleSide, depthWrite: false })
  );
  ray.position.set(-14 + i * 9, 20, -14 + Math.random() * 10);
  ray.rotation.z = 0.12 * (i % 2 ? 1 : -1);
  rayGroup.add(ray);
}
scene.add(rayGroup);

// --- Jellyfish construction ----------------------------------------------
// A bell is a half-sphere whose vertices get a small sine pulse displacement
// along their own normal each frame (a breathing/pulsing contraction), and
// tentacles are individual THREE.Line objects whose points undulate with a
// sine wave whose phase is offset down the tentacle's length.
function makeJellyfish(hue, scale) {
  const group = new THREE.Group();

  const bellGeo = new THREE.SphereGeometry(1.6, 24, 16, 0, Math.PI * 2, 0, Math.PI * 0.52);
  const bellPos = bellGeo.getAttribute('position');
  const bellBase = new Float32Array(bellPos.array.length);
  bellBase.set(bellPos.array);
  const bellMat = new THREE.MeshPhysicalMaterial({
    color: hue, transparent: true, opacity: 0.38, roughness: 0.2, transmission: 0.4,
    side: THREE.DoubleSide, depthWrite: false,
  });
  const bell = new THREE.Mesh(bellGeo, bellMat);
  bell.rotation.x = Math.PI;
  group.add(bell);

  // Bioluminescent accent dots around the bell rim.
  const dotsGeo = new THREE.BufferGeometry();
  const DOTS = 10;
  const dotPos = new Float32Array(DOTS * 3);
  for (let i = 0; i < DOTS; i++) {
    const a = (i / DOTS) * Math.PI * 2;
    dotPos[i * 3] = Math.cos(a) * 1.5;
    dotPos[i * 3 + 1] = -0.15;
    dotPos[i * 3 + 2] = Math.sin(a) * 1.5;
  }
  dotsGeo.setAttribute('position', new THREE.BufferAttribute(dotPos, 3));
  const dots = new THREE.Points(dotsGeo, new THREE.PointsMaterial({
    color: 0xbdfff0, size: 0.14, transparent: true, opacity: 0.9,
    blending: THREE.AdditiveBlending, depthWrite: false,
  }));
  group.add(dots);

  // Tentacles: trailing lines whose vertical points undulate with a phase
  // offset by segment index, so waves visibly travel down the tentacle.
  const TENT = 8, SEGS = 14;
  const tentacles = [];
  for (let i = 0; i < TENT; i++) {
    const a = (i / TENT) * Math.PI * 2;
    const rootX = Math.cos(a) * 1.1, rootZ = Math.sin(a) * 1.1;
    const positions = new Float32Array(SEGS * 3);
    const geo = new THREE.BufferGeometry();
    geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
    const mat = new THREE.LineBasicMaterial({ color: hue, transparent: true, opacity: 0.5 });
    const line = new THREE.Line(geo, mat);
    group.add(line);
    tentacles.push({ line, rootX, rootZ, phase: a });
  }

  group.scale.setScalar(scale);
  scene.add(group);

  return { group, bellGeo, bellBase, bellPos, tentacles };
}

const jellies = [
  makeJellyfish(0x9fd8ff, 1.0),
  makeJellyfish(0xc9a8ff, 0.7),
  makeJellyfish(0x8fffe0, 0.85),
];
// Give each jellyfish an independent horizontal position and phase offset
// so their pulsing and drifting is not synchronized.
const jellyConfig = jellies.map((j, i) => ({
  jelly: j,
  baseX: (i - 1) * 5.5,
  baseZ: -4 + i * 3,
  startY: -16 - i * 4,
  endY: 10 - i * 2,
  phaseOffset: i * 2.1,
}));

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

const form = { t: 0 };
gsap.to(form, {
  t: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#jelStage',
    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 updateJellyfish(cfg, t) {
  const { jelly, baseX, baseZ, startY, endY, phaseOffset } = cfg;
  const eased = t * t * (3 - 2 * t);
  const phase = t * 10 + phaseOffset; // pure function of scroll progress

  jelly.group.position.set(
    baseX + Math.sin(phase * 0.3) * 1.2,
    startY + (endY - startY) * eased,
    baseZ
  );

  // Bell pulse: displace each vertex outward along its local direction from
  // the bell's pole by a shared sine value, simulating contraction.
  const pulse = 1 + Math.sin(phase) * 0.09;
  const arr = jelly.bellPos.array;
  const base = jelly.bellBase;
  for (let i = 0; i < arr.length; i += 3) {
    arr[i] = base[i] * pulse;
    arr[i + 1] = base[i + 1];
    arr[i + 2] = base[i + 2] * pulse;
  }
  jelly.bellPos.needsUpdate = true;

  // Tentacles undulate with a traveling sine wave down their length.
  jelly.tentacles.forEach((tn) => {
    const arrT = tn.line.geometry.getAttribute('position').array;
    const SEGS = arrT.length / 3;
    for (let s = 0; s < SEGS; s++) {
      const along = s / (SEGS - 1);
      const sway = Math.sin(phase * 1.4 + tn.phase + along * 4) * 0.18 * along;
      arrT[s * 3] = tn.rootX + sway;
      arrT[s * 3 + 1] = -0.3 - along * 2.4;
      arrT[s * 3 + 2] = tn.rootZ + Math.cos(phase * 1.4 + tn.phase + along * 4) * 0.18 * along;
    }
    tn.line.geometry.getAttribute('position').needsUpdate = true;
  });
}

function animate() {
  requestAnimationFrame(animate);
  if (introEl) introEl.style.opacity = (form.t > 0.03) ? '0' : '1';
  const t = form.t;
  jellyConfig.forEach((cfg) => updateJellyfish(cfg, t));
  rayGroup.rotation.y = t * 0.15;
  camera.position.y = 0 + t * 4;
  camera.lookAt(0, 4 + t * 3, 0);
  pctEl.textContent = Math.round(t * 100);
  renderer.render(scene, camera);
}

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