Scroll Odometer Counter

<!-- Digit strips translate upward as you scroll, like an odometer -->
<div class="nuda-sd2-odo__sticky">
  <div class="nuda-sd2-odo__display">
    <div class="nuda-sd2-odo__col">
      <div class="nuda-sd2-odo__strip nuda-sd2-odo__strip--tens">
        <span>0</span><span>1</span><span>2</span>
      </div>
    </div>
    <div class="nuda-sd2-odo__col">
      <div class="nuda-sd2-odo__strip nuda-sd2-odo__strip--units">
        <span>0</span><span>1</span><span>2</span>
      </div>
    </div>
    <span class="nuda-sd2-odo__pct">%</span>
  </div>
  <p class="nuda-sd2-odo__label">scroll progress</p>
</div>

.nuda-sd2-odo {
  height: 160px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  overflow: hidden;
  background: #09090b;
}

.nuda-sd2-odo__scroller {
  height: 100%;
  overflow: auto;
}

.nuda-sd2-odo__sticky {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 1.1rem 0 .6rem;
  background: #09090b;
}

.nuda-sd2-odo__display {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nuda-sd2-odo__col {
  height: 22px;
  overflow: hidden;
  width: 16px;
}

.nuda-sd2-odo__strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.nuda-sd2-odo__strip span {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: #e4ff54;
}

.nuda-sd2-odo__strip--tens {
  animation: nuda-sd2-odo-tens linear;
  animation-timeline: scroll(nearest);
}

.nuda-sd2-odo__strip--units {
  animation: nuda-sd2-odo-units linear;
  animation-timeline: scroll(nearest);
}

.nuda-sd2-odo__pct {
  color: #777;
  font-size: .85rem;
  font-weight: 700;
}

.nuda-sd2-odo__label {
  margin: 0;
  color: #52525b;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.nuda-sd2-odo__filler {
  height: 260px;
}

@keyframes nuda-sd2-odo-tens {
  to {
    transform: translateY(-198px);
  }
}

@keyframes nuda-sd2-odo-units {
  to {
    transform: translateY(-418px);
  }
}

@supports not (animation-timeline:scroll()) {
  .nuda-sd2-odo__strip--tens {
    transform: translateY(-198px);
  }
  .nuda-sd2-odo__strip--units {
    transform: translateY(-198px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-sd2-odo__strip--tens {
    animation: none;
    animation-timeline: none;
    transform: translateY(-198px);
  }
  .nuda-sd2-odo__strip--units {
    animation: none;
    animation-timeline: none;
    transform: translateY(-198px);
  }
}