Three.js Scroll Ink Drop Diffusion — Particle Turbulence Effect

<section class="ink-stage" id="inkStage">
  <div class="ink-intro-overlay"><p>Scroll ↓ to diffuse an ink drop through clear water</p></div>
  <canvas id="inkCanvas"></canvas>
  <div class="ink-hud"><span id="inkPct">0</span>% diffused</div>
</section>
<section class="ink-bottom"><p>Feathered tendrils, fully dispersed.</p></section>

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

const canvas = document.getElementById('inkCanvas');
const pctEl = document.getElementById('inkPct');
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(55, 1, 0.1, 200);
camera.position.set(0, 0, 20);
camera.lookAt(0, 0, 0);

const COUNT = 7000;
const startPos = new Float32Array(COUNT * 3);
const targetPos = new Float32Array(COUNT * 3);
const seed = new Float32Array(COUNT); // per-particle turbulence seed
const colors = new Float32Array(COUNT * 3);
const livePos = new Float32Array(COUNT * 3);

// Cheap deterministic pseudo-noise: no imports, just a hashed sine lattice.
// Used only to give each particle's drift direction organic variation
// instead of a perfectly radial explosion.
function hashNoise(x, y, z) {
  const s = Math.sin(x * 12.9898 + y * 78.233 + z * 37.719) * 43758.5453;
  return s - Math.floor(s);
}

const inkDark = new THREE.Color(0x1a1035);
const inkMid = new THREE.Color(0x3d3a8f);
const inkPale = new THREE.Color(0x8fd8e8);

for (let i = 0; i < COUNT; i++) {
  // Tight starting "drop": a small dense sphere near the origin.
  const sr = Math.pow(Math.random(), 1.6) * 1.1;
  const sTheta = Math.random() * Math.PI * 2;
  const sPhi = Math.acos(2 * Math.random() - 1);
  const sx = sr * Math.sin(sPhi) * Math.cos(sTheta);
  const sy = sr * Math.sin(sPhi) * Math.sin(sTheta);
  const sz = sr * Math.cos(sPhi) * 0.5;
  startPos[i * 3] = sx;
  startPos[i * 3 + 1] = sy;
  startPos[i * 3 + 2] = sz;

  // Target: drift outward along a turbulent direction seeded from a hashed
  // noise lattice so neighboring particles drift similarly, producing
  // coherent swirling tendrils rather than a uniform radial cloud.
  const n1 = hashNoise(sx * 1.7, sy * 1.7, i * 0.013) * Math.PI * 2;
  const n2 = hashNoise(sy * 2.3, sz * 2.3, i * 0.021) * Math.PI;
  const reach = 6 + Math.pow(Math.random(), 0.6) * 10;
  const swirl = (hashNoise(i * 0.007, 0.5, 0.2) - 0.5) * 3.2;
  seed[i] = swirl;
  const dx = Math.cos(n1) * Math.sin(n2) * reach;
  const dy = Math.sin(n1) * Math.sin(n2) * reach * 0.7;
  const dz = Math.cos(n2) * reach * 0.4;
  targetPos[i * 3] = sx + dx;
  targetPos[i * 3 + 1] = sy + dy;
  targetPos[i * 3 + 2] = sz + dz;

  const distT = Math.min(1, reach / 16);
  const c = new THREE.Color();
  if (distT < 0.4) c.copy(inkDark).lerp(inkMid, distT / 0.4);
  else c.copy(inkMid).lerp(inkPale, (distT - 0.4) / 0.6);
  colors[i * 3] = c.r; colors[i * 3 + 1] = c.g; colors[i * 3 + 2] = c.b;
  livePos.set([sx, sy, sz], i * 3);
}

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(livePos, 3));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));

const material = new THREE.PointsMaterial({
  size: 0.1,
  vertexColors: true,
  transparent: true,
  opacity: 0.85,
  blending: THREE.NormalBlending,
  depthWrite: false,
  sizeAttenuation: true,
});
const points = new THREE.Points(geometry, material);
scene.add(points);

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

const form = { t: 0 };
gsap.to(form, {
  t: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#inkStage',
    start: 'top top',
    end: '+=400%',
    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();
}

const posAttr = geometry.getAttribute('position');
let swirlAccum = 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);
  swirlAccum = eased; // deterministic function of scroll progress, not time

  for (let i = 0; i < COUNT; i++) {
    const ix = i * 3;
    let lx = startPos[ix] + (targetPos[ix] - startPos[ix]) * eased;
    let ly = startPos[ix + 1] + (targetPos[ix + 1] - startPos[ix + 1]) * eased;
    const lz = startPos[ix + 2] + (targetPos[ix + 2] - startPos[ix + 2]) * eased;

    // Add a swirl that grows and fades with progress (peaks mid-diffusion)
    // so tendrils curl rather than move in straight lines. Purely a
    // function of eased progress, so it is exactly reversible.
    const swirlAmt = Math.sin(eased * Math.PI) * seed[i] * 0.6;
    const cosA = Math.cos(swirlAmt), sinA = Math.sin(swirlAmt);
    const rx = lx * cosA - ly * sinA;
    const ry = lx * sinA + ly * cosA;
    lx = rx; ly = ry;

    posAttr.array[ix] = lx;
    posAttr.array[ix + 1] = ly;
    posAttr.array[ix + 2] = lz;
  }
  posAttr.needsUpdate = true;

  camera.position.z = 20 - eased * 4;
  pctEl.textContent = Math.round(eased * 100);
  renderer.render(scene, camera);
}

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