Squash Text

1"use client";
2 
3import { ComponentProps, useId, useRef } from "react";
4 
5import { useGSAP } from "@gsap/react";
6import gsap from "gsap";
7import { CustomBounce } from "gsap/CustomBounce";
8import { CustomEase } from "gsap/CustomEase";
9import { SplitText } from "gsap/SplitText";
10 
11// Ensure plugins are registered globally
12if (typeof window !== "undefined") {
13    gsap.registerPlugin(CustomEase, CustomBounce, SplitText);
14}
15 
16type SquashTextProps = {
17    repeat?: boolean | number;
18} & ComponentProps<"div">;
19 
20export const SquashText = ({ repeat = true, children, ...props }: SquashTextProps) => {
21    const wrapperRef = useRef<HTMLDivElement | null>(null);
22    const bounceId = useId();
23 
24    // We sanitize the IDs for GSAP ease names
25    const bounceEase = `bounce${bounceId.replace(/:/g, "")}`;
26    const squashEase = `squash${bounceId.replace(/:/g, "")}`;
27 
28    useGSAP(
29        () => {
30            if (!wrapperRef.current) return;
31 
32            // 1. Create the Custom Bounce
33            CustomBounce.create(bounceEase, {
34                strength: 0.6,
35                squash: 1,
36                squashID: squashEase,
37            });
38 
39            // 2. Initialize SplitText
40            const split = new SplitText(wrapperRef.current, { type: "chars" });
41            const chars = split.chars;
42 
43            // 3. Create Timeline
44            const tl = gsap.timeline({
45                defaults: { duration: 1.5, stagger: { amount: 0.1, ease: "sine.in" } },
46                repeat: repeat === true ? -1 : repeat === false ? 0 : repeat,
47            });
48 
49            tl.from(
50                chars,
51                {
52                    duration: 0.6,
53                    opacity: 0,
54                    ease: "power1.inOut",
55                },
56                0,
57            )
58                .from(
59                    chars,
60                    {
61                        y: -100,
62                        ease: bounceEase,
63                    },
64                    0,
65                )
66                .to(
67                    chars,
68                    {
69                        scaleX: 1.5,
70                        scaleY: 0.8,
71                        rotate: () => 15 - 30 * Math.random(),
72                        ease: squashEase,
73                        transformOrigin: "50% 100%",
74                    },
75                    0,
76                );
77 
78            // Cleanup: Revert the split text when component unmounts
79            return () => {
80                split.revert();
81            };
82// … truncated