Animated Counter Stats — Futuristic

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<!--
Snippet Name: Animated Counter Stats — Futuristic
Description: Futuristic stats layout: Animated counter ui.
Author: DevSnips Contributors
Usage Example: Drop this snippet into any Tailwind CSS page.
-->

<style>
  /* DevSnips style-helper classes (self-contained snippet) */
  .f-sans{font-family:'Space Grotesk',sans-serif}.f-mono{font-family:'JetBrains Mono',monospace}.f-disp{font-family:'Space Grotesk',sans-serif}
      .ft-grid{background-image:linear-gradient(rgba(34,211,238,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.07) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 100%)}
      .ft-glow{box-shadow:0 0 0 1px rgba(34,211,238,.2),0 0 30px -8px rgba(34,211,238,.4)}
</style>
<section class="relative w-full py-20 sm:py-28 text-white" data-section="futuristic">
<div class="mx-auto max-w-7xl px-5 sm:px-6 lg:px-8">
<div class="mb-10 text-center mx-auto"><p class="mb-4"><span class="inline-flex items-center gap-1.5 rounded-full border border-cyan-400/30 bg-cyan-400/10 px-3 py-1 f-mono text-[11px] font-medium uppercase tracking-wider text-cyan-200"><svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 7 13.5 15.5 8.5 10.5 2 17"/><path d="M16 7h6v6"/></svg> Stats</span></p><h2 class="f-disp text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-center mx-auto">Numbers that matter</h2><p class="mt-4 max-w-2xl text-center mx-auto text-base sm:text-lg leading-relaxed text-cyan-100/50">Real performance, measured every single day.</p></div><div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4"><div class="bg-[#0b1220]/80 border border-cyan-400/20 rounded-2xl ft-glow transition-transform duration-300 hover:-translate-y-1 p-6 text-center"><p class="f-disp text-4xl sm:text-5xl font-bold" data-counter data-to="128" data-suffix="k">128k</p><p class="mt-2 text-sm text-cyan-100/50">Active users</p></div><div class="bg-[#0b1220]/80 border border-cyan-400/20 rounded-2xl ft-glow transition-transform duration-300 hover:-translate-y-1 p-6 text-center"><p class="f-disp text-4xl sm:text-5xl font-bold" data-counter data-to="99" data-suffix="%">99%</p><p class="mt-2 text-sm text-cyan-100/50">Uptime</p></div><div class="bg-[#0b1220]/80 border border-cyan-400/20 rounded-2xl ft-glow transition-transform duration-300 hover:-translate-y-1 p-6 text-center"><p class="f-disp text-4xl sm:text-5xl font-bold" data-counter data-to="42" data-suffix="+">42+</p><p class="mt-2 text-sm text-cyan-100/50">Countries</p></div><div class="bg-[#0b1220]/80 border border-cyan-400/20 rounded-2xl ft-glow transition-transform duration-300 hover:-translate-y-1 p-6 text-center"><p class="f-disp text-4xl sm:text-5xl font-bold" data-counter data-to="7" data-suffix="M+">7M+</p><p class="mt-2 text-sm text-cyan-100/50">API calls/day</p></div></div>
</div>
</section>
<script>
  // Scoped count-up animation for the [data-section="futuristic"] stats.
  // Runs once when the section scrolls into view; respects reduced motion.
  (function () {
    var root = document.currentScript.closest('[data-section="futuristic"]');
    if (!root) return;
    var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var counters = root.querySelectorAll('[data-counter]');
    function animate(el) {
      var target = parseInt(el.getAttribute('data-to'), 10) || 0;
      var suffix = el.getAttribute('data-suffix') || '';
      if (reduce) { el.textContent = target + suffix; return; }
      var start = 0, dur = 1400, t0 = null;
      function step(ts) {
        if (!t0) t0 = ts;
        var p = Math.min((ts - t0) / dur, 1);
        var eased = 1 - Math.pow(1 - p, 3);
        el.textContent = Math.round(target * eased) + suffix;
        if (p < 1) requestAnimationFrame(step);
      }
      requestAnimationFrame(step);
    }
    if (!('IntersectionObserver' in window) || reduce) {
      counters.forEach(function (el) { el.textContent = (parseInt(el.getAttribute('data-to'), 10) || 0) + (el.getAttribute('data-suffix') || ''); });
      return;
    }
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (e) {
        if (e.isIntersecting) { animate(e.target); io.unobserve(e.target); }
      });
    }, { threshold: 0.4 });
    counters.forEach(function (el) { io.observe(el); });
  })();
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# Animated Counter Stats — Futuristic

> Futuristic stats layout: Animated counter ui.

![Preview](./preview.html)

## Features

- animated counter UI
- data-counter hooks
- 4 stats
- suffix support
- responsive 1/2/4-col

## Responsive support

- Mobile-first layout
- Breakpoints: `sm` (640px), `md` (768px), `lg` (1024px)
- Stacks gracefully on small screens, expands on large viewports

## Browser support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Usage

1. Copy the markup from `code.html` into your Tailwind CSS project.
2. Include the corresponding Google Fonts in your document `<head>` if the style requires them.
3. The snippet is self-contained and copy-paste ready — no build step or JavaScript required.

## Design language

**Futuristic** — part of the DevSnips Tailwind Sections library. Every section is
original, accessible, and production-ready.

## Files

- `preview.html` — full standalone preview page (Tailwind CDN + fonts)
- `code.html` — copy-paste snippet only (no `<head>` / CDN)
- `metadata.json` — structured metadata
- `README.md` — this file