Glyph matrix

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

const GLYPHS = '0123456789ABCDEF';
const CELL = { width: 14, height: 18 }; // px, for 13px monospace text
const CHANGES_PER_SECOND = 1.2; // chances per cell

const pick = () => GLYPHS[Math.floor(Math.random() * GLYPHS.length)]!;
const dim = () => Math.random() ** 2 * 0.5; // mostly faint, a few brighter

export function GlyphMatrix() {
  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;
    canvas.width = width * dpr;
    canvas.height = height * dpr;
    ctx.scale(dpr, dpr);
    ctx.font = '13px ui-monospace, monospace';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = getComputedStyle(canvas).color;
    const columns = Math.ceil(width / CELL.width);
    const count = columns * Math.ceil(height / CELL.height);
    const cells = Array.from({ length: count }, () => {
      const target = dim();
      return { glyph: pick(), opacity: target, target };
    });

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

    let frame = 0;
    let last = performance.now();
    const tick = (now: number) => {
      const seconds = (now - last) / 1000;
      last = now;
      for (const cell of cells) {
        if (Math.random() < CHANGES_PER_SECOND * seconds) {
          // Swap the glyph and dip, then fade up to the new brightness.
          cell.glyph = pick();
          cell.target = dim();
          cell.opacity *= 0.25;
        }
        cell.opacity += (cell.target - cell.opacity) * Math.min(1, seconds * 7);
      }
      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-muted-foreground [mask-image:radial-gradient(ellipse_at_center,black_35%,transparent_80%)]'
    />
  );
}