Spotlight Card

"use client";

import { Zap } from "lucide-react";
import type { PointerEvent } from "react";

export function SpotlightCard() {
  const track = (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={track}
      className="group relative w-64 overflow-hidden rounded-2xl border border-neutral-800 bg-neutral-900 p-6"
    >
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
        style={{
          background:
            "radial-gradient(9rem circle at var(--x, 50%) var(--y, 40%), rgba(245,158,11,0.15), transparent 70%)",
        }}
      />
      <Zap className="size-5 text-amber-400" />
      <h3 className="mt-3 text-sm font-semibold text-neutral-50">Spotlight</h3>
      <p className="mt-1 text-xs text-neutral-400">
        A soft light follows your cursor across the card.
      </p>
    </div>
  );
}