{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sticky-gallery",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/external/sticky-gallery.txt",
      "content": "'use client';\r\nimport { ReactLenis } from 'lenis/react';\r\nexport default function index(): JSX.Element {\r\n  return (\r\n    <ReactLenis root>\r\n      <main className='bg-black'>\r\n        <div className='wrapper'>\r\n          <section className='text-white  h-screen  w-full bg-slate-950  grid place-content-center sticky top-0'>\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-[54px_54px] mask-[radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]'></div>\r\n\r\n            <h1 className='2xl:text-7xl text-5xl px-8 font-semibold text-center tracking-tight leading-[120%]'>\r\n              Create Gallery In a Better Way\r\n              <br />\r\n              Using CSS sticky properties <br />\r\n              Scroll down! 👇\r\n            </h1>\r\n          </section>\r\n        </div>\r\n\r\n        <section className='text-white   w-full bg-slate-950  '>\r\n          <div className='grid grid-cols-12 gap-2'>\r\n            {/* left part */}\r\n            <div className='grid gap-2 col-span-4'>\r\n              <figure className=' w-full'>\r\n                <img\r\n                  src='https://images.unsplash.com/photo-1718838541476-d04e71caa347?w=500&auto=format&fit=crop'\r\n                  alt=''\r\n                  className='transition-all duration-300 w-full h-96  align-bottom object-cover rounded-md '\r\n                />\r\n              </figure>\r\n              <figure className=' w-full'>\r\n                <img\r\n                  src='https://images.unsplash.com/photo-1715432362539-6ab2ab480db2?w=500&auto=format&fit=crop'\r\n                  alt=''\r\n                  className='transition-all duration-300 w-full h-96  align-bottom object-cover rounded-md '\r\n                />\r\n              </figure>\r\n              <figure className=' w-full'>\r\n                <img\r\n                  src='https://images.unsplash.com/photo-1718601980986-0ce75101d52d?w=500&auto=format&fit=crop'\r\n                  alt=''\r\n                  className='transition-all duration-300 w-full h-96  align-bottom object-cover rounded-md '\r\n                />\r\n              </figure>\r\n              <figure className='w-full'>\r\n                <img\r\n                  src='https://images.unsplash.com/photo-1685904042960-66242a0ac352?w=500&auto=format&fit=crop'\r\n                  alt=''\r\n                  className='transition-all duration-300 w-full h-96  align-bottom object-cover rounded-md '\r\n                />\r\n              </figure>\r\n              <figure className='w-full'>\r\n                <img\r\n                  src='https://images.unsplash.com/photo-1719411182379-ffd97c1f7ebf?w=500&auto=format&fit=crop'\r\n                  alt=''\r\n                  className='transition-all duration-300 w-full h-96  align-bottom object-cover rounded-md '\r\n                />\r\n              </figure>\r\n            </div>\r\n            {/* sticky part */}\r\n            <div className='sticky top-0 h-screen w-full col-span-4 gap-2  grid grid-rows-3'>\r\n              <figure className='w-full h-full '>\r\n                <img\r\n                  src='https://images.unsplash.com/photo-1718969604981-de826f44ce15?w=500&auto=format&fit=crop'\r\n                  alt=''\r\n                  className='transition-all duration-300 h-full w-full  align-bottom object-cover rounded-md '\r\n                />\r\n              </figure>\r\n              <figure className='w-full h-full '>\r\n                <img\r\n                  src='https://images.unsplash.com/photo-1476180814856-a36609db0493?w=500&auto=format&fit=crop'\r\n                  alt=''\r\n                  className='transition-all duration-300 h-full w-full align-bottom object-cover rounded-md '\r\n                />\r\n              </figure>\r\n              <figure className='w-full h-full '>\r\n                <img\r\n                  src='https://images.unsplash.com/photo-1595407660626-db35dcd16609?w=500&auto=format&fit=crop'\r\n                  alt=''\r\n                  className='transition-all duration-300 h-full w-full  align-bottom object-cover rounded-md '\r\n                />\r\n              </figure>\r\n            </div>\r\n            {/* right part */}\r\n            <div className='grid gap-2 col-span-4'>\r\n              <figure className='w-full'>\r\n                <img\r\n                  src='https://images.unsplash.com/photo-1719547907790-f661a88302c2?w=500&auto=format&fit=crop'\r\n                  alt=''\r\n                  className='transition-all duration-300 w-full h-96  align-bottom object-cover rounded-md '\r\n                />\r\n              </figure>\r\n              <figure className='w-full'>\r\n                <img\r\n                  src='https://images.unsplash.com/photo-1599054799131-4b09c73a63cf?w=500&auto=format&fit=crop'\r\n                  alt=''\r\n                  className='transition-all duration-300 w-full h-96  align-bottom object-cover rounded-md '\r\n                />\r\n              </figure>\r\n              <figure className='w-full'>\r\n                <img\r\n                  src='https://images.unsplash.com/photo-1719963532023-01b573d1d584?w=500&auto=format&fit=crop'\r\n                  alt=''\r\n                  className='transition-all duration-300 w-full h-96  align-bottom object-cover rounded-md '\r\n                />\r\n              </figure>\r\n              <figure className='w-full'>\r\n                <img\r\n                  src='https://images.unsplash.com/photo-1714328101501-3594de6cb80f?w=500&auto=format&fit=crop'\r\n                  alt=''\r\n                  className='transition-all duration-300 w-full h-96  align-bottom object-cover rounded-md '\r\n                />\r\n              </figure>\r\n              <figure className='w-full'>\r\n                <img\r\n                  src='https://images.unsplash.com/photo-1719554873571-0fd6bf322bb1?w=500&auto=format&fit=crop'\r\n                  alt=''\r\n                  className='transition-all duration-300 w-full h-96  align-bottom object-cover rounded-md '\r\n                />\r\n              </figure>\r\n            </div>\r\n          </div>\r\n        </section>\r\n\r\n        <footer className='group bg-slate-950 '>\r\n          <h1 className='text-[16vw]  translate-y-20 leading-[100%] uppercase font-semibold text-center bg-linear-to-r from-neutral-400 to-neutral-800 bg-clip-text text-transparent transition-all ease-linear'>\r\n            ui-layout\r\n          </h1>\r\n          <div className='bg-black h-40 relative z-10 grid place-content-center text-2xl rounded-tr-full rounded-tl-full'></div>\r\n        </footer>\r\n      </main>\r\n    </ReactLenis>\r\n  );\r\n}",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}