Grid Spotlight

"use client";

import type { PointerEvent } from "react";

export function GridSpotlight({ children }: { children?: React.ReactNode }) {
  const move = (e: PointerEvent<HTMLDivElement>) => {
    const r = e.currentTarget.getBoundingClientRect();
    e.currentTarget.style.setProperty("--x", e.clientX - r.left + "px");
    e.currentTarget.style.setProperty("--y", e.clientY - r.top + "px");
  };

  return (
    <div
      onPointerMove={move}
      className="relative overflow-hidden rounded-2xl bg-neutral-950"
    >
      <div
        aria-hidden="true"
        className="absolute inset-0"
        style={{
          backgroundImage:
            "linear-gradient(to right, rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.07) 1px, transparent 1px)",
          backgroundSize: "28px 28px",
          maskImage:
            "radial-gradient(10rem circle at var(--x, 50%) var(--y, 50%), black 30%, transparent 70%)",
          WebkitMaskImage:
            "radial-gradient(10rem circle at var(--x, 50%) var(--y, 50%), black 30%, transparent 70%)",
        }}
      />
      <div className="relative">{children}</div>
    </div>
  );
}