Glin UI
Signature / Molecule

Number Ticker

Animated number counter triggered by scroll visibility via IntersectionObserver.

Edit on GitHub
Active workspaces
12480
Uptime, last 90 days
99.98%
Median build time (s)
42

Installation$

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

Prefer the package?

Usage$

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

Examples$

With Decimals$

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



export function NumberTickerDecimalDemo() {
return (
  <span className="text-4xl font-bold">
    <NumberTicker value={99.99} decimals={2} />
  </span>
)
}

Currency Format$

$49,999
import { NumberTicker } from "@glinui/ui"



export function NumberTickerCurrencyDemo() {
return (
  <span className="text-4xl font-bold">
    <NumberTicker value={49999} formatOptions={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }} />
  </span>
)
}

Slow Duration$

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



export function NumberTickerSlowDemo() {
return (
  <span className="text-4xl font-bold">
    <NumberTicker value={500} duration={3} />
  </span>
)
}

Engines$

Number Ticker drives its main animation through the pluggable motion engine. Pass engine="css" | "motion" | "gsap", wrap a subtree in MotionEngineProvider, or set data-glin-engine on <html>. The css engine is built in and dependency free; motion and gsap are opt-in through @glinui/motion/register/*. Motion level none renders the final state and subtle is opacity only.

Engine comparison$

CSS

12480

Motion

12480

GSAP

12480
// Same component, three engines. motion and gsap are opt-in:
// import "@glinui/motion/register/motion"
// import "@glinui/motion/register/gsap"
<NumberTicker engine="css" value={12480} />



<NumberTicker engine="motion" value={12480} />



<NumberTicker engine="gsap" value={12480} />

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$

PropTypeRequiredDefaultDescription
decimalsnumberNo0Auto-generated from TypeScript source.
delaynumberNo0Delay in seconds.
durationnumberNo1.5Duration in seconds.
engineEngineNameNo-Engine override: `css` (default), `motion`, `gsap` or a registered custom engine.
formatOptionsIntl.NumberFormatOptionsNo-Auto-generated from TypeScript source.
fromnumberNo0Auto-generated from TypeScript source.
motionMotionLevelNo-Motion override. `none` renders the static final state, `subtle` is opacity only.
valuenumberYes-Auto-generated from TypeScript source.

Source$

import { 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-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

NumberTickerProps

NumberTickerProps

PropTypeRequiredDefaultDescription
decimalsnumberNo0-
delaynumberNo0Delay in seconds.
durationnumberNo1.5Duration in seconds.
engineEngineNameNo-Engine override: `css` (default), `motion`, `gsap` or a registered custom engine.
formatOptionsIntl.NumberFormatOptionsNo--
fromnumberNo0-
motionMotionLevelNo-Motion override. `none` renders the static final state, `subtle` is opacity only.
valuenumberYes--