Cursor Glow

1npm install framer-motion clsx tailwind-merge

1"use client";
2
3import { useEffect, useState } from "react";
4import { motion, useMotionValue, useSpring } from "framer-motion";
5
6export default function CursorGlow({ children }) {
7  const [mounted, setMounted] = useState(false);
8  const cursorX = useMotionValue(-100);
9  const cursorY = useMotionValue(-100);
10  
11  const springConfig = { damping: 25, stiffness: 200, mass: 0.5 };
12  const smoothX = useSpring(cursorX, springConfig);
13  const smoothY = useSpring(cursorY, springConfig);
14
15  useEffect(() => {
16    setMounted(true);
17    const moveCursor = (e) => {
18      cursorX.set(e.clientX - 16); // Center the 32px glow
19      cursorY.set(e.clientY - 16);
20    };
21    
22    window.addEventListener("mousemove", moveCursor);
23    return () => window.removeEventListener("mousemove", moveCursor);
24  }, [cursorX, cursorY]);
25
26  if (!mounted) return null;
27
28  return (
29    <div className="relative w-full h-[400px] bg-[#050505] rounded-2xl overflow-hidden flex flex-col items-center justify-center cursor-none border border-white/5">
30      {/* Background elements */}
31      <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:40px_40px]" />
32      
33      {/* Target area for cursor */}
34      <div className="relative z-10 p-12 text-center pointer-events-none">
35        <h2 className="text-3xl font-bold text-white tracking-wider mb-2">Cursor Glow</h2>
36        <p className="text-gray-400">Move your mouse around this area.</p>
37      </div>
38
39      {/* The Glow Cursor */}
40      <motion.div
41        className="fixed top-0 left-0 w-8 h-8 rounded-full bg-white mix-blend-difference pointer-events-none z-50"
42        style={{
43          x: smoothX,
44          y: smoothY,
45          boxShadow: '0 0 20px 10px rgba(255, 255, 255, 0.5)'
46        }}
47      />
48    </div>
49  );
50}
51