CountUp NEW

An animated number counter that animates from a starting value to a target value on scroll.

Preview/Playground

Created by

Barsan

$1,500

Astro

---
import CountUp from "@astroanimate/core/CountUp";
---

<CountUp
  value={1500}
  prefix="$"
  duration={2500}
  enhance={true}
/>

bash

npm install @astro-animate/core

---
import CountUp from "@astroanimate/core/CountUp";
---

<CountUp
  value={1500}
  prefix="$"
  duration={2500}
  enhance={true}
/>

Renders a numerical value that smoothly counts up when it enters the viewport.

Prop	Type	Default	Description
`value`	`number`	`Required`	The final target number
`start`	`number`	`0`	The initial starting number
`duration`	`number`	`2000`	Animation duration in milliseconds
`decimals`	`number`	`0`	Number of decimal places to display
`prefix`	`string`	`""`	String before the number
`suffix`	`string`	`""`	String after the number
`threshold`	`number`	`0.1`	Intersection Observer threshold (0 to 1)
`enhance`	`boolean`	`true`	Enable JavaScript animation
`textColor`	`string`	`"inherit"`	Custom text color
`fontSize`	`string`	`"inherit"`	Custom font size
`fontFamily`	`string`	`"inherit"`	Custom font family
`mainClassName`	`string`	`""`	Additional CSS classes

Highlighting key metrics, statistics, or milestones
Building engaging landing pages with numerical achievements (e.g., "Active Users", "Downloads")

Renders the final, formatted target number as a static baseline (Zero-JS fallback)
Uses tabular-nums by default to prevent layout shifting during the animation
CSS transitions respect prefers-reduced-motion: reduce

Zero-JS Fallback: Server-renders the fully formatted number immediately
Viewport Aware: Leverages Intersection Observer (threshold) to only run animations when visible