{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scrolltrigger-replication",
  "type": "registry:block",
  "title": "Scrolltrigger replication",
  "description": "Scrolltrigger replication",
  "files": [
    {
      "path": "components/usages/scrolltriggerreplicationusage.tsx",
      "content": "import Link from \"next/link\";\n\nimport CTAButton from \"@/registry/open-source/scrolltrigger-replication/components/CTAButton\";\nimport Listing from \"@/registry/open-source/scrolltrigger-replication/components/Listing\";\nimport StickyScroll1 from \"@/registry/open-source/scrolltrigger-replication/components/StickyScroll1\";\nimport StickyScroll2 from \"@/registry/open-source/scrolltrigger-replication/components/StickyScroll2\";\nimport { GsapProvider } from \"@/registry/open-source/scrolltrigger-replication/GsapProvider\";\nimport { LenisProvider } from \"@/registry/open-source/scrolltrigger-replication/LenisProvider\";\n\nexport default function ExampleScrollReplication({ containerRef }) {\n\treturn (\n\t\t<>\n\t\t\t<LenisProvider>\n\t\t\t\t<div>\n\t\t\t\t\t<div className=\"grid min-h-screen place-items-center bg-background py-20 text-secondary\">\n\t\t\t\t\t\t<div className=\"container flex min-h-[50vh] flex-col justify-between text-center\">\n\t\t\t\t\t\t\t<h1 className=\"heading-60-150\">\n\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\thref={\"https://www.mcsaatchiabel.co.za/\"}\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\tclassName=\"block text-blue\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tm&csaatchi abel\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\tReplication\n\t\t\t\t\t\t\t</h1>\n\n\t\t\t\t\t\t\t<div className=\"heading-16-40 flex items-center justify-center gap-x-5 text-center text-blue\">\n\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\thref={\n\t\t\t\t\t\t\t\t\t\t\"https://github.com/PhanDangKhoa96/mcsaatchiabel.co.za-replication\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\tclassName=\"hover:underline\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tSource code\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t<span>|</span>\n\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\thref={\"https://www.pldkhoa.dev/playground\"}\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\tclassName=\"hover:underline\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tAll demos\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"h-px bg-background\"></div>\n\t\t\t\t\t<StickyScroll1 containerRef={containerRef} />\n\t\t\t\t\t<StickyScroll2 containerRef={containerRef} />\n\t\t\t\t\t<CTAButton />\n\t\t\t\t\t<Listing />\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"heading-60-150 container grid\n             h-screen place-items-center text-balance text-center text-blue\"\n\t\t\t\t\t>\n\t\t\t\t\t\tHave a good day!\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</LenisProvider>\n\t\t\t<GsapProvider scrollTrigger />\n\t\t</>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/scrolltriggerreplicationusage.tsx",
      "content": "import Link from \"next/link\";\n\nimport CTAButton from \"@/registry/open-source/scrolltrigger-replication/components/CTAButton\";\nimport Listing from \"@/registry/open-source/scrolltrigger-replication/components/Listing\";\nimport StickyScroll1 from \"@/registry/open-source/scrolltrigger-replication/components/StickyScroll1\";\nimport StickyScroll2 from \"@/registry/open-source/scrolltrigger-replication/components/StickyScroll2\";\nimport { GsapProvider } from \"@/registry/open-source/scrolltrigger-replication/GsapProvider\";\nimport { LenisProvider } from \"@/registry/open-source/scrolltrigger-replication/LenisProvider\";\n\nexport default function ExampleScrollReplication({ containerRef }) {\n\treturn (\n\t\t<>\n\t\t\t<LenisProvider>\n\t\t\t\t<div>\n\t\t\t\t\t<div className=\"grid min-h-screen place-items-center bg-background py-20 text-secondary\">\n\t\t\t\t\t\t<div className=\"container flex min-h-[50vh] flex-col justify-between text-center\">\n\t\t\t\t\t\t\t<h1 className=\"heading-60-150\">\n\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\thref={\"https://www.mcsaatchiabel.co.za/\"}\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\tclassName=\"block text-blue\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tm&csaatchi abel\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\tReplication\n\t\t\t\t\t\t\t</h1>\n\n\t\t\t\t\t\t\t<div className=\"heading-16-40 flex items-center justify-center gap-x-5 text-center text-blue\">\n\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\thref={\n\t\t\t\t\t\t\t\t\t\t\"https://github.com/PhanDangKhoa96/mcsaatchiabel.co.za-replication\"\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\tclassName=\"hover:underline\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tSource code\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t<span>|</span>\n\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\thref={\"https://www.pldkhoa.dev/playground\"}\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\tclassName=\"hover:underline\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tAll demos\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"h-px bg-background\"></div>\n\t\t\t\t\t<StickyScroll1 containerRef={containerRef} />\n\t\t\t\t\t<StickyScroll2 containerRef={containerRef} />\n\t\t\t\t\t<CTAButton />\n\t\t\t\t\t<Listing />\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"heading-60-150 container grid\n             h-screen place-items-center text-balance text-center text-blue\"\n\t\t\t\t\t>\n\t\t\t\t\t\tHave a good day!\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</LenisProvider>\n\t\t\t<GsapProvider scrollTrigger />\n\t\t</>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/scrolltrigger-replication/components/CTAButton.tsx",
      "content": "\"use client\";\n\nimport React, { useRef } from \"react\";\n\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\n\nimport SectionHeading from \"./SectionHeading\";\n\nconst CTAButton = () => {\n\tconst containerRef = useRef(null);\n\tconst buttonRef = useRef(null);\n\n\tconst { contextSafe } = useGSAP({ scope: containerRef });\n\n\tconst onMouseOver = contextSafe(() => {\n\t\tgsap.to(buttonRef.current, {\n\t\t\t\"--cta-target\": \"0%\",\n\t\t\tease: \"power1.inOut\",\n\t\t\tduration: 0.4,\n\t\t});\n\t});\n\n\tconst onMouseOut = contextSafe(() => {\n\t\tgsap.to(buttonRef.current, {\n\t\t\t\"--cta-target\": \"100%\",\n\t\t\tease: \"power1.inOut\",\n\t\t\tduration: 0.4,\n\t\t});\n\t});\n\n\treturn (\n\t\t<section ref={containerRef} id=\"button\">\n\t\t\t<SectionHeading title=\"CTA Button\" />\n\n\t\t\t<div className=\"container grid min-h-[50vh] place-items-center py-10 lg:py-20\">\n\t\t\t\t<div>\n\t\t\t\t\t<button\n\t\t\t\t\t\tref={buttonRef}\n\t\t\t\t\t\tclassName=\"peer relative isolate pt-1\"\n\t\t\t\t\t\tonMouseOver={onMouseOver}\n\t\t\t\t\t\tonMouseOut={onMouseOut}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackground: `linear-gradient(to bottom, #fff var(--cta-target), #000 var(--cta-target))`,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"heading-60-150 inline-block bg-[linear-gradient(to_bottom,#000_var(--cta-target),#fff_var(--cta-target))] pt-1 text-foreground [-webkit-background-clip:text] [-webkit-text-fill-color:transparent] lg:pt-2 lg:text-[200px]\">\n\t\t\t\t\t\t\tContact Us\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\n\t\t\t\t\t<div className=\"grid grid-cols-3 overflow-hidden [&_div]:peer-hover:-translate-y-full\">\n\t\t\t\t\t\t<div className=\"ease-power-1-in-out duration-400 relative aspect-3/1 overflow-hidden transition-transform\">\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\tclassName=\"absolute inset-0 h-full w-full object-cover\"\n\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"ease-power-1-in-out duration-400 relative aspect-3/2 h-2/3 overflow-hidden transition-transform\">\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\tclassName=\"absolute inset-0 h-full w-full object-cover\"\n\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"ease-power-1-in-out duration-400 relative aspect-square h-full overflow-hidden transition-transform\">\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\tclassName=\"absolute inset-0 h-full w-full object-cover\"\n\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t);\n};\n\nexport default CTAButton;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/scrolltrigger-replication/components/SectionHeading.tsx",
      "content": "import clsx from \"clsx\";\nimport React from \"react\";\n\nconst SectionHeading = ({title}: {title: string}) => {\n    return (\n        <h2\n            className={\n                \"heading-60-150 container scale-75 bg-background py-10 text-center text-foreground lg:py-20\"\n            }>\n            {title}\n        </h2>\n    );\n};\n\nexport default SectionHeading;",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/scrolltrigger-replication/components/Listing.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\n\nimport clsx from \"clsx\";\n\nimport SectionHeading from \"./SectionHeading\";\n\nconst contentArray = [\n\t{\n\t\ttitle: \"AWARENESS\",\n\t\tdescription:\n\t\t\t\"Creating visibility for brands through strategic placement in high-traffic areas and across multiple media channels to maximize reach.\",\n\t},\n\t{\n\t\ttitle: \"INSIGHTS\",\n\t\tdescription:\n\t\t\t\"Utilizing data to understand customer behavior, preferences, and trends, helping to tailor campaigns for better engagement and results.\",\n\t},\n\t{\n\t\ttitle: \"DESIGN\",\n\t\tdescription:\n\t\t\t\"Developing visually appealing and impactful designs that communicate brand messages and resonate with the target audience.\",\n\t},\n\t{\n\t\ttitle: \"MARKETING\",\n\t\tdescription:\n\t\t\t\"Leveraging digital platforms such as social media, search engines, and email to reach and engage audiences effectively.\",\n\t},\n\t{\n\t\ttitle: \"STRATEGY\",\n\t\tdescription:\n\t\t\t\"Formulating a comprehensive marketing plan that aligns with business goals and ensures consistent brand messaging across all channels.\",\n\t},\n\t{\n\t\ttitle: \"DISTRIBUTION\",\n\t\tdescription:\n\t\t\t\"Ensuring product availability and brand presence across multiple channels, from online platforms to physical stores.\",\n\t},\n\t{\n\t\ttitle: \"RELATIONSHIP\",\n\t\tdescription:\n\t\t\t\"Building and nurturing long-term relationships with customers through personalized engagement and support.\",\n\t},\n\t{\n\t\ttitle: \"ACTIVATION\",\n\t\tdescription:\n\t\t\t\"Creating memorable experiences that bring brands to life and engage customers directly through interactive events and promotions.\",\n\t},\n];\n\nconst Listing = () => {\n\tconst [activeIndex, setActiveIndex] = useState<number>(-1);\n\tconst [previousIndex, setPreviousIndex] = useState<number>(-1);\n\n\treturn (\n\t\t<section id=\"listing\">\n\t\t\t<SectionHeading title=\"Listing\" />\n\n\t\t\t<ul className=\"\">\n\t\t\t\t{contentArray.map(({ description, title }, index) => {\n\t\t\t\t\tconst isActive = index === activeIndex;\n\t\t\t\t\tconst isHovered = activeIndex !== null && index < activeIndex;\n\t\t\t\t\tconst isLastItem = index === contentArray.length - 1;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t\t\t\tsetActiveIndex(index);\n\t\t\t\t\t\t\t\tsetPreviousIndex(index - 1);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseLeave={() => {\n\t\t\t\t\t\t\t\tif (isLastItem) {\n\t\t\t\t\t\t\t\t\tsetActiveIndex(index + 1);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tsetActiveIndex(-1);\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\tsetPreviousIndex(index);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tclassName=\"group relative isolate overflow-hidden border-b border-black py-5 first-of-type:border-t\"\n\t\t\t\t\t\t\tkey={index + \"listing-item\"}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={clsx(\n\t\t\t\t\t\t\t\t\t\"absolute inset-0 -z-10 bg-blue transition-transform duration-300 ease-linear\",\n\t\t\t\t\t\t\t\t\tactiveIndex === -1 &&\n\t\t\t\t\t\t\t\t\t\tpreviousIndex !== index &&\n\t\t\t\t\t\t\t\t\t\t\"duration-0!\",\n\n\t\t\t\t\t\t\t\t\tisActive\n\t\t\t\t\t\t\t\t\t\t? \"translate-y-0\"\n\t\t\t\t\t\t\t\t\t\t: isHovered\n\t\t\t\t\t\t\t\t\t\t\t? \"translate-y-full\"\n\t\t\t\t\t\t\t\t\t\t\t: \"-translate-y-full\"\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t></div>\n\t\t\t\t\t\t\t<div className=\"container grid grid-cols-[1fr_4fr_6fr]\">\n\t\t\t\t\t\t\t\t<div className=\"heading-32-54 transition duration-300 ease-in-out group-hover:text-foreground\">\n\t\t\t\t\t\t\t\t\t0{index + 1}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<h3 className=\"heading-32-54 transition duration-300 ease-in-out group-hover:text-foreground\">\n\t\t\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t<p className=\"max-w-xl text-sm text-foreground\">\n\t\t\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</ul>\n\t\t</section>\n\t);\n};\n\nexport default Listing;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/scrolltrigger-replication/components/StickyScroll1.tsx",
      "content": "\"use client\";\r\n\r\nimport React, { useRef } from \"react\";\r\n\r\nimport { useGSAP } from \"@gsap/react\";\r\nimport clsx from \"clsx\";\r\nimport gsap from \"gsap\";\r\nimport { ScrollTrigger } from \"gsap/dist/ScrollTrigger\";\r\n\r\nimport SectionHeading from \"./SectionHeading\";\r\n\r\ngsap.registerPlugin(ScrollTrigger);\r\n\r\nconst contentArray = [\r\n\t{\r\n\t\ttitle: \"CLARITY IN DESIGN\",\r\n\t\tdescription:\r\n\t\t\t\"Our mission is clear: to communicate effectively. We strip away the noise, revealing only the essence of the message, so that what remains is impactful and unforgettable.\",\r\n\t\tbgColor: \"#1d1ae5\",\r\n\t\timage: \"/itjustworks.jpg\", // Replace with the path to your silhouette image\r\n\t\tisWhiteText: true,\r\n\t},\r\n\t{\r\n\t\ttitle: \"FOCUSED ON PURPOSE\",\r\n\t\tdescription:\r\n\t\t\t\"Every idea we craft serves a single purpose—meaningful impact. By aligning every element with this goal, we create work that resonates deeply with audiences.\",\r\n\t\tbgColor: \"#e46ba1\",\r\n\t\timage: \"/itjustworks.jpg\", // Replace with the path to your silhouette image\r\n\t\tisWhiteText: true,\r\n\t},\r\n\t{\r\n\t\ttitle: \"IN PURSUIT OF AUTHENTICITY\",\r\n\t\tdescription:\r\n\t\t\t\"Authenticity is our compass. We create with intent, bringing genuine messages that people connect with, leaving a lasting impression beyond the surface.\",\r\n\t\tbgColor: \"#ffe600\",\r\n\t\timage: \"/itjustworks.jpg\", // Replace with the path to your silhouette image\r\n\t\tisWhiteText: false,\r\n\t},\r\n\t{\r\n\t\ttitle: \"THE ART OF SIMPLICITY\",\r\n\t\tdescription:\r\n\t\t\t\"Simplicity is powerful. By distilling every message to its core, we produce work that is both memorable and universally understood, making complex ideas accessible to everyone.\",\r\n\t\tbgColor: \"#1d1ae5\",\r\n\t\timage: \"/itjustworks.jpg\", // Replace with the path to your silhouette image\r\n\t\tisWhiteText: true,\r\n\t},\r\n];\r\n\r\nconst StickyScroll1 = ({ containerRef }) => {\r\n\t// const containerRef = useRef<HTMLDivElement>(null);\r\n\tuseGSAP(\r\n\t\t() => {\r\n\t\t\tconst elements =\r\n\t\t\t\tcontainerRef.current &&\r\n\t\t\t\tcontainerRef.current?.querySelectorAll(\".screen\");\r\n\r\n\t\t\telements?.forEach((el, index) => {\r\n\t\t\t\tconst isLastItem = index + 1 === elements.length;\r\n\t\t\t\tgsap.to(el, {\r\n\t\t\t\t\tyPercent: isLastItem ? 0 : -100,\r\n\t\t\t\t\tscrollTrigger: {\r\n\t\t\t\t\t\t// scroller: \".scroll-container\",\r\n\t\t\t\t\t\ttrigger: el,\r\n\t\t\t\t\t\tstart: () => `+=${index * 100}% top`,\r\n\t\t\t\t\t\tend: \"+=100%\",\r\n\t\t\t\t\t\tscrub: true,\r\n\t\t\t\t\t},\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t\t},\r\n\t\t{ scope: containerRef }\r\n\t);\r\n\treturn (\r\n\t\t<section id=\"sticky-scroll-1\">\r\n\t\t\t<SectionHeading title=\"Sticky Scroll Variant 1\" />\r\n\t\t\t<div\r\n\t\t\t\tstyle={{ height: `${contentArray.length * 100}vh` }}\r\n\t\t\t\t// ref={containerRef}\r\n\t\t\t>\r\n\t\t\t\t<div className=\"sticky top-0 h-screen\">\r\n\t\t\t\t\t{contentArray.map(\r\n\t\t\t\t\t\t(\r\n\t\t\t\t\t\t\t{ bgColor, description, image, isWhiteText, title },\r\n\t\t\t\t\t\t\tindex\r\n\t\t\t\t\t\t) => {\r\n\t\t\t\t\t\t\tconst isLastItem = index + 1 === contentArray.length;\r\n\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\tkey={index + \"sticky-scroll\"}\r\n\t\t\t\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\t\t\t\tbackgroundColor: bgColor,\r\n\t\t\t\t\t\t\t\t\t\tzIndex: contentArray.length - index,\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\tclassName={clsx(\r\n\t\t\t\t\t\t\t\t\t\t\"screen absolute left-0 block h-screen w-full py-20\",\r\n\t\t\t\t\t\t\t\t\t\tisLastItem ? \"bottom-0\" : \"top-0\"\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t\tclassName={clsx(\r\n\t\t\t\t\t\t\t\t\t\t\t\"container flex h-full flex-col lg:flex-row lg:flex-wrap\",\r\n\t\t\t\t\t\t\t\t\t\t\tisWhiteText ? \"text-foreground\" : \"text-foreground\"\r\n\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<div className=\"mb-8 w-full lg:mb-12\">\r\n\t\t\t\t\t\t\t\t\t\t\t<h3\r\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"heading-70-170 max-w-3xl text-balance\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t{title}\r\n\t\t\t\t\t\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t\t\t\t\t<div className=\"lg:w-1/2\">\r\n\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-balance lg:max-w-md lg:text-lg\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t{description}\r\n\t\t\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t\t\t\t\t{image && (\r\n\t\t\t\t\t\t\t\t\t\t\t<img\r\n\t\t\t\t\t\t\t\t\t\t\t\tsrc={image}\r\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"ml-auto mt-auto aspect-square w-2/3 max-w-md object-cover sm:w-1/3\"\r\n\t\t\t\t\t\t\t\t\t\t\t\talt=\"\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tloading=\"lazy\"\r\n\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t)}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</section>\r\n\t);\r\n};\r\n\r\nexport default StickyScroll1;\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/scrolltrigger-replication/components/StickyScroll2.tsx",
      "content": "\"use client\";\n\nimport React, { useRef, useState } from \"react\";\n\nimport { useGSAP } from \"@gsap/react\";\nimport clsx from \"clsx\";\nimport { ScrollTrigger } from \"gsap/dist/ScrollTrigger\";\n\nimport SectionHeading from \"./SectionHeading\";\n\nconst contentArray = [\n\t{\n\t\ttitle: \"RESILIENT\",\n\t\tdescription:\n\t\t\t\"We stand tall, unshaken by challenges. Where others see obstacles, we see stepping stones. Our commitment to persevere, no matter the odds, defines who we are and fuels our progress.\",\n\t\timage: \"/itjustworks.jpg\", // Replace with your actual image path\n\t},\n\t{\n\t\ttitle: \"CURIOUS\",\n\t\tdescription:\n\t\t\t\"We question, we explore, we learn. Curiosity drives us to discover the unknown, fueling innovation and creativity. We welcome new ideas and fresh perspectives to stay ahead.\",\n\t\timage: \"/itjustworks.jpg\", // Replace with your actual image path\n\t},\n\t{\n\t\ttitle: \"INSPIRED\",\n\t\tdescription:\n\t\t\t\"Inspiration is everywhere, if we’re willing to see it. Our journey is powered by a vision to make an impact and leave a mark. Each step we take brings us closer to something greater.\",\n\t\timage: \"/itjustworks.jpg\", // Replace with your actual image path\n\t},\n\t{\n\t\ttitle: \"BOLD\",\n\t\tdescription:\n\t\t\t\"We take risks, embracing uncertainty to make meaningful change. Boldness isn’t about recklessness—it’s about having the courage to pursue the extraordinary and bring it to life.\",\n\t\timage: \"/itjustworks.jpg\", // Replace with your actual image path\n\t},\n\t{\n\t\ttitle: \"OPTIMISTIC\",\n\t\tdescription:\n\t\t\t\"We look to the future with hope and determination. Believing in possibilities allows us to create the unimaginable. With every challenge, we grow, and with every success, we soar.\",\n\t\timage: \"/itjustworks.jpg\", // Replace with your actual image path\n\t},\n];\n\nconst StickyScroll2 = ({ containerRef }) => {\n\t// const containerRef = useRef<HTMLDivElement>(null);\n\tconst [activeIndex, setActiveIndex] = useState(0);\n\tuseGSAP(\n\t\t() => {\n\t\t\tconst elements =\n\t\t\t\tcontainerRef.current &&\n\t\t\t\tcontainerRef.current?.querySelectorAll(\".screen\");\n\n\t\t\telements?.forEach((el, index) => {\n\t\t\t\tScrollTrigger.create({\n\t\t\t\t\ttrigger: el,\n\t\t\t\t\tstart: () => `top-=100% top`,\n\t\t\t\t\tend: \"bottom-=100%\",\n\t\t\t\t\tonToggle: (self) => {\n\t\t\t\t\t\tif (self.isActive) {\n\t\t\t\t\t\t\tsetActiveIndex(index);\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t});\n\t\t},\n\t\t{ scope: containerRef }\n\t);\n\treturn (\n\t\t<section id=\"sticky-scroll-2\">\n\t\t\t<SectionHeading title=\"Sticky Scroll Variant 2\" />\n\t\t\t<div className=\"h-px bg-background\"></div>\n\t\t\t<div ref={containerRef}>\n\t\t\t\t<div className=\"container sticky top-0 grid h-screen place-items-center bg-background\">\n\t\t\t\t\t<div className=\"w-full space-y-5 lg:flex\">\n\t\t\t\t\t\t<h3 className=\"heading-70-170 flex flex-col lg:text-[200px]\">\n\t\t\t\t\t\t\t<span>Values</span>\n\t\t\t\t\t\t\t<span className=\"inline-flex items-stretch gap-x-2\">\n\t\t\t\t\t\t\t\t<span className=\"relative inline-block w-56 -translate-y-1.5 overflow-hidden py-1\">\n\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"absolute inset-0 h-full w-full object-cover\"\n\t\t\t\t\t\t\t\t\t></img>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span>we</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span>value</span>\n\t\t\t\t\t\t</h3>\n\n\t\t\t\t\t\t<div className=\"ml-auto max-w-sm space-y-2 font-medium lg:max-w-md\">\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tWe champion creativity and authenticity. We’re a space\n\t\t\t\t\t\t\t\tfor innovative and bold thinkers. Yet, there are five\n\t\t\t\t\t\t\t\tcore values that we hold dear, shaping our culture and\n\t\t\t\t\t\t\t\tour identity.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<p>Resilient. Curious. Driven. Thoughtful. Inclusive.</p>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\tThese are the principles we strive to live by every day.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"relative bg-yellow\">\n\t\t\t\t\t<div className=\"sticky top-0 h-screen\">\n\t\t\t\t\t\t{contentArray.map(({ image, title }, index) => {\n\t\t\t\t\t\t\tconst isActive = activeIndex == index;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName={clsx(\n\t\t\t\t\t\t\t\t\t\t\"container absolute inset-0 flex flex-col justify-between py-10 transition-opacity duration-500 lg:pb-6\",\n\t\t\t\t\t\t\t\t\t\t!isActive && \"invisible\"\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<h3 className=\"heading-70-170\">{title}</h3>\n\n\t\t\t\t\t\t\t\t\t<div className=\"aspect-square w-full max-w-60 overflow-hidden lg:max-w-sm\">\n\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\tsrc={image}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-full w-full object-cover\"\n\t\t\t\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{contentArray.map(({ description }, index) => {\n\t\t\t\t\t\tconst isActive = activeIndex == index;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={index + \"sticky-scroll-2\"}\n\t\t\t\t\t\t\t\tclassName=\"screen container h-screen w-full\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"flex gap-x-10 sm:ml-64 lg:ml-[500px] lg:justify-between\">\n\t\t\t\t\t\t\t\t\t<h4 className=\"font-bebasNeue text-2xl font-bold lg:text-5xl\">\n\t\t\t\t\t\t\t\t\t\t0{index + 1}\n\t\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\t\t<p className=\"max-w-md font-medium lg:max-w-lg lg:text-xl\">\n\t\t\t\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\t);\n};\n\nexport default StickyScroll2;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/scrolltrigger-replication/GsapProvider.tsx",
      "content": "\"use client\";\n\nimport { useLayoutEffect } from \"react\";\n\nimport Tempus from \"tempus\";\nimport gsap from \"gsap\";\n\nimport { ScrollTriggerConfig } from \"./ScrollTriggerConfig\";\n\nexport function GsapProvider({ scrollTrigger = false }) {\n\tuseLayoutEffect(() => {\n\t\tgsap.defaults({ ease: \"none\" });\n\n\t\t// merge rafs\n\t\tgsap.ticker.lagSmoothing(0);\n\t\tgsap.ticker.remove(gsap.updateRoot);\n\t\tTempus?.add((time: number) => {\n\t\t\tgsap.updateRoot(time / 1000);\n\t\t}, 0);\n\t}, []);\n\n\treturn scrollTrigger && <ScrollTriggerConfig />;\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/scrolltrigger-replication/ScrollTriggerConfig.tsx",
      "content": "\"use client\";\r\n\r\nimport { useEffect, useLayoutEffect } from \"react\";\r\n\r\nimport gsap from \"gsap\";\r\nimport { ScrollTrigger } from \"gsap/dist/ScrollTrigger\";\r\nimport { useLenis } from \"lenis/react\";\r\n\r\ngsap.registerPlugin(ScrollTrigger);\r\n\r\nexport function ScrollTriggerConfig() {\r\n\tuseLayoutEffect(() => {\r\n\t\tScrollTrigger.clearScrollMemory(\"manual\");\r\n\t}, []);\r\n\r\n\tconst lenis = useLenis(ScrollTrigger.update);\r\n\tuseEffect(() => ScrollTrigger.refresh(), [lenis]);\r\n\r\n\treturn null;\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/scrolltrigger-replication/LenisProvider.tsx",
      "content": "\"use client\";\n\nimport \"lenis/dist/lenis.css\";\nimport {ReactLenis} from \"lenis/react\";\nimport {PropsWithChildren} from \"react\";\n\nexport function LenisProvider({children}: PropsWithChildren) {\n    return <ReactLenis root>{children}</ReactLenis>;\n}",
      "type": "registry:ui"
    }
  ]
}