Reveal Text

1"use client";
2 
3import { ComponentProps, useMemo, useRef } from "react";
4 
5import { useGSAP } from "@gsap/react";
6import gsap from "gsap";
7import { SplitText } from "gsap/SplitText";
8 
9type SplitType = "chars" | "words" | "lines";
10 
11type RevealTextProps = {
12    type?: SplitType;
13    gsapVars?: gsap.TweenVars;
14    splitTextVars?: Partial<SplitText.Vars>;
15} & ComponentProps<"div">;
16 
17const defaultGsapVars: Record<SplitType, gsap.TweenVars> = {
18    chars: {
19        x: 150,
20        opacity: 0,
21        duration: 0.7,
22        ease: "power3",
23        stagger: 0.05,
24    },
25    words: {
26        x: 150,
27        opacity: 0,
28        ease: "power3",
29        duration: 1,
30        stagger: 0.2,
31        y: -100,
32        rotation: "random(-80, 80)",
33    },
34    lines: {
35        duration: 1,
36        yPercent: 100,
37        opacity: 0,
38        stagger: 0.4,
39        ease: "expo.out",
40    },
41};
42 
43export const RevealText = ({ type = "chars", gsapVars = {}, splitTextVars = {}, ...props }: RevealTextProps) => {
44    const wrapperRef = useRef<HTMLDivElement | null>(null);
45 
46    const splitType = useMemo(
47        () =>
48            ({
49                chars: "chars,words,lines",
50                words: "words,lines",
51                lines: "lines",
52            })[type],
53        [type],
54    );
55 
56    useGSAP(
57        () => {
58            const element = wrapperRef.current;
59            if (!element) return;
60 
61            const splitText = SplitText.create(element, { type: splitType, ...splitTextVars });
62            gsap.from(splitText[type], {
63                ...defaultGsapVars[type],
64                ...gsapVars,
65            });
66        },
67        { scope: wrapperRef },
68    );
69 
70    return <div {...props} ref={wrapperRef} />;
71};