Stats band

<section class="stats">
  <div class="inner">

    <div class="stat">
      <dl>
        <dd><span class="num" data-to="2400000" data-format="compact">0</span></dd>
        <dt>Addresses indexed</dt>
      </dl>
    </div>

    <div class="stat">
      <dl>
        <dd><span class="num" data-to="40" data-suffix="ms">0</span></dd>
        <dt>Median response</dt>
      </dl>
    </div>

    <div class="stat">
      <dl>
        <dd><span class="num" data-to="99.98" data-decimals="2" data-suffix="%">0</span></dd>
        <dt>Uptime, twelve months</dt>
      </dl>
    </div>

    <div class="stat">
      <dl>
        <dd><span class="num" data-to="1800" data-prefix="+">0</span></dd>
        <dt>Teams building on it</dt>
      </dl>
    </div>

  </div>
</section>

* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.6 system-ui, -apple-system, sans-serif; }

.stats {
  background: #101b2d;
  background-image: radial-gradient(70% 120% at 50% 0%, rgba(59, 79, 228, .35), transparent 60%);
  color: #fff;
  padding: 54px 24px;
}

.inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  text-align: center;
}

.stat + .stat { border-left: 1px solid rgba(255, 255, 255, .1); }

dl { margin: 0; }

dd {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  /* every digit the same width, so the number does not jitter as it counts */
  font-variant-numeric: tabular-nums;
}

dt {
  margin-top: 9px;
  font-size: .87rem;
  color: #9aaac3;
}

@media (max-width: 700px) {
  .inner { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
  .stat + .stat { border-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .1); }
}

const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;

function format(el, value) {
  const dp = Number(el.dataset.decimals || 0);
  const body = el.dataset.format === "compact"
    ? new Intl.NumberFormat(undefined, { notation: "compact", maximumFractionDigits: 1 }).format(value)
    : new Intl.NumberFormat(undefined, { minimumFractionDigits: dp, maximumFractionDigits: dp }).format(value);
  el.textContent = (el.dataset.prefix || "") + body + (el.dataset.suffix || "");
}

function countUp(el) {
  const to = Number(el.dataset.to);

  // no animation for anyone who asked not to have one: show the final figure
  if (reduced) { format(el, to); return; }

  const ms = 1100;
  const start = performance.now();

  function frame(now) {
    const t = Math.min(1, (now - start) / ms);
    const eased = 1 - Math.pow(1 - t, 3);        // ease-out cubic
    format(el, to * eased);
    if (t < 1) requestAnimationFrame(frame);
    else format(el, to);                          // land exactly on the target
  }
  requestAnimationFrame(frame);
}

// only count when the band is actually on screen
const io = new IntersectionObserver((entries, obs) => {
  entries.forEach((e) => {
    if (!e.isIntersecting) return;
    countUp(e.target);
    obs.unobserve(e.target);                      // once, not every scroll
  });
}, { threshold: 0.4 });

document.querySelectorAll(".num").forEach((el) => io.observe(el));