스탯 밴드

<div class="stats">
  <div class="stat"><span class="num" id="s1">0</span><span class="label">Active teams</span></div>
  <div class="stat"><span class="num" id="s2">0%</span><span class="label">Uptime</span></div>
  <div class="stat"><span class="num" id="s3">0M</span><span class="label">Requests / day</span></div>
</div>

.stats{width:min(92%,760px);display:flex;justify-content:space-around;gap:4%}
.stat{display:flex;flex-direction:column;align-items:center;gap:clamp(2px,.8vmin,6px)}
.num{font-size:clamp(15px,4.2vmin,32px);font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.label{font-size:clamp(7px,1.4vmin,11px);color:var(--muted);text-align:center}

const targets = [
  { id: 's1', to: 12400, suffix: '', format: function (v) { return Math.round(v).toLocaleString(); } },
  { id: 's2', to: 99.9, suffix: '%', format: function (v) { return v.toFixed(1); } },
  { id: 's3', to: 48, suffix: 'M', format: function (v) { return Math.round(v); } },
];
function run() {
  const start = performance.now();
  const dur = 1600;
  function tick(now) {
    const t = Math.min(1, (now - start) / dur);
    const eased = 1 - Math.pow(1 - t, 3);
    targets.forEach(function (item) {
      document.getElementById(item.id).textContent = item.format(item.to * eased) + item.suffix;
    });
    if (t < 1) requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);
}
run();
setInterval(run, 3400);