Particle background

import { useEffect, useRef } from 'react';
import { useAnimationFrame, useInView, useReducedMotion } from 'motion/react';

const COUNT = 40;
const LINK_DISTANCE = 110; // px; line opacity fades from 35% to 0 across it

export function ParticleBackground() {
  const ref = useRef<HTMLCanvasElement>(null);
  const step = useRef<(seconds: number) => void>(null);
  const inView = useInView(ref);
  const reduceMotion = useReducedMotion();

  useEffect(() => {
    const canvas = ref.current!;
    const ctx = canvas.getContext('2d')!;
    const { clientWidth: width, clientHeight: height } = canvas;
    const dpr = window.devicePixelRatio || 1; // sharp on high-density screens
    canvas.width = width * dpr;
    canvas.height = height * dpr;
    ctx.scale(dpr, dpr);
    // text-muted-foreground on the canvas sets this color.
    ctx.fillStyle = ctx.strokeStyle = getComputedStyle(canvas).color;
    const dots = Array.from({ length: COUNT }, () => {
      const angle = Math.random() * 2 * Math.PI;
      const speed = 10 + Math.random() * 10; // px per second
      const [vx, vy] = [Math.cos(angle) * speed, Math.sin(angle) * speed];
      return { x: Math.random() * width, y: Math.random() * height, vx, vy };
    });
    step.current = (seconds) => {
      ctx.clearRect(0, 0, width, height);
      dots.forEach((a, i) => {
        a.x += a.vx * seconds;
        a.y += a.vy * seconds;
        if (a.x < 0 || a.x > width) a.vx *= -1;
        if (a.y < 0 || a.y > height) a.vy *= -1;
        ctx.globalAlpha = 1;
        ctx.beginPath();
        ctx.arc(a.x, a.y, 1.25, 0, 2 * Math.PI);
        ctx.fill();
        for (const b of dots.slice(0, i)) {
          const distance = Math.hypot(a.x - b.x, a.y - b.y);
          if (distance > LINK_DISTANCE) continue;
          ctx.globalAlpha = 0.35 * (1 - distance / LINK_DISTANCE);
          ctx.beginPath();
          ctx.moveTo(a.x, a.y);
          ctx.lineTo(b.x, b.y);
          ctx.stroke();
        }
      });
    };
    step.current(0); // the still frame for reduced motion
  }, []);

  // Pause off screen; browsers already pause frames in hidden tabs.
  useAnimationFrame((_, delta) => {
    if (inView && !reduceMotion) step.current?.(delta / 1000);
  });

  return (
    <canvas
      ref={ref}
      aria-hidden
      className='pointer-events-none absolute inset-0 size-full text-muted-foreground'
    />
  );
}