Scramble Text

1"use client";
2 
3import { ComponentProps, useEffect, useRef } from "react";
4 
5import { useGSAP } from "@gsap/react";
6import gsap from "gsap";
7import { ScrambleTextPlugin } from "gsap/ScrambleTextPlugin";
8 
9gsap.registerPlugin(ScrambleTextPlugin);
10 
11type ScrambleTextProps = {
12    random?: boolean;
13    scrambleOnLoad?: boolean;
14} & ComponentProps<"div">;
15 
16const defaultChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
17 
18export const ScrambleText = ({ scrambleOnLoad = true, random = true, ...props }: ScrambleTextProps) => {
19    const wrapperRef = useRef<HTMLDivElement | null>(null);
20 
21    const { contextSafe } = useGSAP();
22 
23    const scramble = contextSafe(() => {
24        const target = wrapperRef.current;
25        if (gsap.isTweening(target) || !target) return;
26        gsap.to(target, {
27            duration: 1,
28            ease: "sine.in",
29            scrambleText: {
30                text: target.innerText,
31                speed: 2,
32                chars: random ? defaultChars : target.innerText.replace(/\s/g, ""),
33            },
34        });
35    });
36 
37    useEffect(() => {
38        if (scrambleOnLoad) scramble();
39        const target = wrapperRef.current;
40        target?.addEventListener("pointerenter", scramble);
41        return () => target?.removeEventListener("pointerenter", scramble);
42    }, [wrapperRef, scramble, scrambleOnLoad]);
43 
44    return <div {...props} ref={wrapperRef} />;
45};