Interactive grid

import { useRef, type PointerEvent, type ReactNode } from 'react';

const CELL = 40; // px
const COLS = 32;
const ROWS = 14;

export function InteractiveGridHero({ children }: { children: ReactNode }) {
  const gridRef = useRef<HTMLDivElement>(null);
  const lit = useRef<HTMLElement | null>(null);

  // The new cell turns on instantly; the one it left fades out with its own
  // CSS transition, which is what draws the trail.
  function light(cell: HTMLElement | null) {
    if (cell === lit.current) return;
    if (lit.current) {
      lit.current.style.transitionDuration = '';
      lit.current.style.opacity = '0';
    }
    if (cell) {
      cell.style.transitionDuration = '0ms';
      cell.style.opacity = '1';
    }
    lit.current = cell;
  }

  function onPointerMove(event: PointerEvent<HTMLElement>) {
    const grid = gridRef.current;
    if (!grid || event.pointerType !== 'mouse') return;
    const rect = grid.getBoundingClientRect();
    const col = Math.floor((event.clientX - rect.left) / CELL);
    const row = Math.floor((event.clientY - rect.top) / CELL);
    const inside = col >= 0 && col < COLS && row >= 0 && row < ROWS;
    const cell = inside
      ? grid.children[row * COLS + col]?.firstElementChild
      : null;
    light(cell instanceof HTMLElement ? cell : null);
  }

  return (
    <section
      onPointerMove={onPointerMove}
      onPointerLeave={() => light(null)}
      className='relative grid h-[560px] place-items-center overflow-hidden'
    >
      <div
        ref={gridRef}
        aria-hidden
        className='absolute top-1/2 left-1/2 grid -translate-1/2 mask-radial-from-40% mask-radial-to-75%'
        style={{
          gridTemplateColumns: `repeat(${COLS}, ${CELL}px)`,
          gridAutoRows: CELL
        }}
      >
        {Array.from({ length: COLS * ROWS }, (_, index) => (
          <div key={index} className='border-r border-b border-black/8'>
            <span className='block size-full bg-blue-500/35 opacity-0 transition-opacity duration-900 ease-out motion-reduce:duration-0' />
          </div>
        ))}
      </div>
      <div className='pointer-events-none relative text-center'>{children}</div>
    </section>
  );
}