{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "typewriter",
  "type": "registry:ui",
  "title": "Typewriter",
  "description": "Cycling typewriter effect with blinking cursor.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/starkui/typewriter.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport function Typewriter({\n  words,\n  typeSpeed = 60,\n  deleteSpeed = 35,\n  pause = 1500,\n  className,\n}: {\n  words: string[];\n  typeSpeed?: number;\n  deleteSpeed?: number;\n  pause?: number;\n  className?: string;\n}) {\n  const [index, setIndex] = React.useState(0);\n  const [text, setText] = React.useState(\"\");\n  const [deleting, setDeleting] = React.useState(false);\n\n  React.useEffect(() => {\n    const word = words[index % words.length];\n    let timeout: ReturnType<typeof setTimeout>;\n\n    if (!deleting && text === word) {\n      timeout = setTimeout(() => setDeleting(true), pause);\n    } else if (deleting && text === \"\") {\n      setDeleting(false);\n      setIndex((i) => (i + 1) % words.length);\n    } else {\n      timeout = setTimeout(\n        () =>\n          setText(\n            deleting\n              ? word.slice(0, text.length - 1)\n              : word.slice(0, text.length + 1)\n          ),\n        deleting ? deleteSpeed : typeSpeed\n      );\n    }\n    return () => clearTimeout(timeout);\n  }, [text, deleting, index, words, typeSpeed, deleteSpeed, pause]);\n\n  return (\n    <span className={cn(\"inline-flex items-center\", className)}>\n      {text}\n      <span className=\"ml-0.5 inline-block h-[1em] w-px animate-pulse bg-foreground\" />\n    </span>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/typewriter.tsx"
    }
  ]
}