Mouse Wave Text

1"use client";
2 
3import { ComponentProps, ReactNode, useRef } from "react";
4 
5import { useGSAP } from "@gsap/react";
6import gsap from "gsap";
7 
8import { cn } from "@/lib/utils";
9 
10type MouseWaveTextProps = {
11    children: ReactNode;
12    className?: string;
13    shadowClassName?: string;
14    textClassName?: string;
15    wrapperTweenVars?: gsap.TweenVars;
16} & ComponentProps<"div">;
17 
18export const MouseWaveText = ({
19    children,
20    textClassName,
21    className,
22    shadowClassName,
23    wrapperTweenVars,
24    ...props
25}: MouseWaveTextProps) => {
26    const wrapperRef = useRef<HTMLDivElement | null>(null);
27    const textRef = useRef<HTMLParagraphElement | null>(null);
28    const shadowRef = useRef<HTMLParagraphElement | null>(null);
29 
30    useGSAP(
31        () => {
32            if (!wrapperRef.current || !shadowRef.current || !textRef.current) return;
33            const textContent = shadowRef.current.textContent;
34            const bb = shadowRef.current.getBoundingClientRect();
35 
36            for (let i = 0; i <= bb.width * 0.55; i++) {
37                const div = document.createElement("div");
38                textRef.current.append(div);
39                gsap.set(div, {
40                    position: "absolute",
41                    width: 4,
42                    height: bb.height,
43                    x: i * 2,
44                    y: -bb.height,
45                    textIndent: -i * 2,
46                    overflow: "hidden",
47                    textContent: textContent,
48                });
49            }
50 
51            if (wrapperTweenVars) gsap.set(wrapperRef.current, wrapperTweenVars);
52 
53            const tl = gsap
54                .timeline({
55                    paused: true,
56                    defaults: { duration: 0.25, ease: "power3.inOut", yoyoEase: "sine.inOut" },
57                })
58                .to(textRef.current.children, {
59                    y: "-=30",
60                    stagger: {
61                        amount: 1,
62                        yoyo: true,
63                        repeat: 1,
64                        ease: "none",
65                    },
66                });
67 
68            gsap.timeline()
69                .fromTo(tl, { progress: 0.9 }, { duration: 1.5, progress: 0.1, ease: "power2.inOut" })
70                .to(tl, { duration: 4, progress: 0.4, ease: "elastic.out(0.8)" });
71 
72            const onMove = (e: MouseEvent) => {
73                const xp = e.x / window.innerWidth;
74                gsap.to(tl, { progress: xp, overwrite: true });
75// … truncated