{
  "name": "hero-parallax",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/hero-parallax.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport {\n  motion,\n  useScroll,\n  useTransform,\n  useSpring,\n  MotionValue,\n} from \"motion/react\";\n\n\n\nexport const HeroParallax = ({\n  products,\n}: {\n  products: {\n    title: string;\n    link: string;\n    thumbnail: string;\n  }[];\n}) => {\n  const firstRow = products.slice(0, 5);\n  const secondRow = products.slice(5, 10);\n  const thirdRow = products.slice(10, 15);\n  const ref = React.useRef(null);\n  const { scrollYProgress } = useScroll({\n    target: ref,\n    offset: [\"start start\", \"end start\"],\n  });\n\n  const springConfig = { stiffness: 300, damping: 30, bounce: 100 };\n\n  const translateX = useSpring(\n    useTransform(scrollYProgress, [0, 1], [0, 1000]),\n    springConfig\n  );\n  const translateXReverse = useSpring(\n    useTransform(scrollYProgress, [0, 1], [0, -1000]),\n    springConfig\n  );\n  const rotateX = useSpring(\n    useTransform(scrollYProgress, [0, 0.2], [15, 0]),\n    springConfig\n  );\n  const opacity = useSpring(\n    useTransform(scrollYProgress, [0, 0.2], [0.2, 1]),\n    springConfig\n  );\n  const rotateZ = useSpring(\n    useTransform(scrollYProgress, [0, 0.2], [20, 0]),\n    springConfig\n  );\n  const translateY = useSpring(\n    useTransform(scrollYProgress, [0, 0.2], [-700, 500]),\n    springConfig\n  );\n  return (\n    <div\n      ref={ref}\n      className=\"h-[300vh] py-40 overflow-hidden  antialiased relative flex flex-col self-auto [perspective:1000px] [transform-style:preserve-3d]\"\n    >\n      <Header />\n      <motion.div\n        style={{\n          rotateX,\n          rotateZ,\n          translateY,\n          opacity,\n        }}\n        className=\"\"\n      >\n        <motion.div className=\"flex flex-row-reverse space-x-reverse space-x-20 mb-20\">\n          {firstRow.map((product) => (\n            <ProductCard\n              product={product}\n              translate={translateX}\n              key={product.title}\n            />\n          ))}\n        </motion.div>\n        <motion.div className=\"flex flex-row  mb-20 space-x-20 \">\n          {secondRow.map((product) => (\n            <ProductCard\n              product={product}\n              translate={translateXReverse}\n              key={product.title}\n            />\n          ))}\n        </motion.div>\n        <motion.div className=\"flex flex-row-reverse space-x-reverse space-x-20\">\n          {thirdRow.map((product) => (\n            <ProductCard\n              product={product}\n              translate={translateX}\n              key={product.title}\n            />\n          ))}\n        </motion.div>\n      </motion.div>\n    </div>\n  );\n};\n\nexport const Header = () => {\n  return (\n    <div className=\"max-w-7xl relative mx-auto py-20 md:py-40 px-4 w-full  left-0 top-0\">\n      <h1 className=\"text-2xl md:text-7xl font-bold dark:text-white\">\n        The Ultimate <br /> development studio\n      </h1>\n      <p className=\"max-w-2xl text-base md:text-xl mt-8 dark:text-neutral-200\">\n        We build beautiful products with the latest technologies and frameworks.\n        We are a team of passionate developers and designers that love to build\n        amazing products.\n      </p>\n    </div>\n  );\n};\n\nexport const ProductCard = ({\n  product,\n  translate,\n}: {\n  product: {\n    title: string;\n    link: string;\n    thumbnail: string;\n  };\n  translate: MotionValue<number>;\n}) => {\n  return (\n    <motion.div\n      style={{\n        x: translate,\n      }}\n      whileHover={{\n        y: -20,\n      }}\n      key={product.title}\n      className=\"group/product h-96 w-[30rem] relative shrink-0\"\n    >\n      <a\n        href={product.link}\n        className=\"block group-hover/product:shadow-2xl \"\n      >\n        <img\n          src={product.thumbnail}\n          height=\"600\"\n          width=\"600\"\n          className=\"object-cover object-left-top absolute h-full w-full inset-0\"\n          alt={product.title}\n        />\n      </a>\n      <div className=\"absolute inset-0 h-full w-full opacity-0 group-hover/product:opacity-80 bg-black pointer-events-none\"></div>\n      <h2 className=\"absolute bottom-4 left-4 opacity-0 group-hover/product:opacity-100 text-white\">\n        {product.title}\n      </h2>\n    </motion.div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/hero-parallax.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Hero Parallax"
}