Liquid Cursor

1"use client";
2 
3import { ComponentProps, useRef } from "react";
4 
5import { useGSAP } from "@gsap/react";
6import gsap from "gsap";
7 
8import { cn } from "@/lib/utils";
9 
10type LiquidCursorProps = Omit<ComponentProps<"div">, "children"> & {
11    size?: number;
12    strong?: boolean;
13};
14 
15export const LiquidCursor = ({ size = 40, strong = false, className, ...props }: LiquidCursorProps) => {
16    const cursorRef = useRef<HTMLDivElement>(null);
17    const prevPos = useRef({ x: 0, y: 0 });
18    const prevAngle = useRef(0);
19 
20    useGSAP(() => {
21        const clickDrop = () => {
22            if (!cursorRef.current) return;
23 
24            gsap.to(cursorRef.current, {
25                scale: 1.3,
26                duration: 0.3,
27                ease: "power2.out",
28                onComplete: () => {
29                    gsap.to(cursorRef.current, {
30                        scale: 1,
31                        duration: 0.4,
32                        ease: "bounce.out",
33                    });
34                },
35            });
36        };
37        const moveDrop = (e: MouseEvent) => {
38            if (!cursorRef.current) return;
39 
40            const dx = e.clientX - prevPos.current.x;
41            const dy = e.clientY - prevPos.current.y;
42 
43            const distance = Math.sqrt(dx * dx + dy * dy);
44            const angle = Math.atan2(dy, dx) * (180 / Math.PI);
45 
46            let delta = angle - prevAngle.current;
47            if (delta > 180) delta -= 360;
48            if (delta < -180) delta += 360;
49 
50            const smoothingFactor = 0.2;
51            const smoothAngle = prevAngle.current + delta * smoothingFactor;
52 
53            const maxStretch = 1.2;
54            const stretch = Math.min(distance / 30, maxStretch);
55 
56            const absDx = Math.abs(dx);
57            const absDy = Math.abs(dy);
58            const total = absDx + absDy || 1;
59            const xRatio = absDx / total;
60 
61            const scaleX = 1 + xRatio * stretch;
62            const scaleY = 1 - xRatio * stretch * 0.3;
63 
64            gsap.to(cursorRef.current, {
65                duration: 1,
66                left: e.clientX - size / 2,
67                top: e.clientY - size / 2,
68                scaleX,
69                scaleY,
70                rotate: smoothAngle,
71                ease: "power2.out",
72            });
73 
74            prevAngle.current = smoothAngle;
75            prevPos.current = { x: e.clientX, y: e.clientY };
76        };
77 
78        window.addEventListener("click", clickDrop);
79 
80// … truncated