Number Ticker

A number that springs up to its value when scrolled into view.

Example.tsx

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

export function Example() {
  return (
    <NumberTicker
      from={0}
      value={12480}
      decimals={0}
      prefix=""
      suffix="+"
      className="text-5xl font-semibold"
    />
  )
}

Dependencies

motion

Props

Prop	Type	Default	Description
value*	number	—	Target value to count to.
from	number	0	Count starts from this value.
decimals	number	0	Decimal places to render.
delay	number	0	Delay before starting, in seconds.
className	string	—
prefix	string	""	Prefix / suffix rendered around the number (e.g. "$", "%").
suffix	string	""