Dynamic Text

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Dynamic Text
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";
15 
16interface Greeting {
17  text: string;
18  language: string;
19}
20 
21const greetings: Greeting[] = [
22  { text: "Hello", language: "English" },
23  { text: "こんにちは", language: "Japanese" },
24  { text: "Bonjour", language: "French" },
25  { text: "Hola", language: "Spanish" },
26  { text: "안녕하세요", language: "Korean" },
27  { text: "Ciao", language: "Italian" },
28  { text: "Hallo", language: "German" },
29  { text: "こんにちは", language: "Japanese" },
30];
31 
32const DynamicText = () => {
33  const [currentIndex, setCurrentIndex] = useState(0);
34  const [isAnimating, setIsAnimating] = useState(true);
35 
36  useEffect(() => {
37    if (!isAnimating) return;
38 
39    const interval = setInterval(() => {
40      setCurrentIndex((prevIndex) => {
41        const nextIndex = prevIndex + 1;
42 
43        if (nextIndex >= greetings.length) {
44          clearInterval(interval);
45          setIsAnimating(false);
46          return prevIndex;
47        }
48 
49        return nextIndex;
50      });
51    }, 300);
52 
53    return () => clearInterval(interval);
54  }, [isAnimating]);
55 
56  // Animation variants for the text
57  const textVariants = {
58    hidden: { y: 20, opacity: 0 },
59    visible: { y: 0, opacity: 1 },
60    exit: { y: -100, opacity: 0 },
61  };
62 
63  return (
64    <section
65      aria-label="Rapid greetings in different languages"
66      className="flex min-h-[200px] items-center justify-center gap-1 p-4"
67    >
68      <div className="relative flex h-16 w-60 items-center justify-center overflow-visible">
69        {isAnimating ? (
70          <AnimatePresence mode="popLayout">
71            <motion.div
72              animate={textVariants.visible}
73              aria-live="off"
74              className="absolute flex items-center gap-2 font-medium text-2xl text-gray-800 dark:text-gray-200"
75              exit={textVariants.exit}
76              initial={textVariants.hidden}
77              key={currentIndex}
78              transition={{ duration: 0.2, ease: "easeOut" }}
79            >
80              <div
81                aria-hidden="true"
82                className="h-2 w-2 rounded-full bg-black dark:bg-white"
83              />
84              {greetings[currentIndex].text}
85            </motion.div>
86// … truncated