Element•Premium

Number Ticker

An odometer-style number that rolls each digit into place with staggered spring motion, motion blur, locale and currency formatting, and up/down trend flashes.

Revenue this month

Live

$48,210.50

Active users: 12,840
Conversion: 4.62%
Orders: 1,394

Customize

Roll duration1000msDigit stagger45msCurrencyLive updatesTrend arrows

Overview

About the Number Ticker

An odometer-style number that rolls each digit into place with staggered spring motion, motion blur, locale and currency formatting, and up/down trend flashes. It is delivered as editable TypeScript for React. Tailwind CSS is not required; the component's visual CSS is embedded in its TypeScript source. Its focused API can be adapted to your own content and visual system.

Usage

When to use it

Dashboards, KPI cards, and live metrics that update in real time.
Pricing, landing page stats, and counters that should animate into view.

What’s included

Files in the product ZIP

Number Ticker source

components/number-ticker.tsx

Editable React and TypeScript component source.

Working example

examples/example.tsx

A minimal import and render example that matches the packaged API.

Installation guide

README.md

Manual ZIP installation, styling, compatibility, asset, and usage notes.

Usage

Import and render

Copy the packaged source to the documented path, then use the public API shown below.

Import

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

Minimum example

export default function RevenueStat() {
  return <NumberTicker value={48210.5} format={{ style: "currency", currency: "USD" }} showTrend />;
}

Props

Component API

Prop	Type	Default	Description
value	number	—	Number to display.
locale	string	"en-US"	Locale passed to Intl.NumberFormat.
format	Intl.NumberFormatOptions	—	Currency, percent, fraction digits, or compact notation.
prefix	string	""	Text before the number.
suffix	string	""	Text after the number.
duration	number	1000	Roll duration in milliseconds.
stagger	number	45	Delay between digits, right to left, in milliseconds.
animateOnView	boolean	true	Roll up from zero when first scrolled into view.
showTrend	boolean	false	Show an arrow that flips with the last change.
flash	boolean	true	Briefly tint the number green or red on change.
upColor	string	"#4ade80"	Color for increases.
downColor	string	"#fb7185"	Color for decreases.
className	string	""	Additional root class names.

Also accepts native span attributes. The formatted value is exposed as hidden text for screen readers.

Compatibility

Verified project setup

ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
Tailwind CSS is not required; the component's visual CSS is embedded in its TypeScript source.

Images: No image files are included or required by the packaged component.
Fonts: No font files are included. The component uses system font fallbacks unless your app supplies a matching font.

Installation

Add it to your project

Download the Number Ticker ZIP, place the source file at src/components/number-ticker.tsx, and copy the example into your own page or feature folder.

Target path

src/components/number-ticker.tsx

No additional npm runtime packages are required beyond the React host; follow the styling requirements below.

Styling requirements

Tailwind CSS is not required by this component.
All component styles are embedded in components/number-ticker.tsx.