gooey-text-morphing

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface GooeyTextProps {
7  texts: string[];
8  morphTime?: number;
9  cooldownTime?: number;
10  className?: string;
11  textClassName?: string;
12}
13 
14export function GooeyText({
15  texts,
16  morphTime = 1,
17  cooldownTime = 0.25,
18  className,
19  textClassName,
20}: GooeyTextProps) {
21  const text1Ref = React.useRef<HTMLSpanElement>(null);
22  const text2Ref = React.useRef<HTMLSpanElement>(null);
23 
24  React.useEffect(() => {
25    let textIndex = texts.length - 1;
26    let time = new Date();
27    let morph = 0;
28    let cooldown = cooldownTime;
29 
30    const setMorph = (fraction: number) => {
31      if (text1Ref.current && text2Ref.current) {
32        text2Ref.current.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
33        text2Ref.current.style.opacity = `${fraction ** 0.4 * 100}%`;
34 
35        fraction = 1 - fraction;
36        text1Ref.current.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
37        text1Ref.current.style.opacity = `${fraction ** 0.4 * 100}%`;
38      }
39    };
40 
41    const doCooldown = () => {
42      morph = 0;
43      if (text1Ref.current && text2Ref.current) {
44        text2Ref.current.style.filter = "";
45        text2Ref.current.style.opacity = "100%";
46        text1Ref.current.style.filter = "";
47        text1Ref.current.style.opacity = "0%";
48      }
49    };
50 
51    const doMorph = () => {
52      morph -= cooldown;
53      cooldown = 0;
54      let fraction = morph / morphTime;
55 
56      if (fraction > 1) {
57        cooldown = cooldownTime;
58        fraction = 1;
59      }
60 
61      setMorph(fraction);
62    };
63 
64    function animate() {
65      requestAnimationFrame(animate);
66      const newTime = new Date();
67      const shouldIncrementIndex = cooldown > 0;
68      const dt = (newTime.getTime() - time.getTime()) / 1000;
69      time = newTime;
70 
71      cooldown -= dt;
72 
73      if (cooldown <= 0) {
74        if (shouldIncrementIndex) {
75          textIndex = (textIndex + 1) % texts.length;
76          if (text1Ref.current && text2Ref.current) {
77            text1Ref.current.textContent =
78              texts[textIndex % texts.length] ?? "";
79            text2Ref.current.textContent =
80              texts[(textIndex + 1) % texts.length] ?? "";
81          }
82        }
83        doMorph();
84      } else {
85        doCooldown();
86      }
87    }
88 
89    animate();
90 
91    return () => {
92      // Cleanup function if needed
93    };
94  }, [texts, morphTime, cooldownTime]);
95 
96  return (
97    <div className={cn("relative", className)}>
98// … truncated