Cursor Spotlight

"use client";
 
import React, { useRef, useState } from "react";
import { cn } from "@/lib/utils";
 
export interface CursorSpotlightProps
  extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode;
  backgroundContent: React.ReactNode;
  spotlightSize?: number;
  overlayOpacity?: number;
  spotlightColor?: string;
  blurredEdges?: boolean;
  showFaintBackground?: boolean;
  glowIntensity?: number;
  noiseTexture?: boolean;
}
 
export function CursorSpotlight({
  children,
  className,
  backgroundContent,
  spotlightSize = 50,
  overlayOpacity = 0.9,
  spotlightColor = "rgba(255, 255, 255, 0.15)",
  blurredEdges = true,
  showFaintBackground = false,
  glowIntensity = 0.2,
  noiseTexture = true,
  ...props
}: CursorSpotlightProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [position, setPosition] = useState<{ x: number; y: number }>({
    x: -1000,
    y: -1000,
  });
  const [isHovering, setIsHovering] = useState(false);
 
  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!containerRef.current) return;
 
    const rect = containerRef.current.getBoundingClientRect();
    setPosition({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
    });
  };
 
  const handleMouseEnter = () => {
    setIsHovering(true);
  };
 
  const handleMouseLeave = () => {
    setIsHovering(false);
    setPosition({
      x: -1000,
      y: -1000,
    });
  };
 
  const getSpotlightGradient = () => {
    const blurAmount = blurredEdges ? "circle" : "circle";
    return `radial-gradient(${spotlightSize}px ${blurAmount} at ${position.x}px ${position.y}px, 
      transparent 0%, 
      rgba(0, 0, 0, ${overlayOpacity}) ${blurredEdges ? "80%" : "100%"})`;
  };
 
  const getGlowEffect = () => {
    return `radial-gradient(${spotlightSize * 1.2}px circle at ${position.x}px ${position.y}px, 
      ${spotlightColor} 0%, 
      transparent 70%)`;
  };
 
  return (
    <div
      ref={containerRef}
      className={cn("relative overflow-hidden", className)}
      onMouseMove={handleMouseMove}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      {...props}
    >
      <div className="absolute inset-0 z-0">{backgroundContent}</div>
 
      <div
        className="absolute inset-0 z-10 transition-opacity duration-300"
        style={{
          background: getSpotlightGradient(),
          opacity: 1,
          pointerEvents: "none",
        }}
      />
 
      {glowIntensity > 0 && (
        <div
          className="absolute inset-0 z-20 mix-blend-overlay transition-opacity duration-300"
          style={{
            background: getGlowEffect(),
            opacity: isHovering ? glowIntensity : 0,
            pointerEvents: "none",
          }}
        />
      )}
 
      {noiseTexture && (
        <div
          className="absolute inset-0 z-30 opacity-20 pointer-events-none mix-blend-overlay"
          style={{
            opacity: isHovering ? 0.1 : 0,
          }}
        >
          <svg
            className="h-full w-full opacity-20"
            xmlns="http://www.w3.org/2000/svg"
            width="100%"
            height="100%"
          >
            <filter id="noise">
              <feTurbulence
                type="fractalNoise"
                baseFrequency="0.65"
                numOctaves="3"
                stitchTiles="stitch"
              />
              <feColorMatrix type="saturate" values="0" />
            </filter>
            <rect width="100%" height="100%" filter="url(#noise)" />
          </svg>
        </div>
      )}
 
      {showFaintBackground && (
        <div
          className="absolute inset-0 z-5 transition-opacity duration-300"
          style={{
            background: `rgba(0, 0, 0, ${overlayOpacity * 0.7})`,
            opacity: 1,
            pointerEvents: "none",
          }}
        />
      )}
 
      <div className="relative z-40">{children}</div>
    </div>
  );
}