Skip to content
Pinky UI

data

Animated Number

A locale-aware numeric update with one stable accessible final value.

  • data
  • number
  • kpi
  • locale

Live preview

$1,249

Quick usage

usage
import { AnimatedNumber } from "@pinky-ui/systems";

<AnimatedNumber value={1503} prefix="$" locale="en-US" />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

duration={250}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
decimalsnumber0Stable locale-formatted precision.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Visual interpolation is aria-hidden; assistive technology receives only the final value.

Performance

  • Writes visual text directly rather than rendering React every frame.
  • Animation frame is canceled on value change or unmount.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Occasional KPI and summary updates

When not to use

  • Constant feeds or delayed first values

Skill

Purpose

AnimatedNumber explains a discrete numeric update with a short direction-aware interpolation. Use it for occasional KPI, progress and summary changes.

Keep duration below roughly 700ms and preserve locale, decimals, prefix and suffix. Avoid constant live feeds, slot-machine columns or delaying the first readable value.

The visual interpolation is hidden from assistive technology while one stable final value is exposed. Reduced motion resolves immediately. Use tabular numerals for comparison and pair the number with a meaningful label and change context.

Open this skill on its own page