Scroll Autoplay

<ScrollAutoplay className="h-[300vh]">
  <ScrollAutoplayContainer className="sticky top-0 left-0 w-full h-screen place-content-center">
    <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]">
      <div className="size-full border-16 border-zinc-800 ring ring-black rounded-[19px] relative">
        {IMAGES.map((imageUrl, index) => {
          return (
            <ScrollAutoplayItem
              key={index}
              totalImages={IMAGES.length}
              index={index}
            >
              <Image
                fill
                alt="tokyo city"
                src={imageUrl}
                className="size-full inset-0 object-cover "
                priority
              />
            </ScrollAutoplayItem>
          );
        })}
      </div>
    </div>
  </ScrollAutoplayContainer>
</ScrollAutoplay>