Components Number Ticker

Petal Pro is the full SaaS app this is built for

Auth, billing, admin, and Claude Code integration included. One purchase, unlimited projects.

See what's included

Number Ticker

A number that counts up to its value when it scrolls into view, and re-animates whenever the value changes. Built for stats sections and live dashboards. Requires the PetalNumberTicker hook from the petal_components JS bundle. The final value is rendered server-side, so the number is correct without JavaScript.
Basic number ticker

Give it a unique id (required) and a value. The counter runs from start_value (0 by default) to value when the element enters the viewport.

5200
heex
Formatting

Use prefix and suffix to wrap the number, and decimal_places to set the precision shown while counting. Formatting runs through Intl.NumberFormat, so thousands separators and decimal marks follow the browser locale by default. Pass locale to pin a specific one, like de-DE.

$48500 99.95% 1234567.89
heex
Live updates

Bind value to an assign and the ticker re-animates whenever it changes, counting from the previous value to the new one instead of restarting at start_value. Click the button to see it.

5200
heex
Stats row

The classic marketing strip: a row of tickers with small labels underneath. Each ticker needs its own unique id.

6100+
GitHub stars
$28400
MRR
99.99%
Uptime
heex
Properties
elixir 
          
  attr :id, :string, required: true
  attr :value, :any, required: true, doc: "the target number (integer or float)"
  attr :start_value, :any, default: 0, doc: "where the first animation counts from"
  attr :duration, :integer, default: 1500, doc: "animation length in milliseconds"
  attr :decimal_places, :integer, default: 0, doc: "decimal places to show while counting"
  attr :prefix, :string, default: nil, doc: "e.g. $"
  attr :suffix, :string, default: nil, doc: "e.g. + or %"
  attr :locale, :string, default: nil, doc: "BCP 47 locale for number formatting (e.g. de-DE); defaults to the browser locale"
  attr :class, :any, default: nil, doc: "extra classes (set font size/weight here)"
  attr :rest, :global