Spotlight Card

1"use client"
2 
3import * as React from "react"
4import { motion, useMotionValue, useMotionTemplate } from "motion/react"
5import { cn } from "@/registry/wise-ui/lib/utils"
6 
7interface SpotlightCardProps {
8  spotlightColor?: string
9  spotlightSize?: number
10  children: React.ReactNode
11  className?: string
12}
13 
14function SpotlightCard({
15  spotlightColor = "rgba(255,255,255,0.08)",
16  spotlightSize = 200,
17  children,
18  className,
19}: SpotlightCardProps) {
20  const mouseX = useMotionValue(0)
21  const mouseY = useMotionValue(0)
22  const [isHovered, setIsHovered] = React.useState(false)
23 
24  const background = useMotionTemplate`radial-gradient(${spotlightSize}px circle at ${mouseX}px ${mouseY}px, ${spotlightColor}, transparent 80%)`
25 
26  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
27    const rect = e.currentTarget.getBoundingClientRect()
28    mouseX.set(e.clientX - rect.left)
29    mouseY.set(e.clientY - rect.top)
30  }
31 
32  return (
33    <div
34      className={cn(
35        "group relative overflow-hidden rounded-xl border border-border bg-card",
36        className
37      )}
38      onMouseMove={handleMouseMove}
39      onMouseEnter={() => setIsHovered(true)}
40      onMouseLeave={() => setIsHovered(false)}
41    >
42      <motion.div
43        className="pointer-events-none absolute inset-0 z-10 transition-opacity duration-300"
44        style={{ background, opacity: isHovered ? 1 : 0 }}
45      />
46      <div className="relative z-20">{children}</div>
47    </div>
48  )
49}
50SpotlightCard.displayName = "SpotlightCard"
51 
52export { SpotlightCard }
53export type { SpotlightCardProps }