Three.js Scroll Tornado Vortex — GSAP Particle Funnel

<section class="tor-stage" id="torStage">
  <div class="tor-intro"><p>Scroll ↓ to summon the vortex</p></div>
  <canvas id="torCanvas"></canvas>
  <div class="tor-hud">INTENSITY <span id="torPct">0</span>%</div>
</section>
<section class="tor-bottom"><p>The storm has passed.</p></section>

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

const canvas = document.getElementById('torCanvas');
const pctEl = document.getElementById('torPct');
const introEl = document.querySelector('.tor-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(0x0e1013);
scene.fog = new THREE.FogExp2(0x0e1013, 0.014);
const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 300);

scene.add(new THREE.AmbientLight(0x8899bb, 0.7));
const storm = new THREE.PointLight(0x9ad7ff, 0.9, 120);
storm.position.set(0, 26, 0);
scene.add(storm);

// Cracked-earth ground.
const ground = new THREE.Mesh(
  new THREE.CircleGeometry(70, 64),
  new THREE.MeshLambertMaterial({ color: 0x1a1e26 })
);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);

function rand(seed) {
  const x = Math.sin(seed * 137.3 + 17.7) * 31743.7719;
  return x - Math.floor(x);
}

// Every particle stores polar-coordinate parameters, not positions. Each
// frame computes position from (height, phase, radius jitter) + intensity,
// so the funnel is a pure function of scroll and clock — no forces.
const COUNT = 2600;
const geo = new THREE.BufferGeometry();
const positions = new Float32Array(COUNT * 3);
geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const parts = [];
for (let i = 0; i < COUNT; i++) {
  parts.push({
    h: rand(i) ,                    // 0–1 height fraction in the funnel
    phase: rand(i + 1e4) * Math.PI * 2,
    jitter: 0.6 + rand(i + 2e4) * 0.9,
    speed: 0.7 + rand(i + 3e4) * 1.1,
    // Scattered rest position on the ground for intensity = 0.
    rx: (rand(i + 4e4) - 0.5) * 90,
    rz: (rand(i + 5e4) - 0.5) * 90,
  });
}
const points = new THREE.Points(geo, new THREE.PointsMaterial({
  color: 0xaebfd4, size: 0.42, transparent: true, opacity: 0.85, sizeAttenuation: true,
}));
scene.add(points);

// A few larger debris chunks that only join the vortex at high intensity.
const debris = [];
for (let i = 0; i < 12; i++) {
  const d = new THREE.Mesh(
    new THREE.BoxGeometry(0.7 + rand(i + 9e4) * 0.9, 0.5, 0.7),
    new THREE.MeshLambertMaterial({ color: 0x39424f })
  );
  d.position.set((rand(i + 6e4) - 0.5) * 60, 0.4, (rand(i + 7e4) - 0.5) * 60);
  scene.add(d);
  debris.push({ m: d, rest: d.position.clone(), phase: rand(i + 8e4) * Math.PI * 2, h: 0.1 + rand(i) * 0.75 });
}

const FUNNEL_H = 30;
// Funnel radius by height: narrow at the ground, wide at the top.
function funnelRadius(hFrac) { return 1.2 + Math.pow(hFrac, 1.6) * 14; }

gsap.registerPlugin(ScrollTrigger);
// Intensity ramps 0→1 across the first 70% of scroll, holds, then the
// last 15% disperses the storm again for an arc with an ending.
const st = { p: 0 };
gsap.to(st, {
  p: 1,
  ease: 'none',
  scrollTrigger: { trigger: '#torStage', start: 'top top', end: '+=450%', scrub: 0.5, 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 = st.p;
  if (introEl) introEl.style.opacity = p > 0.02 ? '0' : '1';

  const intensity = p < 0.7 ? Math.min(1, p / 0.7) : (p < 0.85 ? 1 : Math.max(0, 1 - (p - 0.85) / 0.15));
  const ease = intensity * intensity * (3 - 2 * intensity); // smoothstep

  // The funnel core wanders so the tornado stalks the plain.
  const coreX = Math.sin(t * 0.22) * 6 * ease;
  const coreZ = Math.cos(t * 0.17) * 6 * ease;

  for (let i = 0; i < COUNT; i++) {
    const pt = parts[i];
    const y = pt.h * FUNNEL_H * ease + 0.15;
    const r = funnelRadius(pt.h) * pt.jitter;
    const a = pt.phase + t * (2.2 + (1 - pt.h) * 3.2) * pt.speed * (0.15 + ease);
    // Lerp between scattered rest position and funnel position by ease.
    const fx = coreX + Math.cos(a) * r, fz = coreZ + Math.sin(a) * r;
    positions[i * 3] = pt.rx + (fx - pt.rx) * ease;
    positions[i * 3 + 1] = y;
    positions[i * 3 + 2] = pt.rz + (fz - pt.rz) * ease;
  }
  geo.attributes.position.needsUpdate = true;

  debris.forEach((d) => {
    // Debris needs intensity > 0.5 before lift-off; below that it trembles.
    const lift = Math.max(0, (ease - 0.5) * 2);
    const a = d.phase + t * 2.6;
    const r = funnelRadius(d.h) * 0.85;
    const fx = coreX + Math.cos(a) * r, fz = coreZ + Math.sin(a) * r;
    d.m.position.x = d.rest.x + (fx - d.rest.x) * lift + Math.sin(t * 18 + d.phase) * 0.05 * ease * (1 - lift);
    d.m.position.y = 0.4 + d.h * FUNNEL_H * lift;
    d.m.position.z = d.rest.z + (fz - d.rest.z) * lift;
    d.m.rotation.x += 0.03 * lift; d.m.rotation.y += 0.05 * lift;
  });

  storm.intensity = 0.5 + ease * 1.4 + Math.sin(t * 7) * 0.15 * ease;
  const ang = t * 0.07 + p * 1.2;
  camera.position.set(Math.sin(ang) * (40 - ease * 10), 12 + ease * 6, Math.cos(ang) * (40 - ease * 10));
  camera.lookAt(coreX, 8 * ease + 2, coreZ);

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

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