{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "typewriter",
  "title": "Typewriter",
  "description": "A typewriter component that cycles through text with a synced flashing highlight animation.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/react/atlasui/typewriter.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface TypewriterProps {\n  /**\n   * Array of strings to display\n   */\n  text: string[];\n  /**\n   * Delay between each letter (in seconds)\n   * @default 0.025\n   */\n  letterDelay?: number;\n  /**\n   * Duration of the box fade (in seconds)\n   * @default 0.125\n   */\n  boxFadeDuration?: number;\n  /**\n   * Duration of the text fade out (in seconds)\n   * @default 0.25\n   */\n  textFadeOutDuration?: number;\n  /**\n   * Delay between each text fade out (in ms)\n   * @default 5500\n   */\n  delayBetween?: number;\n  /**\n   * Additional classNames\n   */\n  className?: string;\n}\n\nexport const Typewriter = ({\n  text,\n  letterDelay = 0.025,\n  boxFadeDuration = 0.125,\n  textFadeOutDuration = 0.25,\n  delayBetween = 5500,\n  className,\n}: TypewriterProps) => {\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  useEffect(() => {\n    const intervalId = setInterval(() => {\n      setCurrentIndex((prevIndex) => (prevIndex + 1) % text.length);\n    }, delayBetween);\n\n    return () => clearInterval(intervalId);\n  }, []);\n\n  return (\n    <p className={cn(\"text-sm font-light uppercase\", className)}>\n      <AnimatePresence mode=\"wait\">\n        <motion.span\n          key={currentIndex}\n          initial={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          transition={{\n            duration: textFadeOutDuration,\n            ease: \"easeInOut\",\n          }}\n        >\n          {text[currentIndex].split(\"\").map((char, index) => (\n            <span key={index} className=\"relative\">\n              <motion.span\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                transition={{ delay: index * letterDelay, duration: 0 }}\n              >\n                {char}\n              </motion.span>\n              <motion.span\n                initial={{ opacity: 0 }}\n                animate={{ opacity: [0, 1, 0] }}\n                transition={{\n                  delay: index * letterDelay,\n                  times: [0, 0.1, 1],\n                  duration: boxFadeDuration,\n                  ease: \"easeInOut\",\n                }}\n                className=\"bg-foreground absolute inset-x-0.25 inset-y-0\"\n              />\n            </span>\n          ))}\n        </motion.span>\n      </AnimatePresence>\n    </p>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}