Number Ticker

Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.

• Value *

  value · number

  The figure the ticker lands on. This is the shot. Pick the number the scene is about.

  now: 1248930

• From

  from · number

  Figure the wheels start on. 0 reads as 'counting up'; a nearby value reads as 'moving'.

  now: 0

• Prefix

  prefix · string

  Set before the number, half size and quiet, a currency mark such as '$' or '€'.

  now: $

• Suffix

  suffix · string

  Set after the number, half size and quiet: '%', 'x', 'M', 'ms'. Omit for a bare figure.

• Decimals

  decimals · number

  Fixed decimal places. Decimal wheels spin fastest, so 1–2 places buys a lot of motion.

  now: 0

• Separator

  separator · "comma" | "period" | "thin-space" | "none"

  Thousands separator. 'thin-space' is the typographic choice for data; 'period' also flips the decimal mark to a comma for European locales.

  now: comma

• Label

  label · string

  Small uppercase mono line above the number, what the metric is. Omit for a bare figure.

  now: Annual recurring revenue

• Caption

  caption · string

  Quiet mono line under the number: the qualifier, period or source. One short sentence.

  now: Up 41% year over year · rolling twelve months

• Underline

  underline · boolean

  Draw an accent rule the width of the number once the count settles.

  now: true

• Align

  align · "left" | "center"

  Block alignment. 'left' composes the frame; 'center' suits 1:1 and 9:16.

  now: left

• Spin

  spin · number

  Extra revolutions the fastest (right-hand) wheel makes. 0 rolls each wheel straight to its digit; 1+ gives every wheel at least one full turn, the right-hand ones more.

  now: 2

• Brand

  brand · string

  Brand token id, one of the keys of BRANDS.

  now: slate