Cursor

1"use client";
2 
3import { useEffect, useRef, useState } from "react";
4 
5import { cn } from "@/lib/utils";
6import { motion } from "framer-motion";
7 
8type CursorProps = {
9  cursorClass?: string;
10};
11 
12type Position = {
13  x: number;
14  y: number;
15};
16 
17type TrailerType = "default" | "video";
18 
19export const Cursor = ({ cursorClass }: CursorProps) => {
20  const [trailerType, setTrailerType] = useState<TrailerType>("default");
21  const [isInteracting, setIsInteracting] = useState(false);
22  const [isClicked, setIsClicked] = useState(false);
23 
24  const position:Position = {
25    x: 0,
26    y: 0,
27  };
28  const cursorRef = useRef<HTMLDivElement>(null);
29 
30  const animateTrailer = (e: MouseEvent) => {
31    if (!cursorRef.current) return;
32 
33    const x = e.clientX - cursorRef.current.offsetWidth / 2;
34    const y = e.clientY - cursorRef.current.offsetHeight / 2;
35 
36    const keyframes = {
37      transform: `translate(${x}px, ${y}px) scale(${isInteracting ? 3 : 1})`,
38    };
39 
40    cursorRef.current.animate(keyframes, {
41      duration: 100,
42      fill: "forwards",
43    });
44  };
45 
46  useEffect(() => {
47    const handleMouseMove = (e: MouseEvent) => {
48      const interactable = (e.target as HTMLElement).closest(".interactable");
49      const interacting = interactable !== null;
50 
51      animateTrailer(e);
52 
53      setTrailerType(interacting ? (interactable as HTMLElement).dataset.type as TrailerType : "default");
54      setIsInteracting(interacting);
55    };
56 
57    window.addEventListener("mousemove", handleMouseMove);
58 
59    return () => {
60      window.removeEventListener("mousemove", handleMouseMove);
61    };
62  }, [isInteracting]);
63 
64  useEffect(() => {
65    const handleClick = () => {
66      setIsClicked(true);
67      setTimeout(() => {
68        setIsClicked(false);
69      }, 100);
70    };
71 
72    window.addEventListener("click", handleClick);
73 
74    return () => {
75      window.removeEventListener("click", handleClick);
76    };
77  }, []);
78 
79  return (
80    <motion.div
81      whileTap={{ scale: 0.9 }}
82      id="trailer"
83      style={{ top: `${position.y}px`, left: `${position.x}px` }}
84      className={cn(
85        "bg-transparent rounded-full fixed z-50 pointer-events-none border-[3px] border-slate-500 border-solid w-10 h-10 transition-all",
86        cursorClass,
87        isClicked && "w-8 h-8"
88      )}
89      data-type={trailerType}
90      ref={cursorRef}
91    />
92  );
93};