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

Family

stats

Tier

enhanced

Kind

section

Extends

stats/base

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.