{"name":"blurred-stagger-text","type":"registry:ui","dependencies":["motion"],"registryDependencies":[],"files":[{"path":"/components/ui/blurred-stagger-text.tsx","content":"\"use client\" \r\n\r\nimport * as React from \"react\"\r\n \r\nimport { motion } from \"motion/react\";\r\n \r\nexport const BlurredStagger = ({\r\n  text = \"we love hextaui.com ❤️\",\r\n}: {\r\n  text: string;\r\n}) => {\r\n  const headingText = text;\r\n \r\n  const container = {\r\n    hidden: { opacity: 0 },\r\n    show: {\r\n      opacity: 1,\r\n      transition: {\r\n        staggerChildren: 0.015,\r\n      },\r\n    },\r\n  };\r\n \r\n  const letterAnimation = {\r\n    hidden: {\r\n      opacity: 0,\r\n      filter: \"blur(10px)\",\r\n    },\r\n    show: {\r\n      opacity: 1,\r\n      filter: \"blur(0px)\",\r\n    },\r\n  };\r\n \r\n  return (\r\n    <>\r\n      <div>\r\n        <motion.h1\r\n          variants={container}\r\n          initial=\"hidden\"\r\n          animate=\"show\"\r\n          className=\"text-base\"\r\n        >\r\n          {headingText.split(\"\").map((char, index) => (\r\n            <motion.span\r\n              key={index}\r\n              variants={letterAnimation}\r\n              transition={{ duration: 0.3 }}\r\n            >\r\n              {char === \" \" ? \"\\u00A0\" : char}\r\n            </motion.span>\r\n          ))}\r\n        </motion.h1>\r\n      </div>\r\n    </>\r\n  );\r\n};","type":"registry:ui","target":""}],"tailwind":{"config":{}}}