{
  "name": "parallax-scroll-2",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/parallax-scroll-2.tsx",
      "content": "\"use client\";\nimport { useScroll, useTransform } from \"motion/react\";\nimport { useRef } from \"react\";\nimport { motion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport const ParallaxScrollSecond = ({\n  images,\n  className,\n}: {\n  images: string[];\n  className?: string;\n}) => {\n  const gridRef = useRef<any>(null);\n  const { scrollYProgress } = useScroll({\n    container: gridRef, // remove this if your container is not fixed height\n    offset: [\"start start\", \"end start\"], // remove this if your container is not fixed height\n  });\n\n  const translateYFirst = useTransform(scrollYProgress, [0, 1], [0, -200]);\n  const translateXFirst = useTransform(scrollYProgress, [0, 1], [0, -200]);\n  const rotateXFirst = useTransform(scrollYProgress, [0, 1], [0, -20]);\n\n  const translateYThird = useTransform(scrollYProgress, [0, 1], [0, -200]);\n  const translateXThird = useTransform(scrollYProgress, [0, 1], [0, 200]);\n  const rotateXThird = useTransform(scrollYProgress, [0, 1], [0, 20]);\n\n  const third = Math.ceil(images.length / 3);\n\n  const firstPart = images.slice(0, third);\n  const secondPart = images.slice(third, 2 * third);\n  const thirdPart = images.slice(2 * third);\n\n  return (\n    <div\n      className={cn(\"h-[40rem] items-start overflow-y-auto w-full\", className)}\n      ref={gridRef}\n    >\n      <div\n        className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 items-start max-w-5xl mx-auto gap-10 py-40 px-10\"\n        ref={gridRef}\n      >\n        <div className=\"grid gap-10\">\n          {firstPart.map((el, idx) => (\n            <motion.div\n              style={{\n                y: translateYFirst,\n                x: translateXFirst,\n                rotateZ: rotateXFirst,\n              }} // Apply the translateY motion value here\n              key={\"grid-1\" + idx}\n            >\n              <img\n                src={el}\n                className=\"h-80 w-full object-cover object-left-top rounded-lg gap-10 !m-0 !p-0\"\n                height=\"400\"\n                width=\"400\"\n                alt=\"thumbnail\"\n              />\n            </motion.div>\n          ))}\n        </div>\n        <div className=\"grid gap-10\">\n          {secondPart.map((el, idx) => (\n            <motion.div key={\"grid-2\" + idx}>\n              <img\n                src={el}\n                className=\"h-80 w-full object-cover object-left-top rounded-lg gap-10 !m-0 !p-0\"\n                height=\"400\"\n                width=\"400\"\n                alt=\"thumbnail\"\n              />\n            </motion.div>\n          ))}\n        </div>\n        <div className=\"grid gap-10\">\n          {thirdPart.map((el, idx) => (\n            <motion.div\n              style={{\n                y: translateYThird,\n                x: translateXThird,\n                rotateZ: rotateXThird,\n              }}\n              key={\"grid-3\" + idx}\n            >\n              <img\n                src={el}\n                className=\"h-80 w-full object-cover object-left-top rounded-lg gap-10 !m-0 !p-0\"\n                height=\"400\"\n                width=\"400\"\n                alt=\"thumbnail\"\n              />\n            </motion.div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/parallax-scroll-2.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Parallax Scroll 2"
}