Cursor Following Effects
Following Blur Circle
Move your cursor
Blur follows mouse
Multiple Followers (Trail Effect)
Trail effect
Multiple blur circles
Create interactive cursor-following effects using backdrop-filter that respond to mouse movement.
const [position, setPosition] = useState({ x: 0, y: 0 });
useEffect(() => {
const handleMouseMove = (e) => {
setPosition({ x: e.clientX, y: e.clientY });
};
window.addEventListener("mousemove", handleMouseMove);
}, []);
backdrop-filter: blur(25px);
left: ${position.x}px;
top: ${position.y}px;
/* Cursor following backdrop-filter */Move your cursor
Blur follows mouse
Trail effect
Multiple blur circles