{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-x-carousel-reverse-demo",
  "title": "scroll x carousel reversed Demo",
  "description": "another Demo showing how to use scroll x carousel component in a reversed.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/scroll-x-carousel"
  ],
  "files": [
    {
      "path": "registry/demo/scroll-animations/scroll-x-carousel-reverse/index.tsx",
      "content": "import {\n  ScrollXCarousel,\n  ScrollXCarouselContainer,\n  ScrollXCarouselWrap,\n} from '@/components/systaliko-ui/scroll-animations/scroll-x-carousel';\n\nconst SHOWCASE_IMAGES = [\n  'https://images.unsplash.com/photo-1688733720228-4f7a18681c4f?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1624996752380-8ec242e0f85d?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1574717025058-2f8737d2e2b7?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1654618977232-a6c6dea9d1e8?q=80&w=2486&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1726066012698-bb7a3abce786?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n];\n\nexport function ScrollXCarouselReverseDemo() {\n  return (\n    <ScrollXCarousel>\n      <ScrollXCarouselContainer className=\" place-content-center flex flex-col gap-4\">\n        <div className=\" pointer-events-none w-[12vw] h-[103%] absolute inset-[0_auto_0_0] z-10 bg-[linear-gradient(90deg,_var(--background)_35%,_transparent)]\" />\n        <div className=\"pointer-events-none bg-[linear-gradient(270deg,_var(--background)_35%,_transparent)] w-[15vw] h-[103%] absolute inset-[0_0_0_auto] z-10\" />\n        <ScrollXCarouselWrap\n          xRagnge={['5%', '-40%']}\n          className=\"relative flex gap-4 [&>*:first-child]:ml-8\"\n        >\n          {SHOWCASE_IMAGES.map((imageUrl, index) => (\n            <div\n              className=\"min-w-[50vw] md:min-w-[30vw] aspect-video rounded overflow-hidden\"\n              key={index}\n            >\n              <img\n                alt=\"agency showcase\"\n                src={imageUrl}\n                className=\"size-full object-cover\"\n              />\n            </div>\n          ))}\n        </ScrollXCarouselWrap>\n        <ScrollXCarouselWrap\n          xRagnge={['-50%', '10%']}\n          className=\"relative flex gap-4 [&>*:first-child]:ml-8\"\n        >\n          {SHOWCASE_IMAGES.map((imageUrl, index) => (\n            <div\n              className=\"min-w-[50vw] md:min-w-[30vw] aspect-video rounded overflow-hidden\"\n              key={index}\n            >\n              <img\n                alt=\"agency showcase\"\n                src={imageUrl}\n                className=\"size-full object-cover\"\n              />\n            </div>\n          ))}\n        </ScrollXCarouselWrap>\n      </ScrollXCarouselContainer>\n    </ScrollXCarousel>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/scroll-x-carousel-reverse-demo.tsx"
    }
  ],
  "type": "registry:block"
}