Rotated Gallery On Scroll

<GalleryRotatedScroll spacerClass="h-96">
  <div
    className="pointer-events-none absolute z-10 h-[20vh] w-full "
    style={{
      background: 'linear-gradient(to right, gray, rebeccapurple, blue)',
      filter: 'blur(84px)',
      mixBlendMode: 'screen',
    }}
  />

  <GalleryContainer className="h-dvh  gap-2">
    <GalleryCol className="-mt-2 gap-2">
      {IMAGES_1.map((imageUrl, index) => (
        <img
          key={index}
          className="aspect-video block h-auto max-h-full w-full  rounded-md  object-cover shadow"
          src={imageUrl}
          alt="gallery item"
        />
      ))}
    </GalleryCol>
    <GalleryCol className="gap-2 mt-[-20%]" yRange={['15%', '5%']}>
      {IMAGES_2.map((imageUrl, index) => (
        <img
          key={index}
          className="aspect-video block h-auto max-h-full w-full  rounded-md  object-cover shadow"
          src={imageUrl}
          alt="gallery item"
        />
      ))}
    </GalleryCol>
    <GalleryCol yRange={['-10%', '2%']} className="gap-2 -mt-2">
      {IMAGES_3.map((imageUrl, index) => (
        <img
          key={index}
          className="aspect-video block h-auto max-h-full w-full  rounded-md  object-cover shadow"
          src={imageUrl}
          alt="gallery item"
        />
      ))}
    </GalleryCol>
  </GalleryContainer>
</GalleryRotatedScroll>