Confetti

Confetti celebrates one thing: the moment a group is fully settled. Particles burst from the center of the stage, arc upward with gravity, and fade over 1.4–2.2 seconds. It runs exactly once per settle event — it's never looped, never decorative, and never triggered for partial settlements.

Variants

Physics parameters

Particle colors

States

On dark surfaces

Anatomy

Usage

Accessibility

Code

HTML

<!-- Stage wraps both the canvas and the settle UI -->
<div class="confetti-stage" id="settle-stage">
  <canvas class="confetti-canvas" id="confetti-canvas"
          aria-hidden="true"></canvas>
  <!-- settle content here -->
  <p aria-live="polite" id="settle-announce"></p>
</div>

JavaScript

function createConfetti(stageEl, canvasEl) {
  const ctx = canvasEl.getContext('2d');
  let W, H, particles = [], rafId = null, lastT = 0;
  const COLORS = ['#0E7C66', '#E76F51', '#F4C94E', '#171513', '#5fc7a8'];

  function resize() {
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    const r = stageEl.getBoundingClientRect();
    W = r.width; H = r.height;
    canvasEl.width  = W * dpr;
    canvasEl.height = H * dpr;
    canvasEl.style.width  = W + 'px';
    canvasEl.style.height = H + 'px';
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  }
  resize();
  window.addEventListener('resize', resize);

  function burst() {
    // Respect reduced motion
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

    const cx = W / 2, cy = H * 0.6;
    const count = 20 + Math.floor(Math.random() * 11); // 20–30
    const spread = Math.PI * 2 / 3; // ±60° from straight up
    const baseAngle = -Math.PI / 2; // straight up

    for (let i = 0; i < count; i++) {
      const angle = baseAngle + (Math.random() - 0.5) * spread;
      const speed = 180 + Math.random() * 160;
      particles.push({
        x: cx, y: cy,
        vx: Math.cos(angle) * speed,
        vy: Math.sin(angle) * speed,
        g:  480 + Math.random() * 120,
        life: 0,
        ttl:  1.4 + Math.random() * 0.8,
        size: 4 + Math.random() * 5,
        rot:  Math.random() * Math.PI * 2,
        vr:   (Math.random() - 0.5) * 8,
        color: COLORS[Math.floor(Math.random() * COLORS.length)],
        shape: Math.random() < 0.55 ? 'rect' : 'circle'
      });
    }
    if (!rafId) { lastT = performance.now(); rafId = requestAnimationFrame(tick); }
  }

  function tick(now) {
    const dt = Math.min((now - lastT) / 1000, 0.04);
    lastT = now;
    ctx.clearRect(0, 0, W, H);
    particles = particles.filter(p => {
      p.life += dt;
      if (p.life >= p.ttl) return false;
      p.vy += p.g * dt;
      p.vx *= 0.99;
      p.x  += p.vx * dt;
      p.y  += p.vy * dt;
      p.rot += p.vr * dt;
      ctx.save();
      ctx.translate(p.x, p.y);
      ctx.rotate(p.rot);
      ctx.globalAlpha = Math.max(0, 1 - p.life / p.ttl);
      ctx.fillStyle = p.color;
      if (p.shape === 'rect') {
        ctx.fillRect(-p.size / 2, -p.size / 3, p.size, p.size * 0.6);
      } else {
        ctx.beginPath();
        ctx.arc(0, 0, p.size * 0.4, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.restore();
      return true;
    });
    if (particles.length) { rafId = requestAnimationFrame(tick); }
    else { rafId = null; }
  }

  return { burst, destroy: () => window.removeEventListener('resize', resize) };
}

Usage

const stage  = document.getElementById('settle-stage');
const canvas = document.getElementById('confetti-canvas');
const confetti = createConfetti(stage, canvas);

// Call on settle completion
settleButton.addEventListener('click', () => {
  markGroupSettled();                 // your settle logic
  confetti.burst();                   // fire particles
  announce.textContent = 'All settled up!'; // aria-live update
});

CSS classes

Design tokens used