Animated TextGenerate

1'use client';
2 
3import Link from 'next/link';
4import { useEffect, useState } from 'react';
5import { motion } from 'motion/react';
6import { cn } from '@/lib/utils';
7 
8interface AnimatedTextGenerateProps {
9  text: string;
10  className?: string;
11  textClassName?: string;
12  blurEffect?: boolean;
13  speed?: number;
14  highlightWords?: string[];
15  highlightClassName?: string;
16  linkWords?: string[];
17  linkHrefs?: string[];
18  linkClassNames?: string[];
19}
20 
21export const AnimatedTextGenerate = ({
22  text,
23  className,
24  textClassName,
25  blurEffect = true,
26  speed = 0.5,
27  highlightWords = [],
28  highlightClassName,
29  linkWords = [],
30  linkHrefs = [],
31  linkClassNames = [],
32}: AnimatedTextGenerateProps) => {
33  const [currentText, setCurrentText] = useState(text);
34  const [visibleCount, setVisibleCount] = useState(0);
35  const splitWords = text.split(' ');
36 
37  if (currentText !== text) {
38    setCurrentText(text);
39    setVisibleCount(0);
40  }
41 
42  useEffect(() => {
43    const intervalId = setInterval(
44      () => {
45        setVisibleCount((prev) => {
46          if (prev >= splitWords.length) {
47            clearInterval(intervalId);
48            return prev;
49          }
50          return prev + 1;
51        });
52      },
53      Math.max(speed * 200, 100),
54    );
55 
56    return () => clearInterval(intervalId);
57  }, [speed, splitWords.length]);
58 
59  const generateWords = () => {
60    return (
61      <div className='flex flex-wrap items-center gap-1'>
62        {splitWords.map((word, idx) => {
63          const isVisible = idx < visibleCount;
64          const remaining = splitWords.length - visibleCount;
65          let capsuleCount = 4;
66          if (remaining <= 2) capsuleCount = remaining;
67          else if (remaining <= 4) capsuleCount = Math.min(3, remaining);
68          else if (visibleCount === 0) capsuleCount = 2;
69          else if (visibleCount < 3) capsuleCount = 3;
70 
71          const isUpcoming =
72            idx >= visibleCount && idx < visibleCount + capsuleCount;
73          const isHighlight =
74            highlightWords.length > 0 &&
75            highlightWords.some((hw) =>
76              word.toLowerCase().includes(hw.toLowerCase()),
77            );
78          const linkIndex = linkWords.findIndex((lw) =>
79            word.toLowerCase().includes(lw.toLowerCase()),
80          );
81          const isLink = linkIndex !== -1;
82 
83          if (isVisible) {
84            const wordElement = (
85              <motion.span
86                key={`${word}-${idx}`}
87                initial={{
88                  opacity: 0,
89// … truncated