Design Atlas
한국어
▭ Landing page patterns

Stats band

스탯 밴드

A row of large numbers that convey scale or results at a glance, animated with a count-up on load.

Also known as: Metrics rowNumber counters
···
html
<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>
css
.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}
js
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);

A row of three or four numbers — "10,000+ users," "99.9% uptime" — that back up a claim with evidence instead of adjectives. A specific number reads faster and more convincingly than "trusted by many."

Convention is to animate each number from 0 up to its target with a `count-up` the moment it scrolls into view — it holds attention better than a static number and feels like a live tally being counted right now. Keep the unit (+, %, ×) smaller than the number itself, with a label underneath explaining what's being counted.

Inflating a number (calling free-trial installs "1M downloads") or showing a big number with no source erodes trust the moment a user notices the gap. Where you can, add a small footnote or an as-of date next to the figure.

When to use

Only when there's a number actually worth bragging about. If the numbers are small or nonexistent, don't force it — use a different form of social proof like `testimonial-wall` instead.