Scroll Canvas Generative Flow Field — Procedural Vector-Field Particles

<section class="gff-stage" id="gffStage">
  <div class="gff-intro-overlay"><p>Scroll ↓ to stir the current</p></div>
  <canvas id="gffCanvas"></canvas>
  <div class="gff-hud"><span id="gffPct">0</span>% turbulence</div>
</section>
<section class="gff-bottom"><p>Hundreds of particles tracing a procedural vector field, no noise library involved.</p></section>

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

const canvas = document.getElementById('gffCanvas');
const ctx = canvas.getContext('2d');
const pctEl = document.getElementById('gffPct');
const introEl = document.querySelector('.gff-intro-overlay');

const DPR = Math.min(window.devicePixelRatio || 1, 2);
let W = 0, H = 0;

const COUNT = 900;
// Flat, pre-allocated arrays for every particle's live state -- the render
// loop only ever reads and writes into these, never allocates.
const px = new Float32Array(COUNT);
const py = new Float32Array(COUNT);
const life = new Float32Array(COUNT);
const hueBase = new Float32Array(COUNT);

function seedParticle(i) {
  px[i] = Math.random() * W;
  py[i] = Math.random() * H;
  life[i] = 60 + Math.random() * 160;
  hueBase[i] = Math.random();
}

function resize() {
  W = canvas.clientWidth; H = canvas.clientHeight;
  canvas.width = Math.floor(W * DPR);
  canvas.height = Math.floor(H * DPR);
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
  ctx.fillStyle = '#05080a';
  ctx.fillRect(0, 0, W, H);
  for (let i = 0; i < COUNT; i++) seedParticle(i);
}

// Procedural vector field: layered sine/cosine functions of position (and a
// slow time term) produce a smoothly varying angle at every point in the
// plane -- no external Perlin/simplex noise library required.
function fieldAngle(x, y, t, turbulence) {
  const scale = 0.006 + turbulence * 0.01;
  const a =
    Math.sin(x * scale + t * 0.6) * 1.4 +
    Math.cos(y * scale * 1.3 - t * 0.4) * 1.1 +
    Math.sin((x + y) * scale * 0.7 + t * 0.25) * 0.8;
  return a * (1.4 + turbulence * 1.6);
}

gsap.registerPlugin(ScrollTrigger);
const scrollState = { t: 0 };
gsap.to(scrollState, {
  t: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#gffStage',
    start: 'top top',
    end: '+=350%',
    scrub: 0.6,
    pin: true,
  },
});

const clock = { start: performance.now() };

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

  const elapsed = (performance.now() - clock.start) / 1000;
  const turbulence = t; // 0 (calm drift) to 1 (chaotic storm)
  const baseSpeed = 0.6 + turbulence * 2.6;

  // Translucent overlay instead of clearRect -- this is what leaves the
  // fading motion trails behind each particle.
  ctx.fillStyle = 'rgba(5, 8, 10, ' + (0.12 + turbulence * 0.06).toFixed(3) + ')';
  ctx.fillRect(0, 0, W, H);

  for (let i = 0; i < COUNT; i++) {
    const angle = fieldAngle(px[i], py[i], elapsed, turbulence);
    px[i] += Math.cos(angle) * baseSpeed;
    py[i] += Math.sin(angle) * baseSpeed;
    life[i] -= 1;

    if (px[i] < 0 || px[i] > W || py[i] < 0 || py[i] > H || life[i] <= 0) {
      seedParticle(i);
      continue;
    }

    const hue = 165 + hueBase[i] * 60 + turbulence * 40;
    ctx.beginPath();
    ctx.fillStyle = 'hsla(' + hue.toFixed(0) + ', 75%, ' + (55 + turbulence * 15).toFixed(0) + '%, 0.85)';
    ctx.arc(px[i], py[i], 1.3 + turbulence * 0.6, 0, Math.PI * 2);
    ctx.fill();
  }

  pctEl.textContent = Math.round(turbulence * 100);
}

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