Mouse Spotlight

1npm install framer-motion clsx tailwind-merge

1"use client";
2
3import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
4import { cn } from "@/lib/utils";
5
6export default function MouseSpotlight({ children, className }) {
7  const mouseX = useMotionValue(0);
8  const mouseY = useMotionValue(0);
9
10  function handleMouseMove({ currentTarget, clientX, clientY }) {
11    const { left, top } = currentTarget.getBoundingClientRect();
12    mouseX.set(clientX - left);
13    mouseY.set(clientY - top);
14  }
15
16  return (
17    <div
18      className={cn(
19        "group relative flex min-h-[400px] w-full items-center justify-center overflow-hidden rounded-2xl bg-[#09090b] border border-white/10",
20        className
21      )}
22      onMouseMove={handleMouseMove}
23    >
24      {/* The Spotlight */}
25      <motion.div
26        className="pointer-events-none absolute -inset-px rounded-xl opacity-0 transition duration-300 group-hover:opacity-100"
27        style={{
28          background: useMotionTemplate`
29            radial-gradient(
30              600px circle at ${mouseX}px ${mouseY}px,
31              rgba(255,255,255,0.1),
32              transparent 40%
33            )
34          `,
35        }}
36      />
37      
38      {/* Grid background for texture */}
39      <div className="absolute inset-0 bg-[url('/grid.svg')] bg-center opacity-20" />
40
41      <div className="relative z-10 glass-panel px-8 py-10 rounded-2xl text-center max-w-md">
42        <h3 className="text-2xl font-bold text-white mb-2">Hover over me</h3>
43        <p className="text-gray-400">
44          The spotlight follows your mouse cursor, revealing the texture and illuminating the edges of the card.
45        </p>
46      </div>
47    </div>
48  );
49}
50