Premium & Brand

Animated Number

Number that springs to its target — counts up or down.

Import

tsx

import { AnimatedNumber } from "@cronus-ui/ui";

bash

npx cronus-ui add animated-number

Examples

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component AnimatedNumberDefault layout:inline style:animated-number {
  value:1234
  aria-label:"Count"
  label "Count"
}

page "/audit/animated-number/default" type:custom {
  use AnimatedNumberDefault
}

API Reference

Generated from the component's exported types.

AnimatedNumberProps

Extends Omit<React.ComponentPropsWithoutRef<typeof motion.span>, "children">

Prop	Type	Default	Description
`value`*	`number`	—	Target value. Whenever it changes, the number tweens from its current displayed value to here.
`format`	`(n: number) => string`	—	Custom formatter for the displayed string. When omitted, the value is formatted with `Intl.NumberFormat(locale, formatOptions)`.
`locale`	`string`	`"en-US"`	Locale passed to the default `Intl.NumberFormat` formatter (ignored if `format` is set).
`formatOptions`	`Intl.NumberFormatOptions`	—	Options passed to the default `Intl.NumberFormat` formatter (ignored if `format` is set).
`duration`	`number`	`0.8`	Tween length in seconds. Defaults to ~0.8s; overrides the spring's natural duration.
`spring`	`AnimatedNumberSpring`	—	Override the settle spring (advanced — defaults to the Cronus count spring).
`reducedMotion`	`"user" \| "always" \| "never"`	`"user"`	How `prefers-reduced-motion` is honoured. Defaults to `"user"` (snap for users who opt out). Pass `"never"` to always animate the count — e.g. a showcase that must demonstrate it — or `"always"` to force the snap.
`announce`	`boolean`	`false`	Announce the settled value to screen readers via a visually-hidden `aria-live="polite"` sibling. Defaults to `false`. Only the final value (once the tween completes / snaps) is announced — never the ~97 interpolated frames — so opting in stays quiet.
`asChild`	`boolean`	—	Render as the child element via Slot.
`className`	`string`	—	Additional class names merged onto the root.