Number Ticker

For metrics, prices and live counts. Grouping, decimals and currency come from the locale, and each digit rolls on its own spring.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add number-ticker

Usage

Example

import { NumberTicker } from "@/components/galactrex/number-ticker";

<NumberTicker value={revenue} format={{ style: "currency", currency: "USD" }} />

Source

Installs to components/galactrex/number-ticker.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

Prop	Type	Default	Description
`value`	`number`	—	The number to show.
`locale`	`string`	—	BCP 47 locale; defaults to the visitor's.
`format`	`Intl.NumberFormatOptions`	—	e.g. { style: "currency", currency: "USD" }.
`stiffness`	`number`	`140`	Spring stiffness of each roll.
`className`	`string`	—	Extra classes for the outer element.

Variants

Count. Plain integers with grouping.
Currency. Pass `format` with a currency.

Accessibility

The formatted value is read once; the rolling digits are aria-hidden.
Tabular digits keep the width steady.

Motion and reduced motion

Each digit is a transform-only roll on a spring.
Reduced motion: digits change in place.