{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "css-card-stacking",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/external/css-card-stacking.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              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          <div className='flex justify-between px-16'>\r\n            <div className='grid gap-2'>\r\n              <figure className='sticky top-0 h-screen grid place-content-center'>\r\n                <article className='bg-green-500 h-72 w-120 rounded-lg rotate-6 p-4 grid place-content-center gap-4'>\r\n                  <h1 className='text-2xl font-semibold'>Image MouseTrail</h1>\r\n                  <p>\r\n                    An Mouse who is running with couple of images and the best\r\n                    part is you can hide all the images when you don't move your\r\n                    mouse. I hope you'll love it\r\n                  </p>\r\n                  <a\r\n                    href='https://ui-layouts.com/components/image-mousetrail'\r\n                    target='_blank'\r\n                    className='w-fit bg-black p-3 rounded-md cursor-pointer'\r\n                  >\r\n                    Click to View\r\n                  </a>\r\n                </article>\r\n              </figure>\r\n              <figure className='sticky top-0 h-screen grid place-content-center'>\r\n                <article className='bg-red-400 h-72 w-120 rounded-lg p-4 grid place-content-center gap-4'>\r\n                  <h1 className='text-2xl font-semibold'>\r\n                    Progressive Carousel\r\n                  </h1>\r\n                  <p>\r\n                    Lorem ipsum dolor sit amet consectetur adipisicing elit.\r\n                    Eius consequatur explicabo assumenda odit necessitatibus\r\n                    possimus ducimus aliquam. Ullam dignissimos animi officiis,\r\n                    in sequi et inventore harum ipsam sed.\r\n                  </p>\r\n                  <a\r\n                    href='https://ui-layouts.com/components/progressive-carousel'\r\n                    target='_blank'\r\n                    className='w-fit bg-black p-3 rounded-md cursor-pointer'\r\n                  >\r\n                    Click to View\r\n                  </a>\r\n                </article>\r\n              </figure>\r\n              <figure className='sticky top-0 h-screen grid place-content-center'>\r\n                <article className='bg-orange-400 h-72 w-120 p-4 rounded-lg -rotate-6 grid place-content-center gap-4'>\r\n                  <h1 className='text-2xl font-semibold'>Responsive Drawer</h1>\r\n                  <p>\r\n                    Lorem ipsum dolor sit amet consectetur adipisicing elit.\r\n                    Eius consequatur explicabo assumenda odit necessitatibus\r\n                    possimus ducimus aliquam. Ullam dignissimos animi officiis,\r\n                    in sequi et inventore harum ipsam sed.\r\n                  </p>\r\n                  <a\r\n                    href='https://ui-layouts.com/components/drawer'\r\n                    target='_blank'\r\n                    className='w-fit bg-black p-3 rounded-md cursor-pointer'\r\n                  >\r\n                    Click to View\r\n                  </a>\r\n                </article>\r\n              </figure>\r\n              <figure className='sticky top-0 h-screen grid place-content-center'>\r\n                <article className='bg-blue-400 h-72 w-120 p-4 rounded-lg grid place-content-center gap-4'>\r\n                  <h1 className='text-2xl font-semibold'>Animated Globe</h1>\r\n                  <p>\r\n                    Lorem ipsum dolor sit amet consectetur adipisicing elit.\r\n                    Eius consequatur explicabo assumenda odit necessitatibus\r\n                    possimus ducimus aliquam. Ullam dignissimos animi officiis,\r\n                    in sequi et inventore harum ipsam sed.\r\n                  </p>\r\n                  <a\r\n                    href='https://ui-layouts.com/components/globe'\r\n                    target='_blank'\r\n                    className='w-fit bg-black p-3 rounded-md cursor-pointer'\r\n                  >\r\n                    Click to View\r\n                  </a>\r\n                </article>\r\n              </figure>\r\n            </div>\r\n            <div className='sticky top-0 h-screen grid place-content-center'>\r\n              <h1 className='text-4xl px-8 font-medium text-center tracking-tight leading-[120%]'>\r\n                What We <br /> Have Now😎\r\n              </h1>\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"
}