43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export function CursorGlow() {
|
|
const [position, setPosition] = useState({ x: 0, y: 0 });
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleMouseMove = (e: MouseEvent) => {
|
|
setPosition({ x: e.clientX, y: e.clientY });
|
|
if (!visible) setVisible(true);
|
|
};
|
|
|
|
const handleMouseLeave = () => setVisible(false);
|
|
const handleMouseEnter = () => setVisible(true);
|
|
|
|
window.addEventListener('mousemove', handleMouseMove);
|
|
document.body.addEventListener('mouseleave', handleMouseLeave);
|
|
document.body.addEventListener('mouseenter', handleMouseEnter);
|
|
|
|
return () => {
|
|
window.removeEventListener('mousemove', handleMouseMove);
|
|
document.body.removeEventListener('mouseleave', handleMouseLeave);
|
|
document.body.removeEventListener('mouseenter', handleMouseEnter);
|
|
};
|
|
}, [visible]);
|
|
|
|
return (
|
|
<div
|
|
className="pointer-events-none fixed inset-0 z-50 transition-opacity duration-300"
|
|
style={{ opacity: visible ? 1 : 0 }}
|
|
>
|
|
<div
|
|
className="absolute h-[300px] w-[300px] rounded-full bg-blue-500/20 blur-[80px] transition-transform duration-150 ease-out"
|
|
style={{
|
|
transform: `translate(${position.x - 150}px, ${position.y - 150}px)`,
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|