Animated Counter

<div class="fx-0223-root">
  <div class="ctup-box">
    <span class="ctup-value" data-target="8547">8,547</span>
    <span class="ctup-label">Active users</span>
  </div>
</div>

.fx-0223-root,
.fx-0223-root *,
.fx-0223-root *::before,
.fx-0223-root *::after {
  box-sizing: border-box
}

.fx-0223-root {
  --ctup-bg: rgb(26, 26, 36);
  --ctup-from: #6366f1;
  --ctup-to: #d946ef;
  --ctup-muted: rgba(255, 255, 255, .6);
  --ctup-size: 3rem;
  --ctup-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--ctup-height);
  overflow: hidden;
  position: relative;
  background: var(--ctup-bg);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.ctup-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ctup-value {
  font-size: var(--ctup-size);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--ctup-from), var(--ctup-to));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ctup-label {
  font-size: 0.875rem;
  color: var(--ctup-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Final value for screen readers (the moving number is hidden from them) */
.ctup-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

(function () {
  'use strict';
  // Animated Counter: the number counts from 0 up to data-target when half visible, only once.
  var calm = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : { matches: false };

  // Page language (closest lang attribute): 8 547 in French, 8,547 in English
  function pageLang(el) {
    var host = el.closest('[lang]');
    return (host && host.lang) || navigator.language || 'fr';
  }

  function init(el) {
    if (el.hasAttribute('data-ctup-ready')) return;
    el.setAttribute('data-ctup-ready', '');
    var raw = (el.getAttribute('data-target') || '0').trim();
    var target = parseFloat(raw) || 0;
    var decimals = raw.indexOf('.') > -1 ? raw.split('.')[1].length : 0;
    var duration = parseFloat(el.getAttribute('data-duration')) || 2000;
    var fmt = new Intl.NumberFormat(pageLang(el), {
      minimumFractionDigits: decimals,
      maximumFractionDigits: decimals
    });

    // Screen readers read the final value, never the counting steps
    var sr = document.createElement('span');
    sr.className = 'ctup-sr';
    sr.textContent = fmt.format(target);
    el.parentNode.insertBefore(sr, el.nextSibling);
    el.setAttribute('aria-hidden', 'true');

    if (calm.matches || !('IntersectionObserver' in window)) {
      el.textContent = fmt.format(target);
      return;
    }
    el.textContent = fmt.format(0);

    function count() {
      if (calm.matches) {
        el.textContent = fmt.format(target);
        return;
      }
      var start = performance.now();
      requestAnimationFrame(function step(t) {
        var p = Math.min((t - start) / duration, 1);
        var v = target * (1 - Math.pow(1 - p, 3)); // cubic ease-out
        el.textContent = fmt.format(decimals ? v : Math.floor(v));
        if (p < 1) requestAnimationFrame(step);
        else el.textContent = fmt.format(target);
      });
    }

    var obs = new IntersectionObserver(function (entries) {
      if (!entries[0].isIntersecting) return;
      obs.disconnect();
      count();
    }, { threshold: 0.5 });
    obs.observe(el);
  }

  document.querySelectorAll('.fx-0223-root .ctup-value[data-target]').forEach(init);
})();