{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sticky-scroll-reveal",
  "type": "registry:block",
  "title": "Sticky scroll reveal",
  "description": "Sticky scroll reveal",
  "files": [
    {
      "path": "components/usages/stickyscrollrevealusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport Image from \"next/image\";\n\nimport { StickyScroll } from \"@/registry/open-source/sticky-scroll-reveal\";\n\nexport const content = [\n\t{\n\t\ttitle: \"Collaborative Editing\",\n\t\tdescription:\n\t\t\t\"Work together in real time with your team, clients, and stakeholders. Collaborate on documents, share ideas, and make decisions quickly. With our platform, you can streamline your workflow and increase productivity.\",\n\t\tcontent: (\n\t\t\t<div className=\"flex h-full w-full items-center justify-center bg-[linear-gradient(to_bottom_right,var(--cyan-500),var(--emerald-500))] text-secondary\">\n\t\t\t\tCollaborative Editing\n\t\t\t</div>\n\t\t),\n\t},\n\t{\n\t\ttitle: \"Real time changes\",\n\t\tdescription:\n\t\t\t\"See changes as they happen. With our platform, you can track every modification in real time. No more confusion about the latest version of your project. Say goodbye to the chaos of version control and embrace the simplicity of real-time updates.\",\n\t\tcontent: (\n\t\t\t<div className=\"flex h-full w-full items-center justify-center text-secondary\">\n\t\t\t\t<Image\n\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\twidth={300}\n\t\t\t\t\theight={300}\n\t\t\t\t\tclassName=\"h-full w-full object-cover\"\n\t\t\t\t\talt=\"linear board demo\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t),\n\t},\n\t{\n\t\ttitle: \"Version control\",\n\t\tdescription:\n\t\t\t\"Experience real-time updates and never stress about version control again. Our platform ensures that you're always working on the most recent version of your project, eliminating the need for constant manual updates. Stay in the loop, keep your team aligned, and maintain the flow of your work without any interruptions.\",\n\t\tcontent: (\n\t\t\t<div className=\"flex h-full w-full items-center justify-center bg-[linear-gradient(to_bottom_right,var(--orange-500),var(--yellow-500))] text-secondary\">\n\t\t\t\tVersion control\n\t\t\t</div>\n\t\t),\n\t},\n\t{\n\t\ttitle: \"Running out of content\",\n\t\tdescription:\n\t\t\t\"Experience real-time updates and never stress about version control again. Our platform ensures that you're always working on the most recent version of your project, eliminating the need for constant manual updates. Stay in the loop, keep your team aligned, and maintain the flow of your work without any interruptions.\",\n\t\tcontent: (\n\t\t\t<div className=\"flex h-full w-full items-center justify-center bg-[linear-gradient(to_bottom_right,var(--cyan-500),var(--emerald-500))] text-secondary\">\n\t\t\t\tRunning out of content\n\t\t\t</div>\n\t\t),\n\t},\n];\n\nexport default function StickyScrollRevealDemo() {\n\treturn (\n\t\t<div className=\"w-full py-4\">\n\t\t\t<StickyScroll content={content} />\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/stickyscrollrevealusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport Image from \"next/image\";\n\nimport { StickyScroll } from \"@/registry/open-source/sticky-scroll-reveal\";\n\nexport const content = [\n\t{\n\t\ttitle: \"Collaborative Editing\",\n\t\tdescription:\n\t\t\t\"Work together in real time with your team, clients, and stakeholders. Collaborate on documents, share ideas, and make decisions quickly. With our platform, you can streamline your workflow and increase productivity.\",\n\t\tcontent: (\n\t\t\t<div className=\"flex h-full w-full items-center justify-center bg-[linear-gradient(to_bottom_right,var(--cyan-500),var(--emerald-500))] text-secondary\">\n\t\t\t\tCollaborative Editing\n\t\t\t</div>\n\t\t),\n\t},\n\t{\n\t\ttitle: \"Real time changes\",\n\t\tdescription:\n\t\t\t\"See changes as they happen. With our platform, you can track every modification in real time. No more confusion about the latest version of your project. Say goodbye to the chaos of version control and embrace the simplicity of real-time updates.\",\n\t\tcontent: (\n\t\t\t<div className=\"flex h-full w-full items-center justify-center text-secondary\">\n\t\t\t\t<Image\n\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\twidth={300}\n\t\t\t\t\theight={300}\n\t\t\t\t\tclassName=\"h-full w-full object-cover\"\n\t\t\t\t\talt=\"linear board demo\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t),\n\t},\n\t{\n\t\ttitle: \"Version control\",\n\t\tdescription:\n\t\t\t\"Experience real-time updates and never stress about version control again. Our platform ensures that you're always working on the most recent version of your project, eliminating the need for constant manual updates. Stay in the loop, keep your team aligned, and maintain the flow of your work without any interruptions.\",\n\t\tcontent: (\n\t\t\t<div className=\"flex h-full w-full items-center justify-center bg-[linear-gradient(to_bottom_right,var(--orange-500),var(--yellow-500))] text-secondary\">\n\t\t\t\tVersion control\n\t\t\t</div>\n\t\t),\n\t},\n\t{\n\t\ttitle: \"Running out of content\",\n\t\tdescription:\n\t\t\t\"Experience real-time updates and never stress about version control again. Our platform ensures that you're always working on the most recent version of your project, eliminating the need for constant manual updates. Stay in the loop, keep your team aligned, and maintain the flow of your work without any interruptions.\",\n\t\tcontent: (\n\t\t\t<div className=\"flex h-full w-full items-center justify-center bg-[linear-gradient(to_bottom_right,var(--cyan-500),var(--emerald-500))] text-secondary\">\n\t\t\t\tRunning out of content\n\t\t\t</div>\n\t\t),\n\t},\n];\n\nexport default function StickyScrollRevealDemo() {\n\treturn (\n\t\t<div className=\"w-full py-4\">\n\t\t\t<StickyScroll content={content} />\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/sticky-scroll-reveal.tsx",
      "content": "\"use client\";\n\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { motion, useMotionValueEvent, useScroll } from \"motion/react\";\n\n// Credit:\n// //https://ui.aceternity.com/components/sticky-scroll-reveal\n\nexport const StickyScroll = ({\n\tcontent,\n\tcontentClassName,\n}: {\n\tcontent: {\n\t\ttitle: string;\n\t\tdescription: string;\n\t\tcontent?: React.ReactNode | any;\n\t}[];\n\tcontentClassName?: string;\n}) => {\n\tconst [activeCard, setActiveCard] = React.useState(0);\n\tconst ref = useRef<any>(null);\n\tconst { scrollYProgress } = useScroll({\n\t\t// uncomment line 22 and comment line 23 if you DONT want the overflow container and want to have it change on the entire page scroll\n\t\ttarget: ref,\n\t\toffset: [\"start start\", \"end start\"],\n\t});\n\tconst cardLength = content.length;\n\n\tuseMotionValueEvent(scrollYProgress, \"change\", (latest) => {\n\t\tconst cardsBreakpoints = content.map((_, index) => index / cardLength);\n\t\tconst closestBreakpointIndex = cardsBreakpoints.reduce(\n\t\t\t(acc, breakpoint, index) => {\n\t\t\t\tconst distance = Math.abs(latest - breakpoint);\n\t\t\t\tif (distance < Math.abs(latest - cardsBreakpoints[acc])) {\n\t\t\t\t\treturn index;\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t},\n\t\t\t0\n\t\t);\n\t\tsetActiveCard(closestBreakpointIndex);\n\t});\n\n\tconst backgroundColors = [\n\t\t\"#0f172a\", // slate-900\n\t\t\"#000000\", // black\n\t\t\"#171717\", // neutral-900\n\t];\n\tconst linearGradients = [\n\t\t\"linear-gradient(to bottom right, #06b6d4, #10b981)\", // cyan-500 to emerald-500\n\t\t\"linear-gradient(to bottom right, #ec4899, #6366f1)\", // pink-500 to indigo-500\n\t\t\"linear-gradient(to bottom right, #f97316, #eab308)\", // orange-500 to yellow-500\n\t];\n\n\tconst [backgroundGradient, setBackgroundGradient] = useState(\n\t\tlinearGradients[0]\n\t);\n\n\tuseEffect(() => {\n\t\tsetBackgroundGradient(\n\t\t\tlinearGradients[activeCard % linearGradients.length]\n\t\t);\n\t}, [activeCard]);\n\n\treturn (\n\t\t<motion.div\n\t\t\tanimate={{\n\t\t\t\tbackgroundColor:\n\t\t\t\t\tbackgroundColors[activeCard % backgroundColors.length],\n\t\t\t}}\n\t\t\tclassName=\"relative flex justify-center space-x-10 rounded-md p-10\"\n\t\t\tref={ref}\n\t\t>\n\t\t\t<div className=\"div relative flex items-start px-4\">\n\t\t\t\t<div className=\"max-w-2xl\">\n\t\t\t\t\t{content.map((item, index) => (\n\t\t\t\t\t\t<div key={item.title + index} className=\"my-20\">\n\t\t\t\t\t\t\t<motion.h2\n\t\t\t\t\t\t\t\tinitial={{\n\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\t\topacity: activeCard === index ? 1 : 0.3,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tclassName=\"text-2xl font-bold text-slate-100\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{item.title}\n\t\t\t\t\t\t\t</motion.h2>\n\t\t\t\t\t\t\t<motion.p\n\t\t\t\t\t\t\t\tinitial={{\n\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\t\topacity: activeCard === index ? 1 : 0.3,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tclassName=\"text-kg mt-10 max-w-sm text-slate-300\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{item.description}\n\t\t\t\t\t\t\t</motion.p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t\t<div className=\"h-40\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tstyle={{ background: backgroundGradient }}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"sticky top-10 hidden h-60 w-80 overflow-hidden rounded-md bg-background lg:block\",\n\t\t\t\t\tcontentClassName\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{content[activeCard].content ?? null}\n\t\t\t</div>\n\t\t</motion.div>\n\t);\n};\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"
    }
  ]
}