{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"typewriter","type":"registry:ui","title":"Typewriter","description":"Types and deletes a list of phrases with a blinking cursor.","dependencies":[],"registryDependencies":[],"files":[{"path":"registry/ui/typewriter.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nconst css = `@keyframes typewriter-blink{50%{opacity:0}}`;\n\nexport interface TypewriterProps {\n  words: string[];\n  /** Ms per typed character. */\n  typeSpeed?: number;\n  /** Ms per deleted character. */\n  deleteSpeed?: number;\n  /** Ms to hold a finished word. */\n  pause?: number;\n  cursor?: string;\n  className?: string;\n}\n\nexport function Typewriter({\n  words,\n  typeSpeed = 70,\n  deleteSpeed = 40,\n  pause = 1500,\n  cursor = \"|\",\n  className,\n}: TypewriterProps) {\n  const [wordIndex, setWordIndex] = useState(0);\n  const [length, setLength] = useState(0);\n  const [deleting, setDeleting] = useState(false);\n  const word = words[wordIndex % words.length] ?? \"\";\n\n  useEffect(() => {\n    if (!deleting && length >= word.length) {\n      const id = window.setTimeout(() => setDeleting(true), pause);\n      return () => window.clearTimeout(id);\n    }\n    const id = window.setTimeout(\n      () => {\n        if (deleting && length <= 1) {\n          setDeleting(false);\n          setWordIndex((i) => (i + 1) % words.length);\n        }\n        setLength((l) => Math.max(0, l + (deleting ? -1 : 1)));\n      },\n      deleting ? deleteSpeed : typeSpeed,\n    );\n    return () => window.clearTimeout(id);\n  }, [length, deleting, word, words.length, typeSpeed, deleteSpeed, pause]);\n\n  return (\n    <span className={className}>\n      <style href=\"typewriter\" precedence=\"default\">\n        {css}\n      </style>\n      <span className=\"sr-only\">{words.join(\", \")}</span>\n      <span aria-hidden>\n        {word.slice(0, length)}\n        <span style={{ animation: \"typewriter-blink 1s steps(1) infinite\" }}>{cursor}</span>\n      </span>\n    </span>\n  );\n}\n"}]}