{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-poster-type",
  "type": "registry:component",
  "title": "Hero poster type",
  "description": "A poster scale typography hero in React whose three headline lines rise from masks in turn, with an eyebrow, supporting copy and a magnetic CTA.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "https://ui.minidev.pro/r/magnetic-cta.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/hero-poster-type.tsx",
      "type": "registry:ui",
      "target": "components/ui/hero-poster-type.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { MagneticCta } from \"@/components/ui/magnetic-cta\"\nimport { Button } from \"@/components/ui/button\"\n\nfunction HeroPosterType({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  return (\n    <section\n      data-slot=\"hero-poster-type\"\n      data-tier=\"premium\"\n      className={cn(\n        \"relative overflow-hidden rounded-2xl border border-border bg-bg px-4 py-14 sm:px-12 sm:py-24\",\n        className\n      )}\n    >\n      <div aria-hidden className=\"pointer-events-none absolute inset-0\">\n        <div className=\"absolute inset-y-0 left-1/3 w-px bg-border\" />\n        <div className=\"absolute inset-y-0 left-2/3 w-px bg-border\" />\n        <div className=\"absolute inset-x-0 top-1/3 h-px bg-border\" />\n        <div className=\"absolute inset-x-0 top-2/3 h-px bg-border\" />\n        <div className=\"absolute right-4 bottom-4 size-28 rounded-full bg-[radial-gradient(circle,color-mix(in_oklch,var(--accent)_25%,transparent),transparent_70%)] sm:right-8 sm:bottom-8 sm:size-40\" />\n      </div>\n      <div className=\"relative mx-auto max-w-5xl min-w-0\">\n        <motion.p\n          initial={reduce ? false : { y: 10 }}\n          animate={{ y: 0 }}\n          className=\"text-xs font-medium tracking-[0.01em] text-fg-muted uppercase\"\n        >\n          New in 2.0\n        </motion.p>\n        <h1 className=\"mt-4 max-w-4xl text-[clamp(2rem,5vw+1rem,4.5rem)] font-medium leading-[1.05] tracking-[-0.030em] text-fg sm:leading-[1.02] sm:tracking-[-0.034em]\">\n          <span className=\"block overflow-hidden\">\n            <motion.span className=\"block\" initial={reduce ? false : { y: \"110%\" }} animate={{ y: 0 }} transition={{ duration: 0.75, ease: [0.22, 1, 0.36, 1] }}>\n              Make the first\n            </motion.span>\n          </span>\n          <span className=\"block overflow-hidden\">\n            <motion.span className=\"block\" initial={reduce ? false : { y: \"110%\" }} animate={{ y: 0 }} transition={{ duration: 0.75, delay: 0.08, ease: [0.22, 1, 0.36, 1] }}>\n              screen feel\n            </motion.span>\n          </span>\n          <span className=\"block overflow-hidden\">\n            <motion.span\n              className=\"block bg-[linear-gradient(100deg,var(--fg)_0%,var(--accent)_60%,var(--accent-2)_100%)] bg-clip-text text-transparent\"\n              initial={reduce ? false : { y: \"110%\" }}\n              animate={{ y: 0 }}\n              transition={{ duration: 0.75, delay: 0.16, ease: [0.22, 1, 0.36, 1] }}\n            >\n              inevitable.\n            </motion.span>\n          </span>\n        </h1>\n        <motion.p\n          initial={reduce ? false : { y: 12 }}\n          animate={{ y: 0 }}\n          transition={{ delay: 0.35 }}\n          className=\"mt-5 max-w-md text-sm leading-[1.55] text-fg-muted sm:mt-6 sm:text-base\"\n        >\n          Poster-scale type, Hairline grid, magnetic CTA. Built for launches that refuse to look generic.\n        </motion.p>\n        <motion.div\n          initial={reduce ? false : { y: 10 }}\n          animate={{ y: 0 }}\n          transition={{ delay: 0.45 }}\n          className=\"mt-7 flex flex-col gap-3 sm:mt-8 sm:flex-row sm:flex-wrap\"\n        >\n          <MagneticCta className=\"w-full sm:w-auto\">Start free trial</MagneticCta>\n          <Button variant=\"outline\" className=\"w-full sm:w-auto\">Stay free</Button>\n        </motion.div>\n      </div>\n    </section>\n  )\n}\nexport { HeroPosterType }\n"
    }
  ]
}