"use client";

import * as React from "react";
import { motion, useMotionValue, useSpring } from "framer-motion";
import { cn } from "@/lib/utils";

interface AnimatedSpotlightProps {
  children?: React.ReactNode;
  className?: string;
  /**
   * Spotlight radius in pixels
   * @default 300
   */
  radius?: number;
  /**
   * Spotlight opacity (0-1)
   * @default 0.15
   */
  opacity?: number;
  /**
   * Use primary color for spotlight (otherwise white)
   * @default true
   */
  usePrimaryColor?: boolean;
  /**
   * Blur amount in pixels
   * @default 40
   */
  blur?: number;
  /**
   * Spring stiffness for cursor follow
   * @default 100
   */
  stiffness?: number;
  /**
   * Spring damping for cursor follow
   * @default 20
   */
  damping?: number;
}

function AnimatedSpotlight({
  children,
  className,
  radius = 300,
  opacity = 0.15,
  usePrimaryColor = true,
  blur = 40,
  stiffness = 100,
  damping = 20,
}: AnimatedSpotlightProps) {
  const ref = React.useRef<HTMLDivElement>(null);
  const [isHovered, setIsHovered] = React.useState(false);

  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);

  const springConfig = { stiffness, damping };
  const spotlightX = useSpring(mouseX, springConfig);
  const spotlightY = useSpring(mouseY, springConfig);

  const handleMouseMove = React.useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      if (!ref.current) return;

      const rect = ref.current.getBoundingClientRect();
      mouseX.set(e.clientX - rect.left);
      mouseY.set(e.clientY - rect.top);
    },
    [mouseX, mouseY]
  );

  const handleMouseEnter = React.useCallback(() => {
    setIsHovered(true);
  }, []);

  const handleMouseLeave = React.useCallback(() => {
    setIsHovered(false);
  }, []);

  return (
    <div
      ref={ref}
      onMouseMove={handleMouseMove}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      className={cn("relative overflow-hidden", className)}
    >
      {/* Spotlight gradient */}
      <motion.div
        className={cn(
          "pointer-events-none absolute inset-0 z-10 transition-opacity duration-300",
          isHovered ? "opacity-100" : "opacity-0"
        )}
        style={{
          background: usePrimaryColor
            ? `radial-gradient(${radius}px circle at var(--spotlight-x) var(--spotlight-y), hsl(var(--primary) / ${opacity}), transparent 60%)`
            : `radial-gradient(${radius}px circle at var(--spotlight-x) var(--spotlight-y), rgba(255,255,255,${opacity}), transparent 60%)`,
          "--spotlight-x": spotlightX,
          "--spotlight-y": spotlightY,
          filter: `blur(${blur}px)`,
        } as React.CSSProperties}
      />

      {/* Border highlight */}
      <motion.div
        className={cn(
          "pointer-events-none absolute inset-0 z-10 rounded-[inherit] transition-opacity duration-300",
          isHovered ? "opacity-100" : "opacity-0"
        )}
        style={{
          background: usePrimaryColor
            ? `radial-gradient(${radius * 0.8}px circle at var(--spotlight-x) var(--spotlight-y), hsl(var(--primary) / 0.3), transparent 50%)`
            : `radial-gradient(${radius * 0.8}px circle at var(--spotlight-x) var(--spotlight-y), rgba(255,255,255,0.1), transparent 50%)`,
          "--spotlight-x": spotlightX,
          "--spotlight-y": spotlightY,
        } as React.CSSProperties}
      />

      {/* Content */}
      <div className="relative z-0">{children}</div>
    </div>
  );
}

export { AnimatedSpotlight };
Animated Spotlight

Dependencies

Files

Installation
