{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-autoplay-demo",
  "title": "scroll autoplay Demo",
  "description": "Demo showing scroll-autoplay component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/scroll-autoplay"
  ],
  "files": [
    {
      "path": "registry/demo/scroll-animations/scroll-autoplay/index.tsx",
      "content": "import {\n  ScrollAutoplay,\n  ScrollAutoplayContainer,\n  ScrollAutoplayItem,\n} from '@/components/systaliko-ui/scroll-animations/scroll-autoplay';\nimport Image from 'next/image';\n\nconst IMAGES = [\n  'https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?q=80&w=2388&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1498036882173-b41c28a8ba34?q=80&w=2264&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1551641506-ee5bf4cb45f1?q=80&w=2368&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1503899036084-c55cdd92da26?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dG9reW98ZW58MHx8MHx8fDA%3D',\n  'https://images.unsplash.com/photo-1536098561742-ca998e48cbcc?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHRva3lvfGVufDB8fDB8fHww',\n];\nexport function ScrollAutoplayDemo() {\n  return (\n    <ScrollAutoplay className=\"h-[300vh]\">\n      <ScrollAutoplayContainer className=\"sticky top-0 left-0 w-full h-screen place-content-center\">\n        <div className=\"relative w-full min-w-3xs md:min-w-md aspect-video  p-2 bg-linear-120 from-muted-foreground/30 to-muted/40 bg-no-repeat border border-foreground/10 rounded-3xl shadow-[inset_0_.450581px_#ffffff4d,0_0_36.0465px_#ffffff0f]\">\n          <div className=\"size-full border-16 border-zinc-800 ring ring-black rounded-[19px] relative\">\n            {IMAGES.map((imageUrl, index) => {\n              return (\n                <ScrollAutoplayItem\n                  key={index}\n                  totalImages={IMAGES.length}\n                  index={index}\n                >\n                  <Image\n                    fill\n                    alt=\"tokyo city\"\n                    src={imageUrl}\n                    className=\"size-full inset-0 object-cover \"\n                    priority\n                  />\n                </ScrollAutoplayItem>\n              );\n            })}\n          </div>\n        </div>\n      </ScrollAutoplayContainer>\n    </ScrollAutoplay>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/scroll-autoplay.tsx"
    }
  ],
  "type": "registry:block"
}