{
  "name": "dynamic-text",
  "type": "registry:component",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "\"use client\";\n\n/**\n * @author: @dorianbaffier\n * @description: Dynamic Text\n * @version: 1.0.0\n * @date: 2025-06-26\n * @license: MIT\n * @website: https://kokonutui.com\n * @github: https://github.com/kokonut-labs/kokonutui\n */\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\ninterface Greeting {\n  text: string;\n  language: string;\n}\n\nconst greetings: Greeting[] = [\n  { text: \"Hello\", language: \"English\" },\n  { text: \"こんにちは\", language: \"Japanese\" },\n  { text: \"Bonjour\", language: \"French\" },\n  { text: \"Hola\", language: \"Spanish\" },\n  { text: \"안녕하세요\", language: \"Korean\" },\n  { text: \"Ciao\", language: \"Italian\" },\n  { text: \"Hallo\", language: \"German\" },\n  { text: \"こんにちは\", language: \"Japanese\" },\n];\n\nconst DynamicText = () => {\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const [isAnimating, setIsAnimating] = useState(true);\n\n  useEffect(() => {\n    if (!isAnimating) return;\n\n    const interval = setInterval(() => {\n      setCurrentIndex((prevIndex) => {\n        const nextIndex = prevIndex + 1;\n\n        if (nextIndex >= greetings.length) {\n          clearInterval(interval);\n          setIsAnimating(false);\n          return prevIndex;\n        }\n\n        return nextIndex;\n      });\n    }, 300);\n\n    return () => clearInterval(interval);\n  }, [isAnimating]);\n\n  // Animation variants for the text\n  const textVariants = {\n    hidden: { y: 20, opacity: 0 },\n    visible: { y: 0, opacity: 1 },\n    exit: { y: -100, opacity: 0 },\n  };\n\n  return (\n    <section\n      aria-label=\"Rapid greetings in different languages\"\n      className=\"flex min-h-[200px] items-center justify-center gap-1 p-4\"\n    >\n      <div className=\"relative flex h-16 w-60 items-center justify-center overflow-visible\">\n        {isAnimating ? (\n          <AnimatePresence mode=\"popLayout\">\n            <motion.div\n              animate={textVariants.visible}\n              aria-live=\"off\"\n              className=\"absolute flex items-center gap-2 font-medium text-2xl text-gray-800 dark:text-gray-200\"\n              exit={textVariants.exit}\n              initial={textVariants.hidden}\n              key={currentIndex}\n              transition={{ duration: 0.2, ease: \"easeOut\" }}\n            >\n              <div\n                aria-hidden=\"true\"\n                className=\"h-2 w-2 rounded-full bg-black dark:bg-white\"\n              />\n              {greetings[currentIndex].text}\n            </motion.div>\n          </AnimatePresence>\n        ) : (\n          <div className=\"flex items-center gap-2 font-medium text-2xl text-gray-800 dark:text-gray-200\">\n            <div\n              aria-hidden=\"true\"\n              className=\"h-2 w-2 rounded-full bg-black dark:bg-white\"\n            />\n            {greetings[currentIndex].text}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n};\n\nexport default DynamicText;\n",
      "path": "/components/kokonutui/dynamic-text.tsx",
      "target": "components/kokonutui/dynamic-text.tsx"
    }
  ]
}