Count-up stats

<div class="count-demo">
  <div class="stats">
    <div class="stat"><b data-count-to="1284">1,284</b><span>Builds shipped</span></div>
    <div class="stat"><b data-count-to="99.9" data-decimals="1" data-suffix="%">99.9%</b><span>Uptime</span></div>
    <div class="stat"><b data-count-to="42000" data-prefix="$">$42,000</b><span>Saved on hosting</span></div>
  </div>
  <button class="replay-count" type="button">Count again</button>
</div>

.count-demo { display: grid; justify-items: center; gap: 14px; width: min(560px, 100%); }

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--line);
  box-shadow: inset 0 0 0 1px var(--line);
}
.stat { display: grid; gap: 4px; padding: 20px 12px; background: var(--surface); text-align: center; }
.stat b {
  font: 700 clamp(20px, 6vw, 32px) system-ui, sans-serif;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; /* every digit is the same width, so the number doesn't wobble */
}
.stat span { font: 13px system-ui, sans-serif; color: var(--muted); }

.replay-count {
  border: 0;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 10px;
  font: 600 13px system-ui, sans-serif;
  color: var(--fg);
  background: var(--surface-2);
}

// Count-up stats: when a number scrolls into view, count it up from 0 to its
// `data-count-to` value. Optional: data-decimals, data-prefix, data-suffix.
// The HTML already contains the final numbers, so nothing is lost without JavaScript.

const prefersReducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
const countDuration = prefersReducedMotion ? 500 : 1600; // ms; quicker, not skipped, with reduced motion

// Starts fast and slows down at the end, which reads as "settling" on the number.
const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);

function formatNumber(element, value) {
  const decimals = Number(element.dataset.decimals || 0);
  const text = value.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
  return `${element.dataset.prefix || ''}${text}${element.dataset.suffix || ''}`;
}

function countUp(element) {
  const target = Number(element.dataset.countTo);
  const startedAt = performance.now();
  cancelAnimationFrame(element.countFrame);

  function step(now) {
    const progress = Math.min((now - startedAt) / countDuration, 1);
    element.textContent = formatNumber(element, target * easeOutCubic(progress));
    if (progress < 1) element.countFrame = requestAnimationFrame(step);
  }
  element.countFrame = requestAnimationFrame(step);
}

const numbers = document.querySelectorAll('[data-count-to]');

// Reset to zero only now that JavaScript is running, then count each number
// the first time it's on screen.
numbers.forEach((element) => (element.textContent = formatNumber(element, 0)));

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      countUp(entry.target);
      observer.unobserve(entry.target);
    }
  }
}, { threshold: 0.25 });
numbers.forEach((element) => observer.observe(element));

document.querySelector('.replay-count').addEventListener('click', () => numbers.forEach(countUp));