"use client"; /** * @author: @dorianbaffier * @description: Dynamic Text * @version: 1.0.0 * @date: 2025-06-26 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { AnimatePresence, motion } from "motion/react"; import { useEffect, useState } from "react"; interface Greeting { text: string; language: string; } const greetings: Greeting[] = [ { text: "Hello", language: "English" }, { text: "こんにちは", language: "Japanese" }, { text: "Bonjour", language: "French" }, { text: "Hola", language: "Spanish" }, { text: "안녕하세요", language: "Korean" }, { text: "Ciao", language: "Italian" }, { text: "Hallo", language: "German" }, { text: "こんにちは", language: "Japanese" }, ]; const DynamicText = () => { const [currentIndex, setCurrentIndex] = useState(0); const [isAnimating, setIsAnimating] = useState(true); useEffect(() => { if (!isAnimating) return; const interval = setInterval(() => { setCurrentIndex((prevIndex) => { const nextIndex = prevIndex + 1; if (nextIndex >= greetings.length) { clearInterval(interval); setIsAnimating(false); return prevIndex; } return nextIndex; }); }, 300); return () => clearInterval(interval); }, [isAnimating]); // Animation variants for the text const textVariants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1 }, exit: { y: -100, opacity: 0 }, }; return (

{isAnimating ? (

); }; export default DynamicText;

Dynamic Text

Instalação

Dependências