Flickering grid

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

const SIZE = 4; // square size in px
const STEP = 8; // square plus gap
const MAX_OPACITY = 0.38;
const CHANGES_PER_SECOND = 0.6; // chances per square

export function FlickeringGrid() {
  const ref = useRef<HTMLCanvasElement>(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-emerald-500 on the canvas sets the square color.
    ctx.fillStyle = getComputedStyle(canvas).color;
    const columns = Math.ceil(width / STEP);
    const rows = Math.ceil(height / STEP);
    const cells = Float32Array.from(
      { length: columns * rows },
      () => Math.random() * MAX_OPACITY
    );

    const draw = () => {
      ctx.clearRect(0, 0, width, height);
      cells.forEach((opacity, i) => {
        ctx.globalAlpha = opacity;
        const x = (i % columns) * STEP;
        const y = Math.floor(i / columns) * STEP;
        ctx.fillRect(x, y, SIZE, SIZE);
      });
    };
    draw(); // the still frame for reduced motion
    if (!inView || reduceMotion) return;

    let frame = 0;
    let last = performance.now();
    const tick = (now: number) => {
      // Each square has a small chance per frame to jump to a new opacity.
      const chance = (CHANGES_PER_SECOND * (now - last)) / 1000;
      last = now;
      for (let i = 0; i < cells.length; i++) {
        if (Math.random() < chance) cells[i] = Math.random() * MAX_OPACITY;
      }
      draw();
      frame = requestAnimationFrame(tick);
    };
    frame = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(frame);
  }, [inView, reduceMotion]);

  return (
    <canvas
      ref={ref}
      aria-hidden
      className='pointer-events-none absolute inset-0 size-full text-emerald-500 [mask-image:radial-gradient(ellipse_at_center,black_25%,transparent_75%)]'
    />
  );
}