AnimatedCounter

A number whose digits roll like an odometer when the value changes, with optional label, prefix, suffix and decimals.

When to use

• Live or frequently updated totals: contacts, sessions, credits.
• Hero stats that should count up when they scroll into view (animateOnView).
• Use MetricCard when the number needs a card with context and a change chip, and SlotText for strings or slot-machine style reels.

Usage

import { AnimatedCounter } from "@/components/iris/animated-counter/animated-counter";

h(AnimatedCounter, { value: contacts, label: "Contacts on file", animateOnView: true });
h(AnimatedCounter, { value: 4.99, prefix: "€", decimals: 2, label: "Anasa Cloud, per month" });

Props

Prop	Type	Default	Description
value	number	— (required)	The number to show.
label	string	—	Small caption above the number; changes rise in.
prefix / suffix	string	""	Static text before/after, e.g. "€" or "%".
decimals	number	0	Fixed fraction digits.
animateOnView	boolean	false	Roll every digit up from zero the first time it scrolls into view.
locale	string	"en-US"	Formatting locale; fixed by default so server and client render the same digits.

Notes

• Screen readers get the full formatted text once (visually hidden); the animated digits are aria-hidden.
• Each column turns in the direction the whole number moved and wraps 9 → 0; adding or removing digits opens/closes their column.
• Under reduced motion digits jump straight to the new value.
• Sets its own type: font-display at text-3xl in ink, with the label in ink-3 at text-xs. Override with a wrapper class if you need another size.
• The prefix and suffix are drawn as inline blocks, so a leading space in suffix collapses; pass units that read without one ("%"), or put the unit in the label.