{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "container-text-scroll",
  "type": "registry:ui",
  "title": "Container Text Scroll",
  "description": "Scroll-triggered text animation component with smooth parallax effects using Framer Motion.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/container-text-scroll.tsx",
      "content": "\"use client\";\nimport React, { useRef } from \"react\";\nimport { useScroll, useTransform, motion, MotionValue } from \"motion/react\";\n\nexport const ContainerTextScroll = ({\n  titleComponent,\n  children,\n}: {\n  titleComponent: string | React.ReactNode;\n  children: React.ReactNode;\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const { scrollYProgress } = useScroll({ target: containerRef });\n\n  const [isMobile, setIsMobile] = React.useState(false);\n  React.useEffect(() => {\n    const checkMobile = () => setIsMobile(window.innerWidth <= 768);\n    checkMobile();\n    window.addEventListener(\"resize\", checkMobile);\n    return () => window.removeEventListener(\"resize\", checkMobile);\n  }, []);\n\n  // Scale from smaller to full size as we scroll\n  const scaleDimensions = () => (isMobile ? [0.8, 1] : [0.9, 1]);\n\n  // Tilt forward from bottom: start 20°, end 0° (straight)\n  const rotate = useTransform(scrollYProgress, [0, 1], [-20, 0]);\n  const scale = useTransform(scrollYProgress, [0, 1], scaleDimensions());\n  const translateY = useTransform(scrollYProgress, [0, 1], [100, 0]); // moves up\n  const titleTranslateY = useTransform(scrollYProgress, [0, 1], [100, 0]);\n  const titleScale = useTransform(scrollYProgress, [0, 1], [0.8, 1]);\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"h-[60rem] md:h-[80rem] flex items-center justify-center relative px-8\"\n    >\n      <motion.div\n        style={{ translateY }}\n        className=\"relative w-full max-w-5xl flex flex-col items-center justify-center\"\n      >\n        {/* Card */}\n        <Card rotate={rotate} scale={scale}>\n          {children}\n\n          {/* Title inside card */}\n          <motion.div\n            style={{ translateY: titleTranslateY, scale: titleScale }}\n            className=\"absolute inset-0 flex items-center justify-center text-center px-4\"\n          >\n            <div className=\"text-white\">{titleComponent}</div>\n          </motion.div>\n        </Card>\n      </motion.div>\n    </div>\n  );\n};\n\nexport const Card = ({\n  rotate,\n  scale,\n  children,\n}: {\n  rotate: MotionValue<number>;\n  scale: MotionValue<number>;\n  children: React.ReactNode;\n}) => {\n  return (\n    <motion.div\n      style={{\n        rotateX: rotate,\n        scale,\n        boxShadow:\n          \"0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003\",\n      }}\n      className=\"relative h-[30rem] md:h-[40rem] w-full border-4 border-[#6C6C6C] bg-[#222222] rounded-[30px] shadow-2xl overflow-hidden\"\n    >\n      <div className=\"h-full w-full rounded-2xl bg-gray-100 dark:bg-zinc-900\">\n        {children}\n      </div>\n    </motion.div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ruixen/container-text-scroll.tsx"
    }
  ]
}