Spotlight tilt card

"use client";

import { useRef } from "react";
import { cn } from "@/lib/utils";

export function SpotlightCard({ className, children }: { className?: string; children: React.ReactNode }) {
  const ref = useRef<HTMLDivElement>(null);

  function follow(e: React.PointerEvent<HTMLDivElement>) {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width;
    const y = (e.clientY - r.top) / r.height;
    el.style.setProperty("--x", x * 100 + "%");
    el.style.setProperty("--y", y * 100 + "%");
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    el.style.setProperty("--rx", (0.5 - y) * 10 + "deg");
    el.style.setProperty("--ry", (x - 0.5) * 10 + "deg");
  }

  function reset() {
    ref.current?.style.setProperty("--rx", "0deg");
    ref.current?.style.setProperty("--ry", "0deg");
  }

  return (
    <div
      ref={ref}
      onPointerMove={follow}
      onPointerLeave={reset}
      className={cn(
        "group relative grid gap-2.5 rounded-lg border border-border bg-bg p-5 transition duration-500 ease-taste hover:border-border-strong hover:shadow-lg motion-reduce:transition-none",
        "[transform:perspective(800px)_rotateX(var(--rx,0deg))_rotateY(var(--ry,0deg))]",
        className,
      )}
    >
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 rounded-[inherit] bg-[radial-gradient(220px_circle_at_var(--x,50%)_var(--y,50%),var(--tst-primary-soft),transparent_70%)] opacity-0 transition-opacity duration-300 group-hover:opacity-100"
      />
      <div className="relative grid gap-2.5">{children}</div>
    </div>
  );
}