Dot Flow

1"use client";
2 
3import { useEffect, useRef, useState } from "react";
4 
5import { useGSAP } from "@gsap/react";
6import gsap from "gsap";
7 
8import { DotLoader } from "@/components/gsap/dot-loader";
9 
10export type DotFlowProps = {
11    items: {
12        title: string;
13        frames: number[][];
14        duration?: number;
15        repeatCount?: number;
16    }[];
17    isPlaying?: boolean;
18};
19 
20export const DotFlow = ({ items, isPlaying = true }: DotFlowProps) => {
21    const containerRef = useRef<HTMLDivElement>(null);
22    const textRef = useRef<HTMLDivElement>(null);
23    const [index, setIndex] = useState(0);
24    const [textIndex, setTextIndex] = useState(0);
25 
26    const { contextSafe } = useGSAP();
27 
28    useEffect(() => {
29        if (!containerRef.current || !textRef.current) return;
30 
31        const newWidth = textRef.current.offsetWidth + 1;
32 
33        gsap.to(containerRef.current, {
34            width: newWidth,
35            duration: 0.5,
36            ease: "power2.out",
37        });
38    }, [textIndex, items]);
39 
40    useEffect(() => {
41        setIndex(0);
42        setTextIndex(0);
43    }, [items]);
44 
45    const next = contextSafe(() => {
46        const el = containerRef.current;
47        if (!el) return;
48        gsap.to(el, {
49            y: 20,
50            opacity: 0,
51            filter: "blur(8px)",
52            duration: 0.5,
53            ease: "power2.in",
54            onComplete: () => {
55                setTextIndex((prev) => (prev + 1) % items.length);
56                gsap.fromTo(
57                    el,
58                    { y: -20, opacity: 0, filter: "blur(4px)" },
59                    {
60                        y: 0,
61                        opacity: 1,
62                        filter: "blur(0px)",
63                        duration: 0.7,
64                        ease: "power2.out",
65                    },
66                );
67            },
68        });
69 
70        setIndex((prev) => (prev + 1) % items.length);
71    });
72 
73    return (
74        <div className="flex items-center gap-4 rounded bg-black px-4 py-3">
75            <DotLoader
76                frames={items[index]?.frames ?? []}
77                onComplete={next}
78                className="gap-px"
79                isPlaying={isPlaying}
80                repeatCount={items[index]?.repeatCount ?? 1}
81                duration={items[index]?.duration ?? 150}
82                dotClassName="bg-white/15 [&.active]:bg-white size-1"
83            />
84            <div ref={containerRef} className="relative">
85// … truncated