{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "staggered-hero-shadcnui",
  "type": "registry:page",
  "title": "Staggered Text Hero",
  "description": "Hero section with staggered text reveal",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/page/hero/staggered-text.tsx",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion, type Variants } from \"framer-motion\";\n\ntype StaggeredHeroProps = {\n  lines?: string[];\n  tagline?: string | null;\n  className?: string;\n};\n\nconst DEFAULT_LINES = [\"Build\", \"beautiful\", \"experiences\"];\n\nexport function StaggeredHero({\n  lines = DEFAULT_LINES,\n  tagline = \"With smooth animations\",\n  className = \"\",\n}: StaggeredHeroProps) {\n  const shouldReduceMotion = useReducedMotion();\n\n  const container: Variants = {\n    hidden: { opacity: shouldReduceMotion ? 1 : 0 },\n    visible: {\n      opacity: 1,\n      transition: shouldReduceMotion\n        ? { duration: 0 }\n        : // ~100ms between chunks: enough for the sequence to read as\n          // hierarchy without making the reader wait on it.\n          { staggerChildren: 0.1, when: \"beforeChildren\" },\n    },\n  };\n\n  const item: Variants = {\n    hidden: shouldReduceMotion ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 },\n    visible: {\n      opacity: 1,\n      y: 0,\n      transition: shouldReduceMotion\n        ? { duration: 0 }\n        : { duration: 0.5, ease: [0.2, 0, 0, 1] },\n    },\n  };\n\n  const label = lines.join(\" \");\n\n  return (\n    <div className={`flex items-center justify-center p-12 ${className}`}>\n      <motion.div\n        variants={container}\n        initial=\"hidden\"\n        animate=\"visible\"\n        className=\"text-center\"\n      >\n        {/*\n          The visible words are split for the stagger, so they are hidden from\n          assistive tech and the heading carries one clean accessible name.\n        */}\n        <motion.h1\n          variants={item}\n          className=\"mb-2 text-balance text-4xl font-bold tracking-tight md:text-6xl\"\n          aria-label={label}\n        >\n          <span aria-hidden className=\"flex flex-col gap-2 md:gap-3\">\n            {lines.map((word, index) => (\n              <motion.span key={`${word}-${index}`} variants={item} className=\"block\">\n                {word}\n              </motion.span>\n            ))}\n          </span>\n        </motion.h1>\n\n        {tagline && (\n          <motion.p variants={item} className=\"mt-4 text-lg text-muted-foreground\">\n            {tagline}\n          </motion.p>\n        )}\n      </motion.div>\n    </div>\n  );\n}\n",
      "type": "registry:page",
      "target": "components/uitripled/staggered-hero-shadcnui.tsx"
    }
  ]
}