spotlight

import { 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>
  )
}