"use client";

import * as React from "react";
import {
  motion,
  useMotionTemplate,
  useMotionValue,
  useSpring,
} from "framer-motion";

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

type SpotlightHoverCardProps =
  React.ComponentPropsWithoutRef<typeof motion.div> & {
    title: string;
    description: string;
    eyebrow?: string;
    icon?: React.ReactNode;
  };

export function SpotlightHoverCard({
  title,
  description,
  eyebrow,
  icon,
  className,
  ...props
}: SpotlightHoverCardProps) {
  const ref = React.useRef<HTMLDivElement>(null);
  const x = useMotionValue(0);
  const y = useMotionValue(0);

  const smoothX = useSpring(x, { stiffness: 160, damping: 20 });
  const smoothY = useSpring(y, { stiffness: 160, damping: 20 });

  const spotlight = useMotionTemplate`radial-gradient(240px circle at ${smoothX}px ${smoothY}px, rgba(var(--muted) / 0.65), transparent 70%)`;
  const edgeGlow = useMotionTemplate`radial-gradient(160px circle at ${smoothX}px ${smoothY}px, rgba(var(--background) / 0.9), transparent 65%)`;

  React.useEffect(() => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    x.set(rect.width / 2);
    y.set(rect.height / 2);
  }, [x, y]);

  const handleMouseMove = React.useCallback(
    (event: React.MouseEvent<HTMLDivElement>) => {
      if (!ref.current) return;
      const rect = ref.current.getBoundingClientRect();
      x.set(event.clientX - rect.left);
      y.set(event.clientY - rect.top);
    },
    [x, y]
  );

  const handleMouseLeave = React.useCallback(() => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    x.set(rect.width / 2);
    y.set(rect.height / 2);
  }, [x, y]);

  return (
    <motion.div
      ref={ref}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      style={{ backgroundImage: spotlight }}
      whileHover={{ y: -2 }}
      transition={{ type: "spring", stiffness: 260, damping: 22 }}
      className={cn(
        "group relative overflow-hidden rounded-2xl border border-border bg-card p-6 text-foreground shadow-sm",
        className
      )}
      {...props}
    >
      <motion.div
        aria-hidden="true"
        style={{ backgroundImage: edgeGlow }}
        className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
      />
      <div className="pointer-events-none absolute -right-16 top-10 h-32 w-32 rounded-full bg-muted/40 blur-3xl opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
      <div className="relative z-10 space-y-4">
        {eyebrow ? (
          <span className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
            {eyebrow}
          </span>
        ) : null}
        <div className="flex items-center gap-3">
          {icon ? (
            <div className="flex h-11 w-11 items-center justify-center rounded-xl border border-border bg-background text-primary">
              {icon}
            </div>
          ) : null}
          <h3 className="text-lg font-semibold text-primary">{title}</h3>
        </div>
        <p className="text-sm leading-relaxed text-muted-foreground">
          {description}
        </p>
      </div>
    </motion.div>
  );
}
Spotlight Hover Card

Spotlight Hover Card

Dependencies

Files

Installation
