stats animated counter scroll-driven numbers metrics stats animated counter scroll numbers metrics animated stats counter section scroll-driven number counting
Stats Animated
Fetch pattern JSON:
curl https://webspire.de/patterns/stats/animated.json animated.html
<section class="ws-stats bg-[var(--ws-stats-bg)] py-20">
<div class="mx-auto max-w-5xl px-6 text-center">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-stats-text)] sm:text-4xl">Trusted by thousands</h2>
<p class="mx-auto mt-4 max-w-xl text-lg text-[var(--ws-stats-text-soft)]">Numbers that speak for themselves.</p>
<div class="mt-12 grid grid-cols-2 gap-8 md:grid-cols-4">
<div>
<p class="text-4xl font-extrabold text-[var(--ws-stats-accent)]">
<span class="scroll-counter" style="--counter-target: 500"></span>+
</p>
<p class="mt-2 text-sm font-medium text-[var(--ws-stats-text-soft)]">Companies</p>
</div>
<div>
<p class="text-4xl font-extrabold text-[var(--ws-stats-accent)]">
<span class="scroll-counter" style="--counter-target: 50"></span>k
</p>
<p class="mt-2 text-sm font-medium text-[var(--ws-stats-text-soft)]">Developers</p>
</div>
<div>
<p class="text-4xl font-extrabold text-[var(--ws-stats-accent)]">
<span class="scroll-counter" style="--counter-target: 99"></span>%
</p>
<p class="mt-2 text-sm font-medium text-[var(--ws-stats-text-soft)]">Uptime</p>
</div>
<div>
<p class="text-4xl font-extrabold text-[var(--ws-stats-accent)]">
<span class="scroll-counter" style="--counter-target: 24"></span>/7
</p>
<p class="mt-2 text-sm font-medium text-[var(--ws-stats-text-soft)]">Support</p>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode SSR Safe Copy & Paste
Stable Published
statsanimatedcounterscroll-drivennumbersmetrics
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| stats | Yes | Stat items with scroll-counter spans. |
Combines the stats/base layout with the scroll-counter CSS snippet. Numbers animate from 0 to their target value as they scroll into view. Requires including the scroll-counter CSS snippet alongside this pattern.
Usage
Include the scroll-counter CSS in your project, then use <span class="scroll-counter" style="--counter-target: 500"></span> for each number.