Gradient Wave Text

1"use client";
2 
3import { useRef, useEffect, useMemo, useCallback, useState } from "react";
4import { cn } from "@/lib/utils";
5 
6type Align = "left" | "center" | "right";
7 
8const defaultColors = ["#8d6869", "#5a8ea6", "#b9c96e", "#c7c571", "#cb706f", "#7e5e5f"];
9 
10interface GradientWaveTextProps {
11  children?: React.ReactNode;
12  align?: Align;
13  className?: string;
14 
15  speed?: number; 
16  paused?: boolean;
17  delay?: number;
18  repeat?: boolean;
19  inView?: boolean;
20  once?: boolean;
21 
22  radial?: boolean;
23  bottomOffset?: number;
24  bandGap?: number;
25  bandCount?: number;
26  customColors?: string[];
27 
28  onClick?: (e: React.MouseEvent) => void;
29  onMouseEnter?: (e: React.MouseEvent) => void;
30  onMouseLeave?: (e: React.MouseEvent) => void;
31 
32  ariaLabel?: string;
33}
34 
35 
36export function GradientWaveText({
37  children,
38  align = "center",
39  className,
40 
41  speed = 1,
42  paused = false,
43  delay = 0,
44  repeat = false,
45  inView = false,
46  once = true,
47 
48  radial = true,
49  bottomOffset = 20,
50  bandGap = 4,
51  bandCount = 8,
52  customColors,
53 
54  onClick,
55  onMouseEnter,
56  onMouseLeave,
57 
58  ariaLabel,
59}: GradientWaveTextProps) {
60  const elRef = useRef<HTMLDivElement | null>(null);
61  const rafRef = useRef(0);
62  const tRef = useRef(0);
63  const cyclesDoneRef = useRef(0);
64  const finishedRef = useRef(false);
65  const startedRef = useRef(false);
66  const startAtRef = useRef(0);
67  const hasPlayedRef = useRef(false);
68 
69  const [isInView, setIsInView] = useState(!inView);
70 
71  const cycles = repeat ? 0 : 1;
72 
73  useEffect(() => {
74    if (!inView) {
75      setIsInView(true);
76      return;
77    }
78 
79    const node = elRef.current;
80    if (!node) return;
81 
82    const observer = new IntersectionObserver(
83      (entries) => {
84        entries.forEach((entry) => {
85          if (entry.isIntersecting) {
86            if (once && hasPlayedRef.current) return;
87            setIsInView(true);
88            hasPlayedRef.current = true;
89          } else if (!once) {
90            setIsInView(false);
91          }
92        });
93      },
94      { threshold: 0.1 }
95    );
96 
97    observer.observe(node);
98    return () => observer.disconnect();
99  }, [inView, once]);
100 
101  const resolvedColors = useMemo(() => {
102    return customColors?.length ? customColors : defaultColors;
103  }, [customColors]);
104 
105  const stops = useMemo(() => {
106    const arr: string[] = [];
107    const baseColor = "var(--gradient-wave-base, rgb(29,29,31))";
108    arr.push(`${baseColor} calc((var(--gi) + 0) * 1%)`);
109    for (let i = 0; i < bandCount && i < resolvedColors.length * 2; i++) {
110// … truncated