diff --git a/src/components/cursor/CustomCursor.tsx b/src/components/cursor/CustomCursor.tsx new file mode 100644 index 0000000..d497c97 --- /dev/null +++ b/src/components/cursor/CustomCursor.tsx @@ -0,0 +1,91 @@ +"use client"; + +import { useEffect, useRef } from "react"; + +const CustomCursor = () => { + const cursorRef = useRef(null); + const followerRef = useRef(null); + const mousePosition = useRef({ x: 0, y: 0 }); + const followerPosition = useRef({ x: 0, y: 0 }); + + useEffect(() => { + const handleMouseMove = (e: MouseEvent) => { + mousePosition.current = { x: e.clientX, y: e.clientY }; + + if (cursorRef.current) { + cursorRef.current.style.left = `${e.clientX}px`; + cursorRef.current.style.top = `${e.clientY}px`; + } + }; + + const animateFollower = () => { + const dx = + mousePosition.current.x - followerPosition.current.x; + const dy = + mousePosition.current.y - followerPosition.current.y; + + followerPosition.current.x += dx * 0.15; + followerPosition.current.y += dy * 0.15; + + if (followerRef.current) { + followerRef.current.style.left = `${followerPosition.current.x}px`; + followerRef.current.style.top = `${followerPosition.current.y}px`; + } + + requestAnimationFrame(animateFollower); + }; + + const handleMouseEnter = () => { + if (cursorRef.current) { + cursorRef.current.style.opacity = "1"; + } + if (followerRef.current) { + followerRef.current.style.opacity = "1"; + } + }; + + const handleMouseLeave = () => { + if (cursorRef.current) { + cursorRef.current.style.opacity = "0"; + } + if (followerRef.current) { + followerRef.current.style.opacity = "0"; + } + }; + + window.addEventListener("mousemove", handleMouseMove); + window.addEventListener("mouseenter", handleMouseEnter); + window.addEventListener("mouseleave", handleMouseLeave); + animateFollower(); + + return () => { + window.removeEventListener("mousemove", handleMouseMove); + window.removeEventListener("mouseenter", handleMouseEnter); + window.removeEventListener("mouseleave", handleMouseLeave); + }; + }, []); + + return ( + <> +
+
+ + + ); +}; + +export default CustomCursor;