{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-reveal",
  "type": "registry:ui",
  "title": "Text Reveal",
  "description": "Fade in text as you scroll down the page.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/magicui/text-reveal.tsx",
      "content": "\"use client\"\n\nimport {\n  useRef,\n  type ComponentPropsWithoutRef,\n  type FC,\n  type ReactNode,\n} from \"react\"\nimport { motion, MotionValue, useScroll, useTransform } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TextRevealProps extends ComponentPropsWithoutRef<\"div\"> {\n  children: string\n}\n\nexport const TextReveal: FC<TextRevealProps> = ({ children, className }) => {\n  const sectionRef = useRef<HTMLDivElement | null>(null)\n  const { scrollYProgress } = useScroll({\n    target: sectionRef,\n  })\n\n  if (typeof children !== \"string\") {\n    throw new Error(\"TextReveal: children must be a string\")\n  }\n\n  const words = children.split(\" \")\n\n  return (\n    <div ref={sectionRef} className={cn(\"relative z-0 h-[200vh]\", className)}>\n      <div\n        className={\n          \"sticky top-0 mx-auto flex h-[50%] max-w-4xl items-center bg-transparent px-4 py-20\"\n        }\n      >\n        <span\n          className={\n            \"flex flex-wrap p-5 text-2xl font-bold text-black/20 md:p-8 md:text-3xl lg:p-10 lg:text-4xl xl:text-5xl dark:text-white/20\"\n          }\n        >\n          {words.map((word, i) => {\n            const start = i / words.length\n            const end = start + 1 / words.length\n            return (\n              <Word key={i} progress={scrollYProgress} range={[start, end]}>\n                {word}\n              </Word>\n            )\n          })}\n        </span>\n      </div>\n    </div>\n  )\n}\n\ninterface WordProps {\n  children: ReactNode\n  progress: MotionValue<number>\n  range: [number, number]\n}\n\nconst Word: FC<WordProps> = ({ children, progress, range }) => {\n  const opacity = useTransform(progress, range, [0, 1])\n  return (\n    <span className=\"xl:lg-3 relative mx-1 lg:mx-1.5\">\n      <span className=\"absolute opacity-30\">{children}</span>\n      <motion.span\n        style={{ opacity: opacity }}\n        className={\"text-black dark:text-white\"}\n      >\n        {children}\n      </motion.span>\n    </span>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}