Odometer Digits

<!-- Odometer Digits — each column is a strip of 0-9, --d picks the resting digit -->
<div class="nuda-sc2-odometer" role="img" aria-label="1,248 new signups">
  <div class="nuda-sc2-odometer__row" aria-hidden="true">
    <div class="nuda-sc2-odometer__digit" style="--d:1">
      <div class="nuda-sc2-odometer__strip">
        <span>0</span><span>1</span><span>2</span><span>3</span><span>4</span>
        <span>5</span><span>6</span><span>7</span><span>8</span><span>9</span>
      </div>
    </div>
    <span class="nuda-sc2-odometer__comma">,</span>
    <div class="nuda-sc2-odometer__digit" style="--d:2">
      <div class="nuda-sc2-odometer__strip">
        <span>0</span><span>1</span><span>2</span><span>3</span><span>4</span>
        <span>5</span><span>6</span><span>7</span><span>8</span><span>9</span>
      </div>
    </div>
    <div class="nuda-sc2-odometer__digit" style="--d:4">
      <div class="nuda-sc2-odometer__strip">
        <span>0</span><span>1</span><span>2</span><span>3</span><span>4</span>
        <span>5</span><span>6</span><span>7</span><span>8</span><span>9</span>
      </div>
    </div>
    <div class="nuda-sc2-odometer__digit" style="--d:8">
      <div class="nuda-sc2-odometer__strip">
        <span>0</span><span>1</span><span>2</span><span>3</span><span>4</span>
        <span>5</span><span>6</span><span>7</span><span>8</span><span>9</span>
      </div>
    </div>
  </div>
  <span class="nuda-sc2-odometer__label">new signups</span>
</div>

.nuda-sc2-odometer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px;
}

.nuda-sc2-odometer__row {
  display: flex;
  align-items: flex-end;
  gap: 1px;
}

.nuda-sc2-odometer__digit {
  width: 16px;
  height: 26px;
  overflow: hidden;
  position: relative;
  background: #161616;
  border-radius: 3px;
}

.nuda-sc2-odometer__strip {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  animation: _nuda-sc2odometer-roll 1.3s cubic-bezier(.4,0,.2,1) forwards;
}

.nuda-sc2-odometer__strip span {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 15px ui-sans-serif,system-ui;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.nuda-sc2-odometer__comma {
  font: 700 15px ui-sans-serif,system-ui;
  color: #fafafa;
  align-self: flex-end;
  margin-bottom: 2px;
}

.nuda-sc2-odometer__label {
  font: 500 9px ui-sans-serif,system-ui;
  color: #777;
  text-transform: uppercase;
  letter-spacing: .08em;
}

@keyframes _nuda-sc2odometer-roll {
  to {
    transform: translateY(calc(var(--d) * -10%));
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-sc2-odometer__strip {
    animation: none !important;
    transform: translateY(calc(var(--d) * -10%));
  }
}