AnimatedNumber

Local specification source status: preview. Implementation preview pending sign-off.

A numeric readout that moves from its previous value to a new target while keeping the settled value accessible.

import { AnimatedNumber } from '@cloakedinc/design-system';

Overview

A number that counts from its previous value to its new one whenever value changes, with a physical ease-in-out ramp. It owns only the animation and formatting — wrap it in a Text (or Card.Metric) for typography and color.

When to use

Reach for AnimatedNumber when a numeric readout changes and the motion carries meaning — a stat that ticks up as work completes, a counter reacting to user action, or a value scrubbed along a chart. In-app it backs the Home stat widgets (ActionsTakenWidget, BlockedSpamCallsWidget, SsnMonitoringWidget) and the automations StatsRow.

• Rendering a static number that never animates? Just put it in Text — the tween is wasted (and AnimatedNumber deliberately does not animate on mount, so a value that never changes looks identical to plain text anyway).
• Value updates every frame while a chart is scrubbed? Set follow so it glides toward the moving target instead of restarting a discrete tween on each change.

It animates in either direction and snaps instead of animating under prefers-reduced-motion.

Component specification