Draw Line Text

1"use client";
2 
3import { ComponentProps, useRef, useState } from "react";
4 
5import { useGSAP } from "@gsap/react";
6import gsap from "gsap";
7 
8type DrawTextProps = {
9    afterFill?: boolean;
10    color?: string;
11    fontSize?: number;
12    letterSpacing?: number;
13    oneByOne?: boolean;
14    strokeWidth?: number;
15    text: string;
16    wordSpacing?: number;
17} & ComponentProps<"svg">;
18 
19export const DrawLineText = ({
20    text,
21    oneByOne = true,
22    afterFill = true,
23    color = "black",
24    fontSize = 40,
25    wordSpacing = 10,
26    strokeWidth = 1,
27    letterSpacing = 0,
28    ...props
29}: DrawTextProps) => {
30    const wrapperRef = useRef<SVGSVGElement | null>(null);
31 
32    const [textDimension, setTextDimension] = useState<{ height: number; width: number }>({ height: 0, width: 0 });
33 
34    useGSAP(
35        () => {
36            const wrapperChildren = wrapperRef.current?.children;
37            if (!wrapperChildren) return;
38            const children = Array.from(wrapperChildren) as SVGTextElement[];
39            let totalWidth = 0;
40            let maxHeight = 0;
41            children.forEach((el, index) => {
42                el.setAttribute("x", totalWidth + "px");
43                const elementWidth = el.getBoundingClientRect().width;
44                const elementHeight = el.getBoundingClientRect().height;
45                if (elementHeight > maxHeight) {
46                    maxHeight = elementHeight;
47                }
48                totalWidth +=
49                    +(elementWidth == 0 ? wordSpacing : elementWidth) +
50                    (children.length - 1 != index ? letterSpacing : 0);
51                const length = el.getComputedTextLength() * 8;
52                el.style.strokeDasharray = length + "px";
53                el.style.strokeDashoffset = length + "px";
54            });
55            setTextDimension({ width: totalWidth, height: maxHeight });
56 
57            const textChildren = children.filter((el) => el.getBoundingClientRect().width != 0);
58 
59            const tl = gsap.timeline();
60            tl.to(textChildren, {
61                strokeDashoffset: 0,
62                duration: 2.5,
63                ease: "linear",
64                stagger: oneByOne ? 0.8 : 0,
65            });
66            if (afterFill) {
67                tl.to(textChildren, {
68                    fillOpacity: 1,
69                    duration: 0.6,
70                    ease: "power4.in",
71                    stagger: {
72                        amount: 0.2,
73                        from: "center",
74// … truncated