46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
|
"use client";
|
||
|
|
import { useRef, useEffect, FC } from "react";
|
||
|
|
import gsap from "gsap";
|
||
|
|
|
||
|
|
const GSAPCursor: FC = () => {
|
||
|
|
const cursorRef = useRef<HTMLDivElement>(null);
|
||
|
|
|
||
|
|
// For touch devices, return null
|
||
|
|
if (typeof window !== "undefined" && "ontouchstart" in window) return null;
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
// Initialize GSAP animation
|
||
|
|
let xTo = gsap.quickTo(cursorRef.current, "x", {
|
||
|
|
duration: 2,
|
||
|
|
ease: "power2.out",
|
||
|
|
});
|
||
|
|
let yTo = gsap.quickTo(cursorRef.current, "y", {
|
||
|
|
duration: 2,
|
||
|
|
ease: "power2.out",
|
||
|
|
});
|
||
|
|
|
||
|
|
const onMouseMove = (e: MouseEvent) => {
|
||
|
|
xTo(e.clientX);
|
||
|
|
yTo(e.clientY);
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener("mousemove", onMouseMove);
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
window.removeEventListener("mousemove", onMouseMove);
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
ref={cursorRef}
|
||
|
|
className="fixed w-8 h-8 rounded-full border-2 border-dotted border-red-500 bg-transparent pointer-events-none z-50"
|
||
|
|
style={{
|
||
|
|
transform: "translate(-50%, -50%)",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default GSAPCursor;
|