Scroll Canvas Particle Text Formation — Canvas2D Particles Converge Into Type

<section class="ptf-stage" id="ptfStage">
  <div class="ptf-intro-overlay"><p>Scroll ↓ to converge the dust into a word</p></div>
  <canvas id="ptfCanvas"></canvas>
  <div class="ptf-hud"><span id="ptfPct">0</span>% formed</div>
</section>
<section class="ptf-bottom"><p>Hundreds of scattered particles, resolved into type.</p></section>

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

const canvas = document.getElementById('ptfCanvas');
const ctx = canvas.getContext('2d');
const pctEl = document.getElementById('ptfPct');
const introEl = document.querySelector('.ptf-intro-overlay');

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

// Particle count is derived from how many sample points we manage to pull
// out of the offscreen text render, capped for performance.
const MAX_PARTICLES = 3200;
let count = 0;
let startX, startY, targetX, targetY, liveX, liveY, hueShift;

function sampleTextPoints(word) {
  const off = document.createElement('canvas');
  const octx = off.getContext('2d');
  const w = Math.floor(W), h = Math.floor(H);
  off.width = w; off.height = h;
  octx.fillStyle = '#000';
  octx.fillRect(0, 0, w, h);
  const fontSize = Math.min(w * 0.16, h * 0.34);
  octx.fillStyle = '#fff';
  octx.font = '800 ' + fontSize + 'px system-ui, -apple-system, sans-serif';
  octx.textAlign = 'center';
  octx.textBaseline = 'middle';
  octx.fillText(word, w / 2, h / 2);

  const img = octx.getImageData(0, 0, w, h).data;
  const step = 4; // sample every Nth pixel for density control
  const pts = [];
  for (let y = 0; y < h; y += step) {
    for (let x = 0; x < w; x += step) {
      const alpha = img[(y * w + x) * 4 + 3];
      if (alpha > 128) pts.push([x, y]);
      if (pts.length >= MAX_PARTICLES) return pts;
    }
  }
  return pts;
}

function buildParticles() {
  const pts = sampleTextPoints('SCROLL');
  count = pts.length;
  startX = new Float32Array(count);
  startY = new Float32Array(count);
  targetX = new Float32Array(count);
  targetY = new Float32Array(count);
  liveX = new Float32Array(count);
  liveY = new Float32Array(count);
  hueShift = new Float32Array(count);

  for (let i = 0; i < count; i++) {
    // Scattered starting position: a wide random field across the whole canvas.
    const sx = Math.random() * W;
    const sy = Math.random() * H;
    startX[i] = sx; startY[i] = sy;
    liveX[i] = sx; liveY[i] = sy;

    targetX[i] = pts[i][0];
    targetY[i] = pts[i][1];

    hueShift[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);
  buildParticles();
}

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

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

  const t = form.t;
  const eased = t * t * (3 - 2 * t);
  const lerpSpeed = 0.06 + eased * 0.1;

  ctx.clearRect(0, 0, W, H);
  ctx.globalCompositeOperation = 'lighter';

  for (let i = 0; i < count; i++) {
    const tx = startX[i] + (targetX[i] - startX[i]) * eased;
    const ty = startY[i] + (targetY[i] - startY[i]) * eased;
    liveX[i] += (tx - liveX[i]) * lerpSpeed;
    liveY[i] += (ty - liveY[i]) * lerpSpeed;

    const hue = 260 + hueShift[i] * 70 - eased * 40;
    const radius = 1.1 + eased * 0.9;
    ctx.beginPath();
    ctx.fillStyle = 'hsla(' + hue.toFixed(0) + ', 85%, ' + (58 + eased * 10).toFixed(0) + '%, ' + (0.55 + eased * 0.35).toFixed(2) + ')';
    ctx.arc(liveX[i], liveY[i], radius, 0, Math.PI * 2);
    ctx.fill();
  }

  ctx.globalCompositeOperation = 'source-over';
  pctEl.textContent = Math.round(eased * 100);
}

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