AI Text Loading

1"use client";
2 
3/**
4 * @author: @kokonutui
5 * @description: AI Text Loading
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { AnimatePresence, motion } from "motion/react";
14import { useEffect, useState } from "react";
15import { cn } from "@/lib/utils";
16 
17interface AITextLoadingProps {
18  texts?: string[];
19  className?: string;
20  interval?: number;
21}
22 
23export default function AITextLoading({
24  texts = [
25    "Thinking...",
26    "Processing...",
27    "Analyzing...",
28    "Computing...",
29    "Almost...",
30  ],
31  className,
32  interval = 1500,
33}: AITextLoadingProps) {
34  const [currentTextIndex, setCurrentTextIndex] = useState(0);
35 
36  useEffect(() => {
37    const timer = setInterval(() => {
38      setCurrentTextIndex((prevIndex) => (prevIndex + 1) % texts.length);
39    }, interval);
40 
41    return () => clearInterval(timer);
42  }, [interval, texts.length]);
43 
44  return (
45    <div className="flex items-center justify-center p-8">
46      <motion.div
47        animate={{ opacity: 1 }}
48        className="relative w-full px-4 py-2"
49        initial={{ opacity: 0 }}
50        transition={{ duration: 0.4 }}
51      >
52        <AnimatePresence mode="wait">
53          <motion.div
54            animate={{
55              opacity: 1,
56              y: 0,
57              backgroundPosition: ["200% center", "-200% center"],
58            }}
59            className={cn(
60              "flex min-w-max justify-center whitespace-nowrap bg-[length:200%_100%] bg-gradient-to-r from-neutral-950 via-neutral-400 to-neutral-950 bg-clip-text font-bold text-3xl text-transparent dark:from-white dark:via-neutral-600 dark:to-white",
61              className
62            )}
63            exit={{ opacity: 0, y: -20 }}
64            initial={{ opacity: 0, y: 20 }}
65            key={currentTextIndex}
66            transition={{
67              opacity: { duration: 0.3 },
68              y: { duration: 0.3 },
69              backgroundPosition: {
70                duration: 2.5,
71                ease: "linear",
72                repeat: Number.POSITIVE_INFINITY,
73              },
74            }}
75          >
76            {texts[currentTextIndex]}
77          </motion.div>
78        </AnimatePresence>
79      </motion.div>
80    </div>
81  );
82}