Prepared Docs

Prepared Docs

⌘K

    Loading navigation…

User

  1. Primitives
  2. Animated Number
  3. API and Development

Animated Number

API and Development

View Source
Submit Issue

AnimatedNumber is exported from @prepared911/ui-core. The NumberFlow adapter stays package-private behind a lazy boundary. Suspense and a local chunk error boundary ensure federation or network failures degrade to static formatting.

Props

Name

Type

Default

Description

value

number

—

Target numeric value to display and animate toward.

announcement

LocalizedMessage

—

—

duration

number

900

Animation duration in milliseconds.

formatOptions

NumberFormatOptions

—

Intl options forwarded to localized formatNumber.

from

number

—

Optional entrance start value. Omission snaps first paint to value.

live

AnimatedNumberLive

—

—

medium

boolean

false

When true, renders text with medium font weight.

strong

boolean

false

When true, renders text with bold font weight.

type

AnimatedNumberTextType

—

Typography variant. Defaults to {@link TextType.NumericDisplay}.

Storybook

Interactive examples and edge cases for this component are in Storybook.

Default
Numeric Display
Numeric Compact
Percent Value
Polite Live Region
Activity Style Counter
Brand Theme Matrix

Basic animation

Polite live region

Requires a localized announcement. Initial paint stays silent; announcements fire on NumberFlow animation finish.

Typography

Defaults to NumericDisplay. Other animated text types share the same NumberFlow runtime.

Lazy runtime

Import AnimatedNumber from the package root. Do not deep-import the adapter module. Static SSR and Suspense fallback paint use StaticCoreText with asSpan.

Related exports

ExportNotes
AnimatedNumberLiveOff (default) or Polite.
usePrefersReducedMotionPublic hook backed by the private ref-counted broker.

Previous

Animated Number / Usage

Next

Animated Number / Accessibility

On this page

Props
Storybook
Basic animation
Polite live region
Typography
Lazy runtime
Related exports