Count Up Number

<p class="text-4xl font-bold tabular-nums text-gray-900 dark:text-gray-100">
  <span data-countup data-to="12500" data-decimals="0" data-prefix="$" data-suffix="+">$0+</span>
</p>

<script>
  (function () {
    var el = document.querySelector('[data-countup]');
    if (!el) return;
    var to = parseFloat(el.dataset.to || '0');
    var decimals = parseInt(el.dataset.decimals || '0', 10);
    var prefix = el.dataset.prefix || '';
    var suffix = el.dataset.suffix || '';
    function fmt(n) {
      return (
        prefix +
        n.toLocaleString(undefined, {
          minimumFractionDigits: decimals,
          maximumFractionDigits: decimals,
        }) +
        suffix
      );
    }
    // Reduced motion / no observer: jump straight to the final value.
    if (
      !('IntersectionObserver' in window) ||
      window.matchMedia('(prefers-reduced-motion: reduce)').matches
    ) {
      el.textContent = fmt(to);
      return;
    }
    function run() {
      var start = 0;
      function step(now) {
        if (!start) start = now;
        var p = Math.min((now - start) / 1600, 1);
        var eased = 1 - Math.pow(1 - p, 3);
        el.textContent = fmt(to * eased);
        if (p < 1) requestAnimationFrame(step);
      }
      requestAnimationFrame(step);
    }
    var observer = new IntersectionObserver(
      function (entries) {
        entries.forEach(function (entry) {
          if (!entry.isIntersecting) return;
          run();
          observer.disconnect();
        });
      },
      { threshold: 0.4 }
    );
    observer.observe(el);
  })();
</script>