Section Library

Animated Stat Numbers

  • Component, not section
  • Zero dependencies
  • Respects reduced motion
Live preview
Full screen ↗
Loading preview…

Scroll & click inside the frame — it's the real section running with demo content

Step 1 — your customization message
Integrate the following section into my site, placing it [where on the page].
Replace ALL placeholder text and images with content for my project:
[1-2 sentences about your business/site].
My images are in [folder/paths]. Match the section's colors and fonts
to my site's existing design.

[PASTE THE FULL SECTION PROMPT HERE]
Step 2 — the prompt · Animated Stat Numbers346 lines · 11,574 chars
You are given a task to integrate an existing React component in the codebase

The codebase should support:
- shadcn project structure  
- Tailwind CSS
- Typescript

If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript.

What it is

Not a full section — a small, reusable component that makes numbers feel alive. When a number changes, only the digits that change slide and blur into place, exactly like iOS animations. “1,199” ticking to “1,200” animates just the last digits.

Perfect for

Upgrading numbers anywhere on your site: stats strips, counters, prices, dashboards. Pair it with the Horizontal Projects Showcase stats strip or sprinkle it into any section with figures.

What to prepare

  • Nothing — just know which numbers on your page deserve the treatment

Good to know

This is a component, not a section, so your customization message should say where to use it, e.g.: “Use this AnimateNumber component for the four stats in my projects section, animating them when they scroll into view.” It has zero dependencies and even respects users who turn off motion in their system settings.