{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-based-word-reveal",
  "title": "Scroll Based Word Reveal",
  "description": "A text reveal effect which progressively reveals text word by word as you scroll.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/react/atlasui/scroll-based-word-reveal.tsx",
      "content": "\"use client\";\n\nimport { useRef } from \"react\";\n\nimport { motion, useScroll, useTransform } from \"motion/react\";\n\ninterface ScrollBasedWordRevealProps {\n  text: string;\n}\n\nexport const ScrollBasedWordReveal = ({ text }: ScrollBasedWordRevealProps) => {\n  const container = useRef(null);\n  const { scrollYProgress } = useScroll({\n    target: container,\n    offset: [\"start 0.8\", \"start 0.3\"],\n  });\n\n  const words = text.split(\" \");\n\n  return (\n    <div className=\"flex flex-col items-center justify-center\">\n      <p\n        ref={container}\n        className=\"flex max-w-5xl flex-wrap items-center justify-center text-5xl font-bold\"\n      >\n        {words.map((word, i) => {\n          const start = i / words.length;\n          const end = (start + i) / words.length;\n\n          const opacity = useTransform(scrollYProgress, [start, end], [0, 1]);\n\n          return (\n            <span key={i} className=\"relative mt-1 mr-2\">\n              <span className=\"absolute opacity-10\">{word}</span>\n              <motion.span style={{ opacity }}>{word}</motion.span>\n            </span>\n          );\n        })}\n      </p>\n    </div>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}