Build: The Launch Confetti

The whole file after this topic. If yours differs, you can copy this one and carry on.

// confetti.js: a burst of paper when someone reserves a Volt (Phase 17).
// One canvas, a fixed pool of particles, one shared loop. It does nothing when motion is off.
import { createTicker } from "../motion/loop.js";
import { motionAllowed, onMotionChange } from "../motion/prefers-reduced.js";

const CAPACITY = 150;     // the most particles that can exist at once, however many bursts arrive
const PER_BURST = 60;
const COLOURS = ["#ff6b2c", "#2a9df4", "#ffc23d", "#1b1a22"]; // nothing paper-coloured: it would vanish on the page
const GRAVITY = 900;      // pixels per second squared
const DRAG = 1.2;         // share of speed lost per second

const ticker = createTicker({ maxDelta: 50 }); // a tab switch can never turn into one huge step
const pool = Array.from({ length: CAPACITY }, () => ({ alive: false, x: 0, y: 0, vx: 0, vy: 0, age: 0, life: 0, size: 0, turn: 0, spin: 0, colour: "" }));
let canvas = null, ctx = null, width = 0, height = 0, ratio = 1, dropped = 0;

function fit() {
  ratio = window.devicePixelRatio || 1;
  width = window.innerWidth; height = window.innerHeight;
  canvas.width = Math.round(width * ratio);   // this clears the canvas: the next frame draws everything again
  canvas.height = Math.round(height * ratio);
}
function ensureCanvas() {
  if (canvas) return;
  canvas = document.createElement("canvas");
  canvas.className = "confetti";
  canvas.setAttribute("aria-hidden", "true"); // decoration: the message beside the button is what is announced
  document.body.append(canvas);
  ctx = canvas.getContext("2d");
  fit();
  window.addEventListener("resize", fit);
}

function frame(dtMs) {
  const dt = dtMs / 1000;
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  let live = 0;
  for (const p of pool) {
    if (!p.alive) continue;
    p.age += dt;
    if (p.age >= p.life || p.y > height + 20) { p.alive = false; continue; }  // back to the pool
    live++;
    const k = Math.exp(-DRAG * dt);
    p.vy = (p.vy + GRAVITY * dt) * k; p.vx *= k;
    p.x += p.vx * dt; p.y += p.vy * dt; p.turn += p.spin * dt;
    const c = Math.cos(p.turn) * ratio, s = Math.sin(p.turn) * ratio;
    ctx.setTransform(c, s, -s, c, p.x * ratio, p.y * ratio);
    ctx.globalAlpha = Math.min(1, (p.life - p.age) / 0.4);   // fade over the last 0.4 s
    ctx.fillStyle = p.colour;
    ctx.fillRect(-p.size / 2, -p.size / 4, p.size, p.size / 2);
  }
  return live > 0;      // false removes us from the ticker: the loop sleeps until the next burst
}

function clear() {
  for (const p of pool) p.alive = false;
  if (ctx) { ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, canvas.width, canvas.height); }
}
// motion switched off while confetti is in the air: it goes at once
onMotionChange((allowed) => { if (!allowed) clear(); });

export function burst(x, y, random = Math.random) {
  if (!motionAllowed() || document.hidden) return false;   // nobody would see it
  ensureCanvas();
  let made = 0;
  for (const p of pool) {
    if (made === PER_BURST) break;
    if (p.alive) continue;
    const angle = -Math.PI / 2 + (random() - 0.5) * 2;     // a fan, mostly upward
    const speed = 300 + random() * 450;
    p.alive = true; p.x = x; p.y = y; p.age = 0;
    p.vx = Math.cos(angle) * speed; p.vy = Math.sin(angle) * speed;
    p.life = 1.2 + random() * 0.8; p.size = 6 + random() * 6;
    p.turn = random() * 6.28; p.spin = (random() - 0.5) * 16;
    p.colour = COLOURS[Math.floor(random() * COLOURS.length)];
    made++;
  }
  dropped += PER_BURST - made;       // the pool was full: the extra paper is simply not made
  if (made) ticker.add(frame);            // a Set: adding the same function twice is safe
  return made > 0;
}

export function confettiStats() {
  return { active: pool.filter((p) => p.alive).length, capacity: CAPACITY, dropped };
}