Demo Hover HereMake your card components cooler with this spotlight effect on hover Code Spotlight.tsximport { MouseEvent } from 'react' import { motion, useMotionTemplate, useMotionValue } from 'framer-motion' const SpotlightDemo = () => { let mouseX = useMotionValue(0) let mouseY = useMotionValue(0) function handleMouseMove({ currentTarget, clientX, clientY }: MouseEvent) { let { left, top } = currentTarget.getBoundingClientRect() mouseX.set(clientX - left) mouseY.set(clientY - top) } return ( <div className="group relative h-auto w-full max-w-sm overflow-hidden rounded-xl border bg-card p-4" onMouseMove={handleMouseMove} > <motion.div className="pointer-events-none absolute -inset-px opacity-0 transition duration-300 group-hover:opacity-100" style={{ background: useMotionTemplate` radial-gradient( 300px circle at ${mouseX}px ${mouseY}px, #c084fc30 0%, transparent 80% ) `, }} /> <div className="flex flex-col gap-3"> <h3 className="text-2xl font-bold">Spotlight</h3> <p> Make your card components cooler with this spotlight effect on hover </p> </div> </div> ) }