Spotlight card

"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

export interface SpotlightCardProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Any CSS color for the light. */
  color?: string;
  size?: number;
}

/** A card lit by a soft spotlight that follows the pointer, including on its border. */
export function SpotlightCard({ color = "color-mix(in oklab, var(--foreground) 10%, transparent)", size = 360, className, children, ...props }: SpotlightCardProps) {
  const ref = React.useRef<HTMLDivElement>(null);
  const onMove = (e: React.PointerEvent) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    el.style.setProperty("--sx", `${e.clientX - r.left}px`);
    el.style.setProperty("--sy", `${e.clientY - r.top}px`);
  };
  return (
    <div
      ref={ref}
      onPointerMove={onMove}
      className={cn("group relative overflow-hidden rounded-xl border border-border bg-card", className)}
      style={{ "--spot": color, "--spot-size": `${size}px` } as React.CSSProperties}
      {...props}
    >
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100 motion-reduce:hidden"
        style={{ background: "radial-gradient(var(--spot-size) circle at var(--sx) var(--sy), var(--spot), transparent 60%)" }}
      />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-300 group-hover:opacity-100 motion-reduce:hidden"
        style={{
          padding: 1,
          background: "radial-gradient(calc(var(--spot-size) * 0.6) circle at var(--sx) var(--sy), color-mix(in oklab, var(--foreground) 35%, transparent), transparent 60%)",
          WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
          WebkitMaskComposite: "xor",
          maskComposite: "exclude",
        }}
      />
      <div className="relative">{children}</div>
    </div>
  );
}