{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"typewriter-headline","type":"registry:component","title":"Typewriter Headline","description":"Título que digita e apaga uma lista de frases, com cursor piscando.","author":"UI Catalog <https://ui.codehall.io>","dependencies":[],"registryDependencies":[],"files":[{"path":"components/illustrations/typewriter-headline.tsx","type":"registry:component","content":"'use client'\n\nimport { useEffect, useState } from 'react'\n\n// \"Typewriter Headline\": digita e apaga uma lista de frases, com cursor piscando.\nconst PHRASES = ['landing pages que convertem.', 'dashboards em minutos.', 'automações sem código.', 'ilustrações animadas.']\n\nexport default function TypewriterHeadline() {\n  const [i, setI] = useState(0)\n  const [len, setLen] = useState(0)\n  const [deleting, setDeleting] = useState(false)\n\n  useEffect(() => {\n    const phrase = PHRASES[i]!\n    const t = setTimeout(\n      () => {\n        if (!deleting && len < phrase.length) setLen(len + 1)\n        else if (!deleting && len === phrase.length) setDeleting(true)\n        else if (deleting && len > 0) setLen(len - 1)\n        else {\n          setDeleting(false)\n          setI((i + 1) % PHRASES.length)\n        }\n      },\n      deleting ? 35 : len === phrase.length ? 1400 : 55,\n    )\n    return () => clearTimeout(t)\n  }, [i, len, deleting])\n\n  return (\n    <div className=\"max-w-xl text-center text-foreground\">\n      <h2 className=\"text-3xl font-semibold tracking-tight sm:text-4xl\">\n        Construa{' '}\n        <span className=\"text-muted-foreground\">\n          {PHRASES[i]!.slice(0, len)}\n          <span className=\"ml-0.5 inline-block h-[1em] w-[2px] translate-y-1 animate-pulse bg-primary align-baseline\" />\n        </span>\n      </h2>\n    </div>\n  )\n}\n"}]}