Signature / Moleculestable

Number Ticker

Animated number counter triggered by scroll visibility via IntersectionObserver.

@glinui/uiComponent: number-ticker

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add number-ticker

Usage$

Renders a number that counts up from from to value when scrolled into view. Uses requestAnimationFrame for smooth 60fps animation.

Basic$

TSX

1import { NumberTicker } from "@glinui/ui"
2
3export function NumberTickerDemo() {
4return (
5  <span className="text-4xl font-bold">
6    <NumberTicker value={1234} />
7  </span>
8)
9}

Examples$

With Decimals$

0.00

TSX

1import { NumberTicker } from "@glinui/ui"
2
3export function NumberTickerDecimalDemo() {
4return (
5  <span className="text-4xl font-bold">
6    <NumberTicker value={99.99} decimals={2} />
7  </span>
8)
9}

Currency Format$

TSX

1import { NumberTicker } from "@glinui/ui"
2
3export function NumberTickerCurrencyDemo() {
4return (
5  <span className="text-4xl font-bold">
6    <NumberTicker value={49999} formatOptions={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }} />
7  </span>
8)
9}

Slow Duration$

TSX

1import { NumberTicker } from "@glinui/ui"
2
3export function NumberTickerSlowDemo() {
4return (
5  <span className="text-4xl font-bold">
6    <NumberTicker value={500} duration={3} />
7  </span>
8)
9}

Accessibility$

Renders as a <span> with tabular-nums for stable width during counting.
Add aria-label to the parent if the number has semantic meaning beyond decoration.

Reduced Motion$

When prefers-reduced-motion is active, the final value is displayed immediately without animation.

API Reference$

Prop	Type	Required	Default	Description
`decimals`	`number`	No	`0`	Auto-generated from TypeScript source.
`delay`	`number`	No	`0`	Auto-generated from TypeScript source.
`duration`	`number`	No	`1.5`	Auto-generated from TypeScript source.
`formatOptions`	`Intl.NumberFormatOptions`	No	`-`	Auto-generated from TypeScript source.
`from`	`number`	No	`0`	Auto-generated from TypeScript source.
`value`	`number`	Yes	`-`	Auto-generated from TypeScript source.

Source$

TSX

1import { NumberTicker } from "@glinui/ui"

packages/ui/src/components/number-ticker.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/number-ticker.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

NumberTickerProps

`NumberTickerProps`

Prop	Type	Required	Default	Description
`decimals`	`number`	No	`0`	-
`delay`	`number`	No	`0`	-
`duration`	`number`	No	`1.5`	-
`formatOptions`	`Intl.NumberFormatOptions`	No	`-`	-
`from`	`number`	No	`0`	-
`value`	`number`	Yes	`-`	-