Animated counter
Give changing totals a clear sense of movement.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- Standalone numbers that change, such as totals, prices, or live counts.
- Hero stats that roll up from zero when they scroll into view, via animateOnView.
- Use metric-card or stat-card when the number needs a card around it.
- Use text-morph for words rather than numbers.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { AnimatedCounter } from 'animui/animated-counter';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { AnimatedCounter } from "animui/animated-counter"; export function Raised({ amount }: { amount: number }) { return <AnimatedCounter label="Raised" value={amount} prefix="$" animateOnView />;}AnimatedCounter
An odometer style number whose digit columns roll to each new value.
PropTypeDefaultDescription
valueRequirednumber–The number to show.labelstring–Small label above the number.prefixstring""Text before the number, such as "$".suffixstring""Text after the number, such as "%".decimalsnumber0Fixed fraction digits.animateOnViewbooleanfalseRolls every digit up from zero the first time it scrolls into view.localestring"en-US"Formatting locale. Fixed by default so server and client match.- A visually hidden copy holds the full formatted text; the rolling digits are aria-hidden.
- It does not announce changes; wrap it in a live region if updates must be spoken.
- Each digit column turns in the direction the whole number moved, wrapping 9 to 0, with a slight stagger on first reveal.
- Columns and separators slide in or out when the digit count changes.
- Reduced motion jumps digits into place.
- It sizes to its digits, and columns slide in or out when the digit count changes, so neighbours shift slightly.
- Each digit is its own motion column; fine for a few counters, not for every cell of a table.
- The first reveal waits for 60% visibility through useInView.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for standalone numbers that change: totals, prices, counts. Use metric-card or stat-card when the number needs a card around it.
- Pass a raw number and let decimals, prefix, and suffix format it; do not pass preformatted strings.
The full library index for assistants is at /llms.txt.