{
  "name": "container-scroll-animation",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/container-scroll-animation.tsx",
      "content": "\"use client\";\nimport React, { useRef } from \"react\";\nimport { useScroll, useTransform, motion, MotionValue } from \"motion/react\";\n\nexport const ContainerScroll = ({\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({\n    target: containerRef,\n  });\n  const [isMobile, setIsMobile] = React.useState(false);\n\n  React.useEffect(() => {\n    const checkMobile = () => {\n      setIsMobile(window.innerWidth <= 768);\n    };\n    checkMobile();\n    window.addEventListener(\"resize\", checkMobile);\n    return () => {\n      window.removeEventListener(\"resize\", checkMobile);\n    };\n  }, []);\n\n  const scaleDimensions = () => {\n    return isMobile ? [0.7, 0.9] : [1.05, 1];\n  };\n\n  const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);\n  const scale = useTransform(scrollYProgress, [0, 1], scaleDimensions());\n  const translate = useTransform(scrollYProgress, [0, 1], [0, -100]);\n\n  return (\n    <div\n      className=\"h-[60rem] md:h-[80rem] flex items-center justify-center relative p-2 md:p-20\"\n      ref={containerRef}\n    >\n      <div\n        className=\"py-10 md:py-40 w-full relative\"\n        style={{\n          perspective: \"1000px\",\n        }}\n      >\n        <Header translate={translate} titleComponent={titleComponent} />\n        <Card rotate={rotate} translate={translate} scale={scale}>\n          {children}\n        </Card>\n      </div>\n    </div>\n  );\n};\n\nexport const Header = ({ translate, titleComponent }: any) => {\n  return (\n    <motion.div\n      style={{\n        translateY: translate,\n      }}\n      className=\"div max-w-5xl mx-auto text-center\"\n    >\n      {titleComponent}\n    </motion.div>\n  );\n};\n\nexport const Card = ({\n  rotate,\n  scale,\n  children,\n}: {\n  rotate: MotionValue<number>;\n  scale: MotionValue<number>;\n  translate: 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=\"max-w-5xl -mt-12 mx-auto h-[30rem] md:h-[40rem] w-full border-4 border-[#6C6C6C] p-2 md:p-6 bg-[#222222] rounded-[30px] shadow-2xl\"\n    >\n      <div className=\" h-full w-full  overflow-hidden rounded-2xl bg-gray-100 dark:bg-zinc-900 md:rounded-2xl md:p-4 \">\n        {children}\n      </div>\n    </motion.div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/container-scroll-animation.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Container Scroll Animation"
}