"use client";

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

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

type SpotlightCardProps = HTMLMotionProps<"div"> & {
  title: string;
  description: string;
  eyebrow?: string;
  icon?: React.ReactNode;
};

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

  const backgroundImage = useMotionTemplate`radial-gradient(220px circle at ${x}px ${y}px, hsl(var(--primary) / 0.18), 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 }}
      className={cn(
        "group relative overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-lg transition-shadow hover:shadow-xl",
        className
      )}
      {...props}
    >
      <div className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
        <div className="absolute -right-20 top-8 h-32 w-32 rounded-full bg-primary/10 blur-3xl" />
      </div>
      <div className="relative space-y-3">
        {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-10 w-10 items-center justify-center rounded-xl border border-border/60 bg-background/60 text-foreground">
              {icon}
            </div>
          ) : null}
          <h3 className="text-lg font-semibold text-foreground">{title}</h3>
        </div>
        <p className="text-sm leading-relaxed text-muted-foreground">
          {description}
        </p>
      </div>
    </motion.div>
  );
}
Spotlight Card

Spotlight Card

Dependencies

Files

Installation
