{
  "$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, type Variants } from \"framer-motion\";\n\nconst text = [\"Build\", \"beautiful\", \"experiences\"];\n\nconst heroContainer: Variants = {\n  hidden: {},\n  visible: {\n    transition: {\n      staggerChildren: 0.3,\n    },\n  },\n};\n\nconst headingVariant: Variants = {\n  hidden: { opacity: 0, y: 20 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: {\n      duration: 0.5,\n      ease: \"easeOut\",\n      staggerChildren: 0.12,\n      when: \"beforeChildren\",\n    },\n  },\n};\n\nexport function StaggeredHero() {\n  const item: Variants = {\n    hidden: { opacity: 0, y: 20 },\n    visible: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        duration: 0.5,\n        ease: \"easeOut\",\n      },\n    },\n  };\n\n  return (\n    <div className=\"flex items-center justify-center p-12\">\n      <motion.div\n        variants={heroContainer}\n        initial=\"hidden\"\n        animate=\"visible\"\n        className=\"text-center\"\n      >\n        <motion.h1\n          variants={headingVariant}\n          className=\"mb-2 text-4xl font-bold md:text-6xl\"\n          aria-label={text.join(\" \")}\n        >\n          <span className=\"flex flex-col gap-2 md:gap-3\">\n            {text.map((word, index) => (\n              <motion.span\n                key={word + index}\n                variants={item}\n                className=\"block\"\n                aria-hidden=\"true\"\n              >\n                {word}\n              </motion.span>\n            ))}\n          </span>\n          <span className=\"sr-only\">{text.join(\" \")}</span>\n        </motion.h1>\n        <motion.p\n          variants={item}\n          className=\"mt-4 text-lg text-[var(--foreground)]/70\"\n        >\n          With smooth animations\n        </motion.p>\n      </motion.div>\n    </div>\n  );\n}\n",
      "type": "registry:page",
      "target": "components/uitripled/staggered-hero-shadcnui.tsx"
    }
  ]
}