{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-typed-headline",
  "type": "registry:component",
  "title": "Hero typed headline",
  "description": "A centered hero whose headline cycles through rotating words such as dashboards and AI apps with a slide transition. Rotation pauses for reduced motion.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/hero-typed-headline.tsx",
      "type": "registry:ui",
      "target": "components/ui/hero-typed-headline.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion, AnimatePresence } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\nconst WORDS = [\"dashboards\", \"AI apps\", \"billing flows\", \"marketing sites\"]\n\nfunction HeroTypedHeadline({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  const [index, setIndex] = React.useState(0)\n  React.useEffect(() => {\n    if (reduce) return\n    const id = setInterval(() => setIndex((i) => (i + 1) % WORDS.length), 2200)\n    return () => clearInterval(id)\n  }, [reduce])\n  return (\n    <section\n      data-slot=\"hero-typed-headline\"\n      data-tier=\"premium\"\n      className={cn(\n        \"overflow-hidden rounded-2xl border border-border bg-bg px-4 py-14 text-center sm:px-6 sm:py-24\",\n        className\n      )}\n    >\n      <p className=\"text-xs font-medium tracking-[0.01em] text-fg-muted uppercase\">Introducing Lumen 2.0</p>\n      <h1 className=\"mx-auto mt-3 max-w-3xl text-[clamp(1.5rem,3.2vw+0.9rem,3rem)] font-medium tracking-[-0.028em] text-fg\">\n        Ship beautiful{\" \"}\n        <span className=\"relative inline-flex h-[1.2em] min-w-[9ch] max-w-full items-baseline justify-center overflow-hidden align-baseline text-accent sm:min-w-[12ch]\">\n          <AnimatePresence mode=\"wait\">\n            <motion.span\n              key={WORDS[index]}\n              initial={reduce ? false : { y: 16, opacity: 0 }}\n              animate={{ y: 0, opacity: 1 }}\n              exit={reduce ? undefined : { y: -16, opacity: 0 }}\n              transition={{ duration: 0.28 }}\n              className=\"absolute inset-x-0 whitespace-nowrap\"\n            >\n              {WORDS[index]}\n            </motion.span>\n          </AnimatePresence>\n        </span>\n      </h1>\n      <p className=\"mx-auto mt-4 max-w-lg text-sm text-fg-muted\">\n        One workspace for plans, docs and releases, fast enough that it disappears.\n      </p>\n      <div className=\"mx-auto mt-7 flex w-full max-w-sm flex-col gap-3 sm:mt-8 sm:max-w-none sm:flex-row sm:justify-center\">\n        <Button className=\"w-full sm:w-auto\">Explore the product</Button>\n        <Button variant=\"outline\" className=\"w-full sm:w-auto\">Free components</Button>\n      </div>\n    </section>\n  )\n}\nexport { HeroTypedHeadline }\n"
    }
  ]
}