Component advanced/060

Component ID: advanced/060

An animated number counter that counts up or down between two values. The text template uses '__num__' as a placeholder that gets replaced by the current value during animation. Supports decimal places and custom easing. Great for statistics, metrics, countdowns, price reveals, or any numeric animation.

Section	Interactive or data-driven elements: buttons, counters, ratings, images, tables
Animation	Number interpolates from 'from' to 'to' value with configurable duration and easing. The __num__ placeholder in the text template updates in real-time.
Intro duration	10 s

Preview

Element schema

Minimal shape of a advanced/060 component element:

{
    "type": "component",
    "component": "advanced/060",
    "settings": {}
}

See the full component element reference for shared properties like duration, start, x, y, etc.

Settings

The settings property accepts the following groups. Each group contains CSS-like properties; see component CSS properties for the full list of supported keys.

`counter`

Counter configuration and styling.

Property	Type	Default	Description
`text`	string	`__num__`	Text template. Use '__num__' as placeholder (e.g. '$__num__ USD', '__num__%').
`from`	number	`0`	Starting value.
`to`	number	`1000`	Ending value.
`duration`	number	`5000`	Animation duration in ms (0-10000).
`decimals`	integer	`0`	Decimal places (0-3).
`easing`	string	`easeInOutExpo`	Anime.js easing function.
`color`	string	`white`	Text color.
`font-size`	string	—	Font size.
`font-family`	string	`Roboto`	Google Font name.
`text-stroke`	string	—	Text outline.
`vertical-align`	string (enum)	`center`	Vertical position. Values: `top`, `center`, `bottom`
`horizontal-align`	string (enum)	`center`	Horizontal position. Values: `left`, `center`, `right`
`text-align`	string	`center`	Text alignment.