{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "css-image-stacking",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/external/css-image-stacking.txt",
      "content": "//\r\n'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              CSS Sticky Properties for <br /> Stacking Cards. 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          <>\r\n            <div className='sm:sticky sm:top-0  w-full '>\r\n              <figure className='w-full h-screen flex items-center justify-center '>\r\n                <img\r\n                  src='https://images.unsplash.com/photo-1718969604981-de826f44ce15?w=1200&auto=format&fit=crop'\r\n                  alt=''\r\n                  className='transition-all duration-300 h-[80%] w-[55%]  align-bottom object-cover rounded-md '\r\n                />\r\n              </figure>\r\n            </div>\r\n            <div className='sm:sticky sm:top-2  w-full '>\r\n              <figure className='w-full h-screen flex items-center justify-center '>\r\n                <img\r\n                  src='https://images.unsplash.com/photo-1476180814856-a36609db0493?w=1200&auto=format&fit=crop'\r\n                  alt=''\r\n                  className='transition-all duration-300 h-[80%] w-[60%]  align-bottom object-cover rounded-md [box-shadow:0_-5px_16px_4px_rgba(0,0,0,0.8),0_2px_4px_-1px_rgba(0,0,0,0.06)]'\r\n                />\r\n              </figure>\r\n            </div>\r\n            <div className='sm:sticky sm:top-4  w-full '>\r\n              <figure className='w-full h-screen flex items-center justify-center '>\r\n                <img\r\n                  src='https://images.unsplash.com/photo-1595407660626-db35dcd16609?w=1200&auto=format&fit=crop'\r\n                  alt=''\r\n                  className='transition-all duration-300 h-[80%] w-[65%]  align-bottom object-cover rounded-md '\r\n                />\r\n              </figure>\r\n            </div>\r\n            <div className='sm:sticky sm:top-6  w-full '>\r\n              <figure className='w-full h-screen flex items-center justify-center '>\r\n                <img\r\n                  src='https://images.unsplash.com/photo-1599054799131-4b09c73a63cf?w=1200&auto=format&fit=crop'\r\n                  alt=''\r\n                  className='transition-all duration-300 h-[80%] w-[70%]  align-bottom object-cover rounded-md '\r\n                />\r\n              </figure>\r\n            </div>\r\n            <div className='sm:sticky sm:top-8  w-full '>\r\n              <figure className='w-full h-screen flex items-center justify-center '>\r\n                <img\r\n                  src='https://images.unsplash.com/photo-1719963532023-01b573d1d584?w=1200&auto=format&fit=crop'\r\n                  alt=''\r\n                  className='transition-all duration-300 h-[80%] w-[75%]  align-bottom object-cover rounded-md '\r\n                />\r\n              </figure>\r\n            </div>\r\n            <div className='sm:sticky sm:top-12  w-full '>\r\n              <figure className='w-full h-screen flex items-center justify-center '>\r\n                <img\r\n                  src='https://images.unsplash.com/photo-1714328101501-3594de6cb80f?w=1200&auto=format&fit=crop'\r\n                  alt=''\r\n                  className='transition-all duration-300 h-[80%] w-[80%]  align-bottom object-cover rounded-md '\r\n                />\r\n              </figure>\r\n            </div>\r\n          </>\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"
}