{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-parallax",
  "type": "registry:block",
  "title": "Hero parallax",
  "description": "Hero parallax",
  "files": [
    {
      "path": "components/usages/heroparallaxusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport HeroParallax from \"@/registry/open-source/hero-parallax\";\n\nexport default function HeroParallaxDemo() {\n\treturn <HeroParallax products={products} />;\n}\nexport const products = [\n\t{\n\t\ttitle: \"Moonbeam\",\n\t\tlink: \"https://gomoonbeam.com\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"Cursor\",\n\t\tlink: \"https://cursor.so\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"Rogue\",\n\t\tlink: \"https://userogue.com\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\n\t{\n\t\ttitle: \"Editorially\",\n\t\tlink: \"https://editorially.org\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"Editrix AI\",\n\t\tlink: \"https://editrix.ai\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"Pixel Perfect\",\n\t\tlink: \"https://app.pixelperfect.quest\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\n\t{\n\t\ttitle: \"Algochurn\",\n\t\tlink: \"https://algochurn.com\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"Aceternity UI\",\n\t\tlink: \"https://ui.aceternity.com\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"Tailwind Master Kit\",\n\t\tlink: \"https://tailwindmasterkit.com\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"SmartBridge\",\n\t\tlink: \"https://smartbridgetech.com\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"Renderwork Studio\",\n\t\tlink: \"https://renderwork.studio\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\n\t{\n\t\ttitle: \"Creme Digital\",\n\t\tlink: \"https://cremedigital.com\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"Golden Bells Academy\",\n\t\tlink: \"https://goldenbellsacademy.com\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"Invoker Labs\",\n\t\tlink: \"https://invoker.lol\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"E Free Invoice\",\n\t\tlink: \"https://efreeinvoice.com\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n];\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/heroparallaxusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport HeroParallax from \"@/registry/open-source/hero-parallax\";\n\nexport default function HeroParallaxDemo() {\n\treturn <HeroParallax products={products} />;\n}\nexport const products = [\n\t{\n\t\ttitle: \"Moonbeam\",\n\t\tlink: \"https://gomoonbeam.com\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"Cursor\",\n\t\tlink: \"https://cursor.so\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"Rogue\",\n\t\tlink: \"https://userogue.com\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\n\t{\n\t\ttitle: \"Editorially\",\n\t\tlink: \"https://editorially.org\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"Editrix AI\",\n\t\tlink: \"https://editrix.ai\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"Pixel Perfect\",\n\t\tlink: \"https://app.pixelperfect.quest\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\n\t{\n\t\ttitle: \"Algochurn\",\n\t\tlink: \"https://algochurn.com\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"Aceternity UI\",\n\t\tlink: \"https://ui.aceternity.com\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"Tailwind Master Kit\",\n\t\tlink: \"https://tailwindmasterkit.com\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"SmartBridge\",\n\t\tlink: \"https://smartbridgetech.com\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"Renderwork Studio\",\n\t\tlink: \"https://renderwork.studio\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\n\t{\n\t\ttitle: \"Creme Digital\",\n\t\tlink: \"https://cremedigital.com\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"Golden Bells Academy\",\n\t\tlink: \"https://goldenbellsacademy.com\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"Invoker Labs\",\n\t\tlink: \"https://invoker.lol\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n\t{\n\t\ttitle: \"E Free Invoice\",\n\t\tlink: \"https://efreeinvoice.com\",\n\t\timage: [{ url: \"/itjustworks.jpg\" }],\n\t},\n];\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/hero-parallax.tsx",
      "content": "\"use client\";\n\nimport React, { useEffect, useState } from \"react\";\n\nimport Link from \"next/link\";\n\nimport {\n\tmotion,\n\tMotionValue,\n\tuseScroll,\n\tuseSpring,\n\tuseTransform,\n} from \"motion/react\";\n\n// https://ui.aceternity.com/components/hero-parallax\n\nconst HeroParallax = ({\n\tproducts,\n\tcontainerRef,\n}: {\n\tproducts: {\n\t\ttitle: string;\n\t\tslug: string;\n\t\timage: { url: string };\n\t}[];\n}) => {\n\tconst firstRow = products.slice(0, 5);\n\tconst secondRow = products.slice(5, 10);\n\tconst thirdRow = products.slice(10, 15);\n\tconst ref = React.useRef(null);\n\n\tconst [componentContainerRef, setComponentContainerRef] = useState(null);\n\tuseEffect(() => {\n\t\tsetComponentContainerRef(containerRef);\n\t}, [containerRef]);\n\n\tconst { scrollYProgress } = useScroll({\n\t\ttarget: ref,\n\t\toffset: [\"start start\", \"end start\"],\n\t\t// container: containerRef || null,\n\t});\n\n\tconst springConfig = { stiffness: 300, damping: 30, bounce: 100 };\n\n\tconst translateX = useSpring(\n\t\tuseTransform(scrollYProgress, [0, 1], [0, 1000]),\n\t\tspringConfig\n\t);\n\tconst translateXReverse = useSpring(\n\t\tuseTransform(scrollYProgress, [0, 1], [0, -1000]),\n\t\tspringConfig\n\t);\n\tconst rotateX = useSpring(\n\t\tuseTransform(scrollYProgress, [0, 0.2], [15, 0]),\n\t\tspringConfig\n\t);\n\tconst opacity = useSpring(\n\t\tuseTransform(scrollYProgress, [0, 0.2], [0.2, 1]),\n\t\tspringConfig\n\t);\n\tconst rotateZ = useSpring(\n\t\tuseTransform(scrollYProgress, [0, 0.2], [20, 0]),\n\t\tspringConfig\n\t);\n\tconst translateY = useSpring(\n\t\tuseTransform(scrollYProgress, [0, 0.2], [-700, 500]),\n\t\tspringConfig\n\t);\n\tif (!!componentContainerRef && componentContainerRef?.current === undefined)\n\t\treturn null;\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName=\"h-[300vh] py-40 overflow-hidden  antialiased relative flex flex-col self-auto perspective-[1000px] transform-3d\"\n\t\t>\n\t\t\t<Header />\n\t\t\t<motion.div\n\t\t\t\tstyle={{\n\t\t\t\t\trotateX,\n\t\t\t\t\trotateZ,\n\t\t\t\t\ttranslateY,\n\t\t\t\t\topacity,\n\t\t\t\t}}\n\t\t\t\tclassName=\"\"\n\t\t\t>\n\t\t\t\t<motion.div className=\"flex flex-row-reverse space-x-reverse space-x-20 mb-20\">\n\t\t\t\t\t{firstRow.map((product) => (\n\t\t\t\t\t\t<ProductCard\n\t\t\t\t\t\t\tproduct={product}\n\t\t\t\t\t\t\ttranslate={translateX}\n\t\t\t\t\t\t\tkey={product.title}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</motion.div>\n\t\t\t\t<motion.div className=\"flex flex-row  mb-20 space-x-20 \">\n\t\t\t\t\t{secondRow.map((product) => (\n\t\t\t\t\t\t<ProductCard\n\t\t\t\t\t\t\tproduct={product}\n\t\t\t\t\t\t\ttranslate={translateXReverse}\n\t\t\t\t\t\t\tkey={product.title}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</motion.div>\n\t\t\t\t<motion.div className=\"flex flex-row-reverse space-x-reverse space-x-20\">\n\t\t\t\t\t{thirdRow.map((product) => (\n\t\t\t\t\t\t<ProductCard\n\t\t\t\t\t\t\tproduct={product}\n\t\t\t\t\t\t\ttranslate={translateX}\n\t\t\t\t\t\t\tkey={product.title}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</motion.div>\n\t\t\t</motion.div>\n\t\t</div>\n\t);\n};\n\nexport const Header = () => {\n\treturn (\n\t\t<div className=\"max-w-7xl relative mx-auto py-20 md:py-40 px-4 w-full  left-0 top-0\">\n\t\t\t<h1 className=\"text-2xl md:text-7xl font-bold dark:text-foreground\">\n\t\t\t\tThe\n\t\t\t\t<span className=\"text-3xl md:text-9xl\">Ultimate</span> <br />{\" \"}\n\t\t\t\tmarketing studio\n\t\t\t</h1>\n\t\t\t<p className=\"max-w-2xl text-base md:text-xl mt-8 dark:text-foreground\">\n\t\t\t\tWe build beautiful products with the latest technologies and\n\t\t\t\tframeworks. We are a team of passionate developers and designers\n\t\t\t\tthat love to build amazing products.\n\t\t\t</p>\n\t\t</div>\n\t);\n};\n\nexport const ProductCard = ({\n\tproduct,\n\ttranslate,\n}: {\n\tproduct: {\n\t\ttitle: string;\n\t\tslug: string;\n\t\timage: { url: string };\n\t};\n\ttranslate: MotionValue<number>;\n}) => {\n\treturn (\n\t\t<motion.div\n\t\t\tstyle={{\n\t\t\t\tx: translate,\n\t\t\t}}\n\t\t\twhileHover={{\n\t\t\t\ty: -20,\n\t\t\t}}\n\t\t\tkey={product.title}\n\t\t\tclassName=\"group/product h-96 w-120 relative shrink-0\"\n\t\t>\n\t\t\t<Link\n\t\t\t\thref={product.slug || \"\"}\n\t\t\t\tclassName=\"block group-hover/product:shadow-2xl \"\n\t\t\t>\n\t\t\t\t<img\n\t\t\t\t\tsrc={product.image[0].url}\n\t\t\t\t\theight=\"600\"\n\t\t\t\t\twidth=\"600\"\n\t\t\t\t\tclassName=\"object-cover object-top-left absolute h-full w-full inset-0\"\n\t\t\t\t\talt={product.title}\n\t\t\t\t/>\n\t\t\t</Link>\n\t\t\t<div className=\"absolute inset-0 h-full w-full opacity-0 group-hover/product:opacity-80 bg-background pointer-events-none\"></div>\n\t\t\t<h2 className=\"absolute bottom-4 left-4 opacity-0 group-hover/product:opacity-100 text-foreground\">\n\t\t\t\t{product.title}\n\t\t\t</h2>\n\t\t</motion.div>\n\t);\n};\n\nexport default HeroParallax;\n",
      "type": "registry:ui"
    }
  ]
}