Tailwind UI Pattern Registry for humans and agents

counter count-up number property stats metric animated stats section counter animation ("500+ customers") metric card number reveal on scroll pricing page feature quantity highlight dashboard KPI entrance animation JS number counter requires IntersectionObserver + animation frame want animated stat without adding a dependency @property + counter() integer interpolation trick rarely shown in practice

Count Up

Fetch snippet JSON: curl https://webspire.de/snippets/animations/count-up.json
Format

Hello, World

This element animates in

Stage Background
Customize

Quick Start

<span class="count-up" style="--count-to: 500;"></span>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
475 bytes · 27 lines
Custom Properties
--count-n--count-to--count-duration
Classes
.count-up
counter count-up number property stats metric animated

This uses two CSS features together: @property registers --count-n as an animatable <integer>, and counter-reset + counter() converts it to displayed text. The browser interpolates the integer each frame, giving a smooth count-up with no JS.

Stats section

<div class="flex gap-12">
  <div class="text-center">
    <p class="count-up text-5xl font-bold tabular-nums"
       style="--count-to: 500; --count-duration: 1.8s;"></p>
    <p class="mt-1 text-sm text-gray-500">Customers</p>
  </div>
  <div class="text-center">
    <p class="count-up text-5xl font-bold tabular-nums"
       style="--count-to: 99; --count-duration: 1.4s;"></p>
    <p class="mt-1 text-sm text-gray-500">Uptime %</p>
  </div>
  <div class="text-center">
    <p class="count-up text-5xl font-bold tabular-nums"
       style="--count-to: 12; --count-duration: 1s;"></p>
    <p class="mt-1 text-sm text-gray-500">Countries</p>
  </div>
</div>

Note: The counter displays the raw number. Add a suffix (+, %, K) directly after the element: <span class="count-up" style="--count-to:500;"></span>+