{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "opposite-scroll",
  "type": "registry:block",
  "title": "Opposite scroll",
  "description": "Opposite scroll",
  "files": [
    {
      "path": "components/usages/oppositescrollusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport OppositeScroll from \"@/registry/open-source/opposite-scroll-links\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<OppositeScroll\n\t\t\t\tworks={[\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 1,\n\t\t\t\t\t\ttitle: \"first entry\",\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\n\t\t\t\t\t\turi: \"/#\",\n\t\t\t\t\t},\n\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 2,\n\t\t\t\t\t\ttitle: \"first entry\",\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\n\t\t\t\t\t\turi: \"/#\",\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 3,\n\t\t\t\t\t\ttitle: \"first entry\",\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\n\t\t\t\t\t\turi: \"/#\",\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 4,\n\t\t\t\t\t\ttitle: \"first entry\",\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\n\t\t\t\t\t\turi: \"/#\",\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 5,\n\t\t\t\t\t\ttitle: \"first entry\",\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\n\t\t\t\t\t\turi: \"/#\",\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 6,\n\t\t\t\t\t\ttitle: \"first entry\",\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\n\t\t\t\t\t\turi: \"/#\",\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/oppositescrollusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport OppositeScroll from \"@/registry/open-source/opposite-scroll-links\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<OppositeScroll\n\t\t\t\tworks={[\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 1,\n\t\t\t\t\t\ttitle: \"first entry\",\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\n\t\t\t\t\t\turi: \"/#\",\n\t\t\t\t\t},\n\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 2,\n\t\t\t\t\t\ttitle: \"first entry\",\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\n\t\t\t\t\t\turi: \"/#\",\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 3,\n\t\t\t\t\t\ttitle: \"first entry\",\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\n\t\t\t\t\t\turi: \"/#\",\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 4,\n\t\t\t\t\t\ttitle: \"first entry\",\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\n\t\t\t\t\t\turi: \"/#\",\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 5,\n\t\t\t\t\t\ttitle: \"first entry\",\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\n\t\t\t\t\t\turi: \"/#\",\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 6,\n\t\t\t\t\t\ttitle: \"first entry\",\n\t\t\t\t\t\timage: \"/itjustworks.jpg\",\n\t\t\t\t\t\turi: \"/#\",\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/opposite-scroll-links.tsx",
      "content": "import { useEffect, useRef, useState } from \"react\";\n\nimport Image from \"next/image\";\nimport Link from \"next/link\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { motion, MotionValue, useScroll, useTransform } from \"motion/react\";\n\n// Inspiration:\n// www.hover.dev/components/other#opposite-scroll-content\n\nconst OppositeScroll = ({ works, className, containerRef, ...props }) => {\n\tconst targetRef = useRef<HTMLDivElement | null>(null);\n\tconst [componentContainerRef, setComponentContainerRef] = useState(null);\n\n\tuseEffect(() => {\n\t\tsetComponentContainerRef(containerRef);\n\t}, [containerRef]);\n\n\tconst { scrollYProgress } = useScroll({\n\t\ttarget: targetRef,\n\t\t// container: componentContainerRef || null,\n\t});\n\n\tconst leftWorks = works.slice(0, works.length / 2);\n\tconst rightWorks = works.slice(works.length / 2, works.length);\n\tif (!!componentContainerRef && componentContainerRef?.current === undefined)\n\t\treturn null;\n\n\treturn (\n\t\t<section className={cn(\"flex\", className)} ref={targetRef} {...props}>\n\t\t\t<LeftContent content={leftWorks} />\n\t\t\t<RightContent content={rightWorks} scrollYProgress={scrollYProgress} />\n\t\t</section>\n\t);\n};\n\nconst LeftContent = ({ content }: { content: any }) => {\n\treturn (\n\t\t<div className=\"w-full\">\n\t\t\t{content.map(({ id, title, image, uri }, idx) => (\n\t\t\t\t<Link\n\t\t\t\t\thref={`/work/${uri}`}\n\t\t\t\t\tkey={title + \"opposite\" + id}\n\t\t\t\t\tclassName={`p-8 h-screen relative flex flex-col justify-between group`}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"invisible group-hover:visible group-hover:bg-background/40 absolute inset-0 text-center content-center text-4xl\">\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</div>\n\t\t\t\t\t<Image\n\t\t\t\t\t\theight={1200}\n\t\t\t\t\t\twidth={1200}\n\t\t\t\t\t\tkey={title + \"oppo-link-img\"}\n\t\t\t\t\t\talt={title}\n\t\t\t\t\t\tclassName=\"h-screen w-full object-cover\"\n\t\t\t\t\t\tsrc={image[0].url || \"/itjustworks.jpg\"}\n\t\t\t\t\t/>\n\t\t\t\t</Link>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n\nconst RightContent = ({\n\tcontent,\n\tscrollYProgress,\n}: {\n\tcontent: any;\n\tscrollYProgress: MotionValue<number>;\n}) => {\n\tconst top = useTransform(\n\t\tscrollYProgress,\n\t\t[0, 1],\n\t\t[`-${(content.length - 1) * 100}vh`, \"0vh\"]\n\t);\n\n\treturn (\n\t\t<div className=\"h-screen overflow-hidden sticky top-0 w-24 md:w-full\">\n\t\t\t<motion.div style={{ top }} className=\"absolute left-0 right-0\">\n\t\t\t\t{[...content].reverse().map(({ image, id, title, uri }) => (\n\t\t\t\t\t<Link\n\t\t\t\t\t\thref={`/work/${uri}`}\n\t\t\t\t\t\tkey={title + \"opposite\" + id}\n\t\t\t\t\t\tclassName={`p-8 h-screen relative flex flex-col justify-between group`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"invisible group-hover:visible group-hover:bg-background/40 absolute inset-0 text-center content-center text-4xl\">\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\theight={1200}\n\t\t\t\t\t\t\twidth={1200}\n\t\t\t\t\t\t\tkey={id + \"oppo-img\"}\n\t\t\t\t\t\t\talt={title}\n\t\t\t\t\t\t\tclassName=\"h-screen w-full object-cover\"\n\t\t\t\t\t\t\tsrc={image.src || \"/itjustworks.jpg\"}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Link>\n\t\t\t\t))}\n\t\t\t</motion.div>\n\t\t</div>\n\t);\n};\n\nexport default OppositeScroll;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}