A tiny canvas particle trail that stays out of the main bundle

programming web dev
1

Hey folks, I’m wiring up a little canvas “sparkline trail” toy on a marketing page, and I’m trying to keep it as a lazy-loaded extra so it doesn’t bloat the main bundle. The failure mode I keep hitting is pulling in a helper (noise/random) and suddenly my chunk size jumps way more than the code deserves.

export async function mountTrail(canvas) {
  const { makeRng } = await import('./rng.js'); // keep optional
  const ctx = canvas.getContext('2d');
  const rng = makeRng(1337);
  const particles = new Array(240).fill(0).map(() => ({ x: 0, y: 0, vx: 0, vy: 0, a: 0 }));

  let t = 0;
  function frame() {
    t++;
    ctx.fillStyle = 'rgba(0,0,0,0.12)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    for (const p of particles) {
      p.vx += (rng() - 0.5) * 0.6;
      p.vy += (rng() - 0.5) * 0.6;
      p.vx *= 0.92; p.vy *= 0.92;
      p.x = (p.x + p.vx + canvas.width) % canvas.width;
      p.y = (p.y + p.vy + canvas.height) % canvas.height;

      ctx.fillStyle = 'rgba(120,220,255,0.9)';
      ctx.fillRect(p.x | 0, p.y | 0, 1, 1); // pixel-ish trail
    }

    requestAnimationFrame(frame);
  }

  requestAnimationFrame(frame);
}

Neat part is it looks like a drifting pixel trail with basically no state, and the dynamic import lets me ship it only when the canvas is actually visible.