42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { useEffect, useState } from "react"
|
||
|
|
import { motion, useMotionValue, useSpring } from "framer-motion"
|
||
|
|
|
||
|
|
export function CursorGlow() {
|
||
|
|
const [visible, setVisible] = useState(false)
|
||
|
|
const mouseX = useMotionValue(-400)
|
||
|
|
const mouseY = useMotionValue(-400)
|
||
|
|
|
||
|
|
const springX = useSpring(mouseX, { stiffness: 80, damping: 20, mass: 0.5 })
|
||
|
|
const springY = useSpring(mouseY, { stiffness: 80, damping: 20, mass: 0.5 })
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const handler = (e: MouseEvent) => {
|
||
|
|
mouseX.set(e.clientX)
|
||
|
|
mouseY.set(e.clientY)
|
||
|
|
if (!visible) setVisible(true)
|
||
|
|
}
|
||
|
|
window.addEventListener("mousemove", handler, { passive: true })
|
||
|
|
return () => window.removeEventListener("mousemove", handler)
|
||
|
|
}, [visible, mouseX, mouseY])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="pointer-events-none fixed inset-0 z-[10] hidden lg:block overflow-hidden">
|
||
|
|
<motion.div
|
||
|
|
className="absolute rounded-full"
|
||
|
|
style={{
|
||
|
|
width: 500,
|
||
|
|
height: 500,
|
||
|
|
x: springX,
|
||
|
|
y: springY,
|
||
|
|
translateX: "-50%",
|
||
|
|
translateY: "-50%",
|
||
|
|
background: "radial-gradient(circle, rgba(99,102,241,0.07) 0%, rgba(139,92,246,0.04) 40%, transparent 70%)",
|
||
|
|
opacity: visible ? 1 : 0,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|