Spotlight Grid

npm install motion

"use client";

import { useRef, type CSSProperties, type PointerEvent, type ReactNode } from "react";

type SpotlightGridProps = {
  children?: ReactNode;
  /** Colour of the beam. */
  color?: string;
  /** Radius of the beam in pixels. */
  radius?: number;
  className?: string;
};

type SpotlightGridItemProps = {
  children?: ReactNode;
  className?: string;
};

/**
 * A grid lit by one beam that follows the pointer. Every <SpotlightGridItem> inside
 * lights up where the beam falls on it, so neighbouring cards glow at their nearest edges.
 */
export function SpotlightGrid({ children, color = "#5FAEB4", radius = 320, className = "" }: SpotlightGridProps) {
  const ref = useRef<HTMLDivElement>(null);

  // positions are written straight to CSS variables, so moving the pointer never re-renders React
  function handleMove(event: PointerEvent<HTMLDivElement>) {
    const grid = ref.current;
    if (!grid) return;
    const items = grid.querySelectorAll<HTMLElement>("[data-spotlight-item]");
    for (const item of items) {
      const rect = item.getBoundingClientRect();
      item.style.setProperty("--spot-x", `${event.clientX - rect.left}px`);
      item.style.setProperty("--spot-y", `${event.clientY - rect.top}px`);
    }
    grid.style.setProperty("--spot-on", "1");
  }

  return (
    <div
      ref={ref}
      onPointerMove={handleMove}
      onPointerLeave={() => ref.current?.style.setProperty("--spot-on", "0")}
      style={{ "--spot-color": color, "--spot-radius": `${radius}px`, "--spot-on": 0 } as CSSProperties}
      className={className}
    >
      {children}
    </div>
  );
}

export function SpotlightGridItem({ children, className = "" }: SpotlightGridItemProps) {
  return (
    <div
      data-spotlight-item
      className={`group relative rounded-2xl bg-white/[0.06] p-px focus-within:[--spot-focus:1] ${className}`}
    >
      {/* the border: the beam shows through the 1px gap around the card's face */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 rounded-[inherit] transition-opacity duration-300"
        style={{
          opacity: "max(var(--spot-on), var(--spot-focus, 0))",
          background:
            "radial-gradient(var(--spot-radius) circle at var(--spot-x, 50%) var(--spot-y, 50%), var(--spot-color), transparent 70%)",
        }}
      />
      <div className="relative h-full rounded-[15px] bg-[#0C1010]">
        {/* a fainter wash of the same beam across the face */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 rounded-[inherit] transition-opacity duration-300"
          style={{
            opacity: "calc(max(var(--spot-on), var(--spot-focus, 0)) * 0.14)",
            background:
              "radial-gradient(calc(var(--spot-radius) * 0.8) circle at var(--spot-x, 50%) var(--spot-y, 50%), var(--spot-color), transparent 70%)",
          }}
        />
        <div className="relative h-full p-6">{children}</div>
      </div>
    </div>
  );
}