Data & Visualization

<div class="demo-preview">
  <div class="counter-container">
    <span class="counter-value" data-target="8547">0</span>
    <span class="counter-label">Active users</span>
  </div>
</div>

.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

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

.counter-value {
  font-size: 3rem;
  font-weight: 800;
  background: linear-gradient(135deg, #6366f1, #d946ef);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.counter-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 2px;
}

(function() {
  function animateCounter(element, target, duration = 2000, isDecimal = false) {
    const start = 0;
    const startTime = performance.now();

    function update(currentTime) {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);

      // Easing function (ease-out cubic)
      const easeProgress = 1 - Math.pow(1 - progress, 3);

      const current = start + (target - start) * easeProgress;

      if (isDecimal) {
        element.textContent = current.toFixed(1);
      } else {
        element.textContent = Math.floor(current).toLocaleString();
      }

      if (progress < 1) {
        requestAnimationFrame(update);
      } else {
        if (isDecimal) {
          element.textContent = target.toFixed(1);
        } else {
          element.textContent = target.toLocaleString();
        }
      }
    }

    requestAnimationFrame(update);
  }

  // Lance le compteur quand il entre à l'écran (moitié visible)
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const element = entry.target;
        const target = parseFloat(element.dataset.target);
        const isDecimal = element.dataset.target.includes('.');
        animateCounter(element, target, 2000, isDecimal);
        observer.unobserve(element);
      }
    });
  }, {
    threshold: 0.5
  });
  document.querySelectorAll('.counter-value[data-target]').forEach(el => observer.observe(el));
})();