backerup-website/frontend/app/components/SpotlightCard.tsx

"use client";

import { useRef } from "react";

/**
 * SpotlightCard — renders a card with a cursor-following radial glow
 * that lights up where the user's mouse is hovering. Zero dependencies.
 */
export default function SpotlightCard({
  children,
  className = "",
}: {
  children: React.ReactNode;
  className?: string;
}) {
  const ref = useRef<HTMLDivElement>(null);

  function onMouseMove(e: React.MouseEvent<HTMLDivElement>) {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    el.style.setProperty("--mx", `${e.clientX - rect.left}px`);
    el.style.setProperty("--my", `${e.clientY - rect.top}px`);
  }

  function onMouseLeave() {
    // Reset so the glow fades away gracefully
    const el = ref.current;
    if (!el) return;
    el.style.setProperty("--mx", "-9999px");
    el.style.setProperty("--my", "-9999px");
  }

  return (
    <div
      ref={ref}
      className={`spotlight ${className}`}
      onMouseMove={onMouseMove}
      onMouseLeave={onMouseLeave}
    >
      {children}
    </div>
  );
}