{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blurred-stagger-text",
  "type": "registry:ui",
  "title": "Blurred Stagger Text",
  "description": "An animated text component with staggered blur reveal effect using Framer Motion.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/blurred-stagger-text.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { motion } from \"motion/react\";\n\nexport const BlurredStagger = ({\n  text = \"built by ruixen.com\",\n}: {\n  text: string;\n}) => {\n  const headingText = text;\n\n  const container = {\n    hidden: { opacity: 0 },\n    show: {\n      opacity: 1,\n      transition: {\n        staggerChildren: 0.015,\n      },\n    },\n  };\n\n  const letterAnimation = {\n    hidden: {\n      opacity: 0,\n      filter: \"blur(10px)\",\n    },\n    show: {\n      opacity: 1,\n      filter: \"blur(0px)\",\n    },\n  };\n\n  return (\n    <>\n      <div className=\"w-full\">\n        <motion.p\n          variants={container}\n          initial=\"hidden\"\n          animate=\"show\"\n          className=\"text-base leading-relaxed break-words whitespace-normal\"\n        >\n          {headingText.split(\"\").map((char, index) => (\n            <motion.span\n              key={index}\n              variants={letterAnimation}\n              transition={{ duration: 0.3 }}\n              className=\"inline-block\"\n            >\n              {char === \" \" ? \"\\u00A0\" : char}\n            </motion.span>\n          ))}\n        </motion.p>\n      </div>\n    </>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/blurred-stagger-text.tsx"
    }
  ]
}