Modal Ability Selector

1"use client";
2 
3import { useRef, useState } from "react";
4 
5import { useGSAP } from "@gsap/react";
6import gsap from "gsap";
7import { MotionPathPlugin } from "gsap/MotionPathPlugin";
8 
9import { cn } from "@/lib/utils";
10 
11gsap.registerPlugin(MotionPathPlugin);
12 
13export const AiTokenCounter = ({ sourceRef, token, className, flyingClassName, ...props }: any) => {
14    const [displayCount, setDisplayCount] = useState(token);
15    const lastToken = useRef(token);
16    const counterRef = useRef<HTMLParagraphElement>(null);
17    const flyingRef = useRef<HTMLParagraphElement>(null);
18 
19    useGSAP(
20        () => {
21            const diff = token - lastToken.current;
22            if (diff === 0 || !sourceRef.current || !counterRef.current || !flyingRef.current) return;
23 
24            const startValue = lastToken.current;
25            lastToken.current = token;
26 
27            const [src, dest, fly] = [
28                sourceRef.current.getBoundingClientRect(),
29                counterRef.current.getBoundingClientRect(),
30                flyingRef.current.getBoundingClientRect(),
31            ];
32 
33            const flyEl = flyingRef.current;
34            flyEl.innerText = `${diff > 0 ? "+" : ""}${diff}`;
35 
36            // Relative Math
37            const start = {
38                x: src.left + src.width / 2 - fly.left - fly.width / 2 - 15,
39                y: src.top + src.height / 2 - fly.top - fly.height / 2,
40            };
41            const end = {
42                x: dest.left + dest.width / 2 - fly.left - fly.width / 2,
43                y: dest.top + dest.height / 2 - fly.top - fly.height / 2,
44            };
45 
46            const tl = gsap.timeline();
47            tl.set(flyEl, { ...start, scale: 0.5, opacity: 0, visibility: "visible" })
48                .to(flyEl, {
49                    duration: 0.6,
50                    ease: "power2.out",
51                    motionPath: { path: [start, { x: (start.x + end.x) / 2, y: Math.min(start.y, end.y) - 20 }, end] },
52                    opacity: 1,
53                    scale: 1,
54                })
55                .to(flyEl, { opacity: 0, scale: 0.5, duration: 0.2 }, "-=0.1")
56                .to(
57                    { val: startValue },
58                    {
59                        val: token,
60                        duration: 0.4,
61                        onUpdate: function () {
62                            setDisplayCount(Math.floor(this.targets()[0].val));
63                        },
64                        onComplete: () => setDisplayCount(token),
65// … truncated