"use client"; import { useRef, useState } from "react"; import { motion, useMotionValue, useMotionTemplate } from "framer-motion"; import { cn } from "@/lib/utils"; export function SpotlightCard({ children, className, spotlightColor = "rgba(124, 108, 255, 0.18)", }: { children: React.ReactNode; className?: string; spotlightColor?: string; }) { const ref = useRef(null); const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const [hovering, setHovering] = useState(false); function onMouseMove(e: React.MouseEvent) { const rect = ref.current?.getBoundingClientRect(); if (!rect) return; mouseX.set(e.clientX - rect.left); mouseY.set(e.clientY - rect.top); } const background = useMotionTemplate`radial-gradient(320px circle at ${mouseX}px ${mouseY}px, ${spotlightColor}, transparent 80%)`; return (

setHovering(true)} onMouseLeave={() => setHovering(false)} className={cn( "group relative overflow-hidden rounded-2xl border border-line bg-panel p-8", className )} >

{children}

); } export default function Demo() { return (

✦

Spotlight that follows you

Move your cursor across this card. A soft radial spotlight tracks it, giving every panel a premium, tactile feel.

); }

Spotlight Card

Spotlight that follows you