Cursor Grid

import { useState } from "react";

const GRID_SIZE = 5;

export function CursorGrid() {
  const [pointer, setPointer] = useState({ x: 0.5, y: 0.5, active: false });

  function trackPointer(event: React.PointerEvent<HTMLDivElement>) {
    const bounds = event.currentTarget.getBoundingClientRect();
    setPointer({
      x: (event.clientX - bounds.left) / bounds.width,
      y: (event.clientY - bounds.top) / bounds.height,
      active: true,
    });
  }

  return (
    <div onPointerMove={trackPointer} onPointerLeave={() => setPointer((state) => ({ ...state, active: false }))}>
      {Array.from({ length: GRID_SIZE * GRID_SIZE }, (_, index) => {
        const column = index % GRID_SIZE;
        const row = Math.floor(index / GRID_SIZE);
        const distance = Math.hypot(pointer.x - (column + 0.5) / GRID_SIZE, pointer.y - (row + 0.5) / GRID_SIZE);
        const proximity = pointer.active ? Math.max(0, 1 - distance * 3.2) : 0;

        return <span key={index} style={{ opacity: 0.2 + proximity * 0.8 }} />;
      })}
    </div>
  );
}

/* CSS */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 16s linear infinite;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}