{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spotlight-card",
  "type": "registry:ui",
  "title": "Spotlight Card",
  "description": "Interactive cards with cursor-following spotlight effects, animated gradient borders, and 3D tilt animations.",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/spotlight-card.tsx",
      "type": "registry:ui",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@workspace/ui/lib/utils\"\n\ninterface SpotlightCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  spotlightColor?: string\n  borderColor?: string\n  borderWidth?: number\n  borderRadius?: number\n  glowIntensity?: number\n}\n\nfunction SpotlightCard({\n  children,\n  className,\n  spotlightColor = \"rgba(120, 119, 198, 0.3)\",\n  borderColor,\n  borderWidth = 1,\n  borderRadius = 16,\n  glowIntensity = 0.15,\n  ...props\n}: SpotlightCardProps) {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const [position, setPosition] = React.useState({ x: 0, y: 0 })\n  const [isHovered, setIsHovered] = React.useState(false)\n  const [opacity, setOpacity] = React.useState(0)\n\n  const handleMouseMove = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!containerRef.current) return\n\n      const rect = containerRef.current.getBoundingClientRect()\n      setPosition({\n        x: e.clientX - rect.left,\n        y: e.clientY - rect.top,\n      })\n    },\n    []\n  )\n\n  const handleMouseEnter = React.useCallback(() => {\n    setIsHovered(true)\n    setOpacity(1)\n  }, [])\n\n  const handleMouseLeave = React.useCallback(() => {\n    setIsHovered(false)\n    setOpacity(0)\n  }, [])\n\n  return (\n    <div\n      ref={containerRef}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={cn(\n        \"relative overflow-hidden bg-gradient-to-b\",\n        \"from-neutral-50 to-white\",\n        \"dark:from-neutral-950 dark:to-neutral-900\",\n        \"transition-all duration-500\",\n        className\n      )}\n      style={{\n        borderRadius: `${borderRadius}px`,\n      }}\n      {...props}\n    >\n      {/* Gradient border */}\n      <div\n        className=\"absolute inset-0 pointer-events-none transition-opacity duration-500\"\n        style={{\n          borderRadius: `${borderRadius}px`,\n          padding: `${borderWidth}px`,\n          background: borderColor\n            ? borderColor\n            : `conic-gradient(\n                from 225deg,\n                rgba(120, 119, 198, 0.9),\n                rgba(120, 119, 198, 0.1) 25%,\n                rgba(255, 255, 255, 0.15) 50%,\n                rgba(120, 119, 198, 0.1) 75%,\n                rgba(120, 119, 198, 0.9)\n              )`,\n          mask: \"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)\",\n          maskComposite: \"exclude\",\n          WebkitMask:\n            \"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)\",\n          WebkitMaskComposite: \"xor\",\n          opacity: isHovered ? 1 : 0.5,\n        }}\n      />\n\n      {/* Spotlight effect */}\n      <div\n        className=\"absolute pointer-events-none transition-opacity duration-300\"\n        style={{\n          left: position.x,\n          top: position.y,\n          width: \"400px\",\n          height: \"400px\",\n          transform: \"translate(-50%, -50%)\",\n          background: `radial-gradient(circle, ${spotlightColor} 0%, transparent 70%)`,\n          opacity: opacity * glowIntensity * 5,\n        }}\n      />\n\n      {/* Border glow on hover */}\n      <div\n        className=\"absolute inset-0 pointer-events-none transition-opacity duration-500\"\n        style={{\n          borderRadius: `${borderRadius}px`,\n          opacity: isHovered ? 0.5 : 0,\n          boxShadow: `inset 0 0 30px rgba(120, 119, 198, 0.1), 0 0 30px rgba(120, 119, 198, 0.1)`,\n        }}\n      />\n\n      {/* Content */}\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  )\n}\n\ninterface SpotlightCardContentProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nfunction SpotlightCardContent({\n  children,\n  className,\n  ...props\n}: SpotlightCardContentProps) {\n  return (\n    <div className={cn(\"p-6\", className)} {...props}>\n      {children}\n    </div>\n  )\n}\n\ninterface SpotlightCardHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nfunction SpotlightCardHeader({\n  children,\n  className,\n  ...props\n}: SpotlightCardHeaderProps) {\n  return (\n    <div className={cn(\"flex flex-col space-y-1.5 p-6 pb-0\", className)} {...props}>\n      {children}\n    </div>\n  )\n}\n\ninterface SpotlightCardTitleProps\n  extends React.HTMLAttributes<HTMLHeadingElement> {\n  children: React.ReactNode\n}\n\nfunction SpotlightCardTitle({\n  children,\n  className,\n  ...props\n}: SpotlightCardTitleProps) {\n  return (\n    <h3\n      className={cn(\n        \"text-xl font-semibold leading-none tracking-tight\",\n        \"text-neutral-900 dark:text-white\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </h3>\n  )\n}\n\ninterface SpotlightCardDescriptionProps\n  extends React.HTMLAttributes<HTMLParagraphElement> {\n  children: React.ReactNode\n}\n\nfunction SpotlightCardDescription({\n  children,\n  className,\n  ...props\n}: SpotlightCardDescriptionProps) {\n  return (\n    <p\n      className={cn(\"text-sm text-neutral-600 dark:text-neutral-400\", className)}\n      {...props}\n    >\n      {children}\n    </p>\n  )\n}\n\n// A more advanced variant with multiple spotlight sources\ninterface MultiSpotlightCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  colors?: string[]\n  borderRadius?: number\n}\n\nfunction MultiSpotlightCard({\n  children,\n  className,\n  colors = [\n    \"rgba(120, 119, 198, 0.4)\",\n    \"rgba(255, 77, 77, 0.3)\",\n    \"rgba(77, 255, 174, 0.3)\",\n  ],\n  borderRadius = 16,\n  ...props\n}: MultiSpotlightCardProps) {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const [position, setPosition] = React.useState({ x: 0, y: 0 })\n  const [isHovered, setIsHovered] = React.useState(false)\n\n  const handleMouseMove = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!containerRef.current) return\n\n      const rect = containerRef.current.getBoundingClientRect()\n      setPosition({\n        x: e.clientX - rect.left,\n        y: e.clientY - rect.top,\n      })\n    },\n    []\n  )\n\n  return (\n    <div\n      ref={containerRef}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className={cn(\n        \"relative overflow-hidden\",\n        \"bg-white dark:bg-neutral-950\",\n        \"border border-neutral-200 dark:border-neutral-800\",\n        \"transition-all duration-500\",\n        className\n      )}\n      style={{ borderRadius: `${borderRadius}px` }}\n      {...props}\n    >\n      {/* Multiple spotlight layers */}\n      {colors.map((color, index) => (\n        <div\n          key={index}\n          className=\"absolute pointer-events-none transition-opacity duration-500\"\n          style={{\n            left: position.x + (index - 1) * 50,\n            top: position.y + (index - 1) * 50,\n            width: \"300px\",\n            height: \"300px\",\n            transform: \"translate(-50%, -50%)\",\n            background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,\n            opacity: isHovered ? 1 : 0,\n            filter: \"blur(40px)\",\n          }}\n        />\n      ))}\n\n      {/* Content */}\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  )\n}\n\n// Beam spotlight effect - creates a beam of light that follows cursor\ninterface BeamSpotlightCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  beamColor?: string\n  beamWidth?: number\n  borderRadius?: number\n}\n\nfunction BeamSpotlightCard({\n  children,\n  className,\n  beamColor = \"rgba(120, 119, 198, 0.5)\",\n  beamWidth = 200,\n  borderRadius = 16,\n  ...props\n}: BeamSpotlightCardProps) {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const [position, setPosition] = React.useState({ x: 0, y: 0 })\n  const [isHovered, setIsHovered] = React.useState(false)\n\n  const handleMouseMove = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!containerRef.current) return\n\n      const rect = containerRef.current.getBoundingClientRect()\n      setPosition({\n        x: e.clientX - rect.left,\n        y: e.clientY - rect.top,\n      })\n    },\n    []\n  )\n\n  return (\n    <div\n      ref={containerRef}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className={cn(\n        \"relative overflow-hidden\",\n        \"bg-white dark:bg-neutral-950\",\n        \"border border-neutral-200 dark:border-neutral-800\",\n        \"transition-all duration-500\",\n        className\n      )}\n      style={{ borderRadius: `${borderRadius}px` }}\n      {...props}\n    >\n      {/* Vertical beam */}\n      <div\n        className=\"absolute pointer-events-none transition-all duration-150\"\n        style={{\n          left: position.x - beamWidth / 2,\n          top: 0,\n          width: `${beamWidth}px`,\n          height: \"100%\",\n          background: `linear-gradient(90deg, transparent, ${beamColor}, transparent)`,\n          opacity: isHovered ? 0.6 : 0,\n          filter: \"blur(20px)\",\n        }}\n      />\n\n      {/* Horizontal beam */}\n      <div\n        className=\"absolute pointer-events-none transition-all duration-150\"\n        style={{\n          left: 0,\n          top: position.y - beamWidth / 2,\n          width: \"100%\",\n          height: `${beamWidth}px`,\n          background: `linear-gradient(180deg, transparent, ${beamColor}, transparent)`,\n          opacity: isHovered ? 0.4 : 0,\n          filter: \"blur(20px)\",\n        }}\n      />\n\n      {/* Intersection glow */}\n      <div\n        className=\"absolute pointer-events-none transition-all duration-150\"\n        style={{\n          left: position.x,\n          top: position.y,\n          width: \"100px\",\n          height: \"100px\",\n          transform: \"translate(-50%, -50%)\",\n          background: `radial-gradient(circle, ${beamColor} 0%, transparent 70%)`,\n          opacity: isHovered ? 1 : 0,\n        }}\n      />\n\n      {/* Content */}\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  )\n}\n\n// Gradient follow card - the background gradient follows the cursor\ninterface GradientFollowCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  gradientColors?: [string, string, string]\n  borderRadius?: number\n}\n\nfunction GradientFollowCard({\n  children,\n  className,\n  gradientColors = [\"#7877c6\", \"#5eead4\", \"#f472b6\"],\n  borderRadius = 16,\n  ...props\n}: GradientFollowCardProps) {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const [position, setPosition] = React.useState({ x: 50, y: 50 })\n  const [isHovered, setIsHovered] = React.useState(false)\n\n  const handleMouseMove = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!containerRef.current) return\n\n      const rect = containerRef.current.getBoundingClientRect()\n      const x = ((e.clientX - rect.left) / rect.width) * 100\n      const y = ((e.clientY - rect.top) / rect.height) * 100\n      setPosition({ x, y })\n    },\n    []\n  )\n\n  return (\n    <div\n      ref={containerRef}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className={cn(\n        \"relative overflow-hidden\",\n        \"transition-all duration-500\",\n        className\n      )}\n      style={{ borderRadius: `${borderRadius}px` }}\n      {...props}\n    >\n      {/* Animated gradient background */}\n      <div\n        className=\"absolute inset-0 transition-opacity duration-500\"\n        style={{\n          background: `\n            radial-gradient(\n              600px circle at ${position.x}% ${position.y}%,\n              ${gradientColors[0]}40,\n              transparent 40%\n            ),\n            radial-gradient(\n              400px circle at ${position.x + 10}% ${position.y - 10}%,\n              ${gradientColors[1]}30,\n              transparent 40%\n            ),\n            radial-gradient(\n              300px circle at ${position.x - 10}% ${position.y + 10}%,\n              ${gradientColors[2]}20,\n              transparent 40%\n            )\n          `,\n          opacity: isHovered ? 1 : 0.3,\n        }}\n      />\n\n      {/* Base background */}\n      <div\n        className=\"absolute inset-0 bg-white/90 dark:bg-neutral-950/90\"\n        style={{ borderRadius: `${borderRadius}px` }}\n      />\n\n      {/* Border */}\n      <div\n        className=\"absolute inset-0 pointer-events-none transition-opacity duration-500\"\n        style={{\n          borderRadius: `${borderRadius}px`,\n          border: \"1px solid\",\n          borderColor: isHovered\n            ? \"rgba(255, 255, 255, 0.2)\"\n            : \"rgba(255, 255, 255, 0.1)\",\n        }}\n      />\n\n      {/* Content */}\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  )\n}\n\n// Tilt card with 3D perspective\ninterface TiltSpotlightCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  maxTilt?: number\n  perspective?: number\n  scale?: number\n  borderRadius?: number\n  glareOpacity?: number\n  spotlightColor?: string\n}\n\nfunction TiltSpotlightCard({\n  children,\n  className,\n  maxTilt = 10,\n  perspective = 1000,\n  scale = 1.02,\n  borderRadius = 16,\n  glareOpacity = 0.2,\n  spotlightColor = \"rgba(120, 119, 198, 0.3)\",\n  ...props\n}: TiltSpotlightCardProps) {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const [transform, setTransform] = React.useState({\n    rotateX: 0,\n    rotateY: 0,\n    scale: 1,\n  })\n  const [glarePosition, setGlarePosition] = React.useState({ x: 50, y: 50 })\n  const [spotlightPosition, setSpotlightPosition] = React.useState({ x: 0, y: 0 })\n  const [isHovered, setIsHovered] = React.useState(false)\n\n  const handleMouseMove = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!containerRef.current) return\n\n      const rect = containerRef.current.getBoundingClientRect()\n      const centerX = rect.width / 2\n      const centerY = rect.height / 2\n      const mouseX = e.clientX - rect.left\n      const mouseY = e.clientY - rect.top\n\n      const rotateY = ((mouseX - centerX) / centerX) * maxTilt\n      const rotateX = -((mouseY - centerY) / centerY) * maxTilt\n\n      setTransform({ rotateX, rotateY, scale })\n      setGlarePosition({\n        x: (mouseX / rect.width) * 100,\n        y: (mouseY / rect.height) * 100,\n      })\n      setSpotlightPosition({\n        x: mouseX,\n        y: mouseY,\n      })\n    },\n    [maxTilt, scale]\n  )\n\n  const handleMouseLeave = React.useCallback(() => {\n    setTransform({ rotateX: 0, rotateY: 0, scale: 1 })\n    setIsHovered(false)\n  }, [])\n\n  return (\n    <div\n      ref={containerRef}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={handleMouseLeave}\n      className={cn(\n        \"relative overflow-hidden\",\n        \"bg-white dark:bg-neutral-950\",\n        \"border border-neutral-200 dark:border-neutral-800\",\n        \"transition-[border-color] duration-500\",\n        isHovered && \"border-neutral-300 dark:border-neutral-700\",\n        className\n      )}\n      style={{\n        borderRadius: `${borderRadius}px`,\n        perspective: `${perspective}px`,\n        transform: `\n          perspective(${perspective}px)\n          rotateX(${transform.rotateX}deg)\n          rotateY(${transform.rotateY}deg)\n          scale(${transform.scale})\n        `,\n        transition: isHovered\n          ? \"transform 0.1s ease-out\"\n          : \"transform 0.5s ease-out\",\n      }}\n      {...props}\n    >\n      {/* Glare effect */}\n      <div\n        className=\"absolute inset-0 pointer-events-none transition-opacity duration-300\"\n        style={{\n          background: `\n            radial-gradient(\n              circle at ${glarePosition.x}% ${glarePosition.y}%,\n              rgba(255, 255, 255, ${glareOpacity}) 0%,\n              transparent 50%\n            )\n          `,\n          opacity: isHovered ? 1 : 0,\n        }}\n      />\n\n      {/* Spotlight effect */}\n      <div\n        className=\"absolute pointer-events-none transition-opacity duration-300\"\n        style={{\n          left: spotlightPosition.x,\n          top: spotlightPosition.y,\n          width: \"400px\",\n          height: \"400px\",\n          transform: \"translate(-50%, -50%)\",\n          background: `radial-gradient(circle, ${spotlightColor} 0%, transparent 70%)`,\n          opacity: isHovered ? 0.4 : 0,\n          filter: \"blur(20px)\",\n        }}\n      />\n\n      {/* Content */}\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  )\n}\n\nexport {\n  SpotlightCard,\n  SpotlightCardContent,\n  SpotlightCardHeader,\n  SpotlightCardTitle,\n  SpotlightCardDescription,\n  MultiSpotlightCard,\n  BeamSpotlightCard,\n  GradientFollowCard,\n  TiltSpotlightCard,\n}\n"
    }
  ],
  "tailwind": {},
  "cssVars": {},
  "meta": {}
}