Vertical Reel Scroller

<div class="nuda-gc2-reel-vertical" role="group" aria-roledescription="carousel" aria-label="Vertical reel gallery">
  <div class="nuda-gc2-reel-vertical__viewport">
    <div class="nuda-gc2-reel-vertical__slide" role="group" aria-roledescription="slide" aria-label="1 of 3" style="background:linear-gradient(160deg,#ff6dd4,#9d6dff)">
      <span class="nuda-gc2-reel-vertical__side" aria-hidden="true">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 21s-7-4.4-9.6-9C.6 8.4 2.6 5 6 5c2 0 3.4 1 4 2 .6-1 2-2 4-2 3.4 0 5.4 3.4 3.6 7-2.6 4.6-9.6 9-9.6 9z" fill="#fafafa"></path></svg>
      </span>
    </div>
    <!-- More slides -->
  </div>
  <div class="nuda-gc2-reel-vertical__rail" aria-hidden="true">
    <span class="is-on"></span><span></span><span></span>
  </div>
</div>

.nuda-gc2-reel-vertical {
  position: relative;
  width: 100%;
  max-width: 150px;
}

.nuda-gc2-reel-vertical__viewport {
  height: 220px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  border-radius: 14px;
  scrollbar-width: none;
}

.nuda-gc2-reel-vertical__viewport::-webkit-scrollbar {
  display: none;
}

.nuda-gc2-reel-vertical__slide {
  position: relative;
  height: 220px;
  scroll-snap-align: start;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px;
}

.nuda-gc2-reel-vertical__side {
  width: 32px;
  height: 32px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}

.nuda-gc2-reel-vertical__slide:hover .nuda-gc2-reel-vertical__side {
  transform: scale(1.12);
}

.nuda-gc2-reel-vertical__rail {
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nuda-gc2-reel-vertical__rail span {
  width: 4px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,.2);
  transition: height .3s cubic-bezier(.16,1,.3,1),background .25s;
}

.nuda-gc2-reel-vertical__rail span.is-on {
  height: 16px;
  background: #e4ff54;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-gc2-reel-vertical__viewport {
    scroll-behavior: auto;
  }
  .nuda-gc2-reel-vertical__side {
    transition: none;
  }
}