Particle burst

import { useRef } from 'react';
import { useReducedMotion } from 'motion/react';

type Particle = Record<'x' | 'y' | 'vx' | 'vy' | 'age' | 'life', number> & {
  glyph: string;
};
type CheerButtonProps = { count: number; onCheer: () => void };

const GLYPHS = ['🎉', '✨', '🚀', '💖'];
const GRAVITY = 1100; // px/s²

export function CheerButton({ count, onCheer }: CheerButtonProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const live = useRef<Particle[]>([]);
  const frame = useRef(0);
  const reduceMotion = useReducedMotion();
  // Runs only while particles are alive, then stops by itself.
  function step(context: CanvasRenderingContext2D, last: number) {
    frame.current = requestAnimationFrame((now) => {
      const dt = Math.min(now - last, 50) / 1000;
      context.clearRect(0, 0, window.innerWidth, window.innerHeight);
      live.current = live.current.filter((p) => (p.age += dt) < p.life);
      for (const p of live.current) {
        p.vy += GRAVITY * dt;
        p.x += p.vx * dt;
        p.y += p.vy * dt;
        // Fade out over the last 40% of each particle's life.
        context.globalAlpha = Math.min(1, (p.life - p.age) / (p.life * 0.4));
        context.fillText(p.glyph, p.x, p.y);
      }
      if (live.current.length) step(context, now);
      else frame.current = 0;
    });
  }

  function burst(x: number, y: number, amount: number) {
    const canvas = canvasRef.current;
    const context = canvas?.getContext('2d');
    if (reduceMotion || !canvas || !context) return;
    if (!frame.current) {
      // Size the canvas as each loop starts, sharp on dense screens.
      const ratio = window.devicePixelRatio;
      canvas.width = window.innerWidth * ratio;
      canvas.height = window.innerHeight * ratio;
      context.setTransform(ratio, 0, 0, ratio, 0, 0);
      context.font = '22px system-ui';
      context.textAlign = 'center';
      step(context, performance.now());
    }
    for (let i = 0; i < amount; i++) {
      // Up, within 45° of vertical, at 280 to 720px/s.
      const angle = -Math.PI / 2 + (Math.random() - 0.5) * (Math.PI / 2);
      const speed = 280 + Math.random() * 440;
      const [vx, vy] = [Math.cos(angle) * speed, Math.sin(angle) * speed];
      const glyph = GLYPHS[Math.floor(Math.random() * GLYPHS.length)] ?? '✨';
      const life = 1 + Math.random() * 0.7;
      live.current.push({ x, y, vx, vy, age: 0, life, glyph });
    }
  }

  return (
    <>
      <button
        type='button'
        onPointerDown={(event) => {
          onCheer();
          burst(event.clientX, event.clientY, 16);
        }}
        className='rounded-full bg-foreground px-6 py-3 font-semibold text-background select-none active:scale-95'
      >
        Cheer <span className='tabular-nums opacity-70'>{count}</span>
      </button>
      <canvas
        ref={canvasRef}
        aria-hidden
        className='pointer-events-none fixed inset-0 z-50 size-full'
      />
    </>
  );
}