Text Fall Button

1"use client";
2 
3import { ComponentProps, MouseEvent, useEffect, useRef } from "react";
4 
5import { useGSAP } from "@gsap/react";
6import gsap from "gsap";
7import { SplitText } from "gsap/SplitText";
8 
9import { cn } from "@/lib/utils";
10 
11gsap.registerPlugin(SplitText);
12 
13type TextFallButtonProps = {
14    effectOnHover?: boolean;
15    effectOnLoad?: boolean;
16} & ComponentProps<"button">;
17 
18export const TextFallButton = ({
19    className,
20    children,
21    effectOnHover = true,
22    effectOnLoad = true,
23    ...props
24}: TextFallButtonProps) => {
25    const buttonRef = useRef<HTMLButtonElement | null>(null);
26    const textRef = useRef<HTMLSpanElement | null>(null);
27    const splitTextRef = useRef<SplitText | null>(null);
28    const timelineRef = useRef<gsap.core.Timeline | null>(null);
29 
30    const { contextSafe } = useGSAP();
31 
32    const triggerTextFallEffect = contextSafe(() => {
33        const element = buttonRef.current;
34        const splitText = splitTextRef.current;
35        if (!element || !splitText) return;
36 
37        timelineRef.current?.kill();
38 
39        timelineRef.current = gsap.timeline();
40        gsap.to(splitText.chars, {
41            duration: 0,
42            y: -60,
43        });
44        timelineRef.current
45            .add("start")
46            .to(element, {
47                scale: 0.95,
48                y: 4,
49                duration: 0.1,
50            })
51            .to(element, {
52                scale: 1,
53                y: 0,
54                duration: 0.2,
55            })
56            .to(
57                splitText.chars,
58                {
59                    duration: 1,
60                    y: 0,
61                    stagger: 0.05,
62                    ease: "elastic.out(0.75, 0.25)",
63                },
64                "start",
65            );
66    });
67 
68    useEffect(() => {
69        if (textRef.current)
70            splitTextRef.current = new SplitText(textRef.current, {
71                type: "chars",
72            });
73        if (effectOnLoad) {
74            triggerTextFallEffect();
75        }
76        return () => {
77            splitTextRef.current?.revert();
78            splitTextRef.current = null;
79        };
80    }, [effectOnLoad, triggerTextFallEffect]);
81 
82    const onClick = (e: MouseEvent<HTMLButtonElement>) => {
83        triggerTextFallEffect();
84        props.onClick?.(e);
85    };
86 
87    return (
88        <button
89            {...props}
90            ref={buttonRef}
91            onMouseEnter={() => effectOnHover && triggerTextFallEffect()}
92            onClick={onClick}
93// … truncated