{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "horizontal-scroll",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/external/horizontal-scroll.txt",
      "content": "// @ts-nocheck\r\n'use client';\r\nimport Image from 'next/image';\r\n\r\nimport { useEffect, useRef } from 'react';\r\nimport { animate, scroll, spring } from 'motion';\r\nimport { ReactLenis } from 'lenis/react';\r\n\r\nexport default function HorizontalScroll(): JSX.Element {\r\n  const ulRef = useRef<HTMLUListElement>(null);\r\n\r\n  useEffect(() => {\r\n    const items = document.querySelectorAll('li');\r\n\r\n    if (ulRef.current) {\r\n      const controls = animate(\r\n        ulRef.current,\r\n        {\r\n          transform: ['none', `translateX(-${items.length - 1}00vw)`],\r\n        } as any,\r\n        { easing: spring() }\r\n      );\r\n      const section = document.querySelector('section');\r\n      if (section) {\r\n        scroll(controls, { target: section });\r\n      }\r\n    }\r\n\r\n    const segmentLength = 1 / items.length;\r\n    items.forEach((item, i) => {\r\n      const header = item.querySelector('h2');\r\n\r\n      if (header) {\r\n        const section = document.querySelector('section');\r\n        if (section) {\r\n          scroll(animate([header] as any, { x: [800, -800] } as any), {\r\n            target: section,\r\n            offset: [\r\n              [i * segmentLength, 1],\r\n              [(i + 1) * segmentLength, 0],\r\n            ],\r\n          });\r\n        }\r\n      }\r\n    });\r\n  }, []);\r\n\r\n  return (\r\n    <ReactLenis root>\r\n      <main>\r\n        <article>\r\n          <header className='text-white relative  w-full bg-slate-950  grid place-content-center  h-[80vh]'>\r\n            <div className='absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-size-[14px_24px] mask-[radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]'></div>\r\n\r\n            <h1 className='text-6xl font-bold text-center tracking-tight'>\r\n              I know You Love to Scroll <br />\r\n              So Scroll\r\n            </h1>\r\n          </header>\r\n          <section className='h-[500vh] relative'>\r\n            <ul ref={ulRef} className='flex sticky top-0'>\r\n              <li className='h-screen w-screen bg-red-400 flex flex-col justify-center overflow-hidden  items-center'>\r\n                <h2 className='text-[20vw] font-semibold relative bottom-5 inline-block text-black'>\r\n                  PASSION\r\n                </h2>\r\n                <Image\r\n                  src='https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=600&fit=crop'\r\n                  className='2xl:w-[550px] w-[380px] absolute bottom-0'\r\n                  width={500}\r\n                  height={500}\r\n                  alt='image'\r\n                />\r\n              </li>\r\n              <li className='h-screen w-screen bg-blue-400 flex flex-col justify-center overflow-hidden  items-center'>\r\n                <h2 className='text-[20vw] font-semibold relative bottom-5 inline-block text-black'>\r\n                  WORK\r\n                </h2>\r\n                <Image\r\n                  src='https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=600&h=600&fit=crop'\r\n                  className='2xl:w-[550px] w-[380px] absolute bottom-0'\r\n                  width={500}\r\n                  height={500}\r\n                  alt='image'\r\n                />\r\n              </li>\r\n              <li className='h-screen w-screen bg-orange-400 flex flex-col justify-center overflow-hidden  items-center'>\r\n                <h2 className='text-[20vw] font-semibold relative bottom-5 inline-block text-black'>\r\n                  MOTIVATION\r\n                </h2>\r\n                <Image\r\n                  src='https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=600&fit=crop'\r\n                  className='2xl:w-[550px] w-[380px] absolute bottom-0'\r\n                  width={500}\r\n                  height={500}\r\n                  alt='image'\r\n                />\r\n              </li>\r\n              <li className='h-screen w-screen bg-yellow-400 flex flex-col justify-center overflow-hidden  items-center'>\r\n                <h2 className='text-[20vw] font-semibold relative bottom-5 inline-block text-black'>\r\n                  INSPIRATION\r\n                </h2>\r\n                <Image\r\n                  src='https://images.unsplash.com/photo-1531482615713-2afd69097998?w=600&h=600&fit=crop'\r\n                  className='2xl:w-[550px] w-[380px] absolute bottom-0'\r\n                  width={500}\r\n                  height={500}\r\n                  alt='image'\r\n                />\r\n              </li>\r\n              <li className='h-screen w-screen bg-green-400 flex flex-col justify-center overflow-hidden  items-center'>\r\n                <h2 className='text-[20vw] font-semibold relative bottom-5 inline-block text-black'>\r\n                  BELIVE\r\n                </h2>\r\n                <Image\r\n                  src='https://images.unsplash.com/photo-1521737711867-e3b97375f902?w=600&h=600&fit=crop'\r\n                  className='2xl:w-[550px] w-[380px] absolute bottom-0'\r\n                  width={500}\r\n                  height={500}\r\n                  alt='image'\r\n                />\r\n              </li>\r\n            </ul>\r\n          </section>\r\n          <footer className='bg-red-600 font-medium text-white grid place-content-center h-[80vh]'>\r\n            <p>\r\n              Inspired By{' '}\r\n              <a target='_blank' href='https://twitter.com/mattgperry'>\r\n                Matt Perry\r\n              </a>\r\n            </p>\r\n          </footer>\r\n        </article>\r\n      </main>\r\n    </ReactLenis>\r\n  );\r\n}",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}