Counter component

Use counters to show a string that counts up or down between two values

Demo:

advanced/060 component schema

This is a simplified schema of a advanced/060 component element:

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

Check the full specification of the Component schema in the API documentation.

Settings property for advanced/060

This component accepts the following object items in the settings property:

counter object

Defines the counter properties

Check all available object properties here.
Object property
Default value
text
"__num__"
The text to show. __num__ is a placeholder of the counter value
from
0
The initial value of the counter
to
1000
The final value of the counter
duration
5000
Specifies the count duration in milliseconds. From 0 to 10,000 milliseconds
vertical-align
"center"
horizontal-align
"center"
text-align
"center"
color
"white"
font-family
"Roboto"

Usage examples

Check the following examples of advanced/060:

Example 1

{
    "width": 640,
    "height": 320,
    "quality": "high",
    "draft": true,
    "scenes": [
        {
            "background-color": "#6BAA75",
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/server-01.mp4",
                    "scale": {
                        "width": 640
                    }
                },
                {
                    "type": "component",
                    "component": "advanced/060",
                    "settings": {
                        "counter": {
                            "text": "__num__ Gbps",
                            "from": 10,
                            "to": 115,
                            "duration": 3000,
                            "color": "white",
                            "text-shadow": ".2vw .2vw .2vw rgba(50,50,50,0.5)",
                            "font-size": "10vw",
                            "font-family": "Anton"
                        }
                    },
                    "duration": 10
                }
            ]
        }
    ]
}

Example 2

{
    "width": 640,
    "height": 320,
    "quality": "high",
    "draft": true,
    "scenes": [
        {
            "background-color": "#6BAA75",
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/typing-01.mp4",
                    "scale": {
                        "width": 640
                    },
                    "duration": 10
                },
                {
                    "type": "component",
                    "component": "advanced/060",
                    "settings": {
                        "counter": {
                            "text": "$__num__ USD",
                            "from": 500,
                            "to": 100,
                            "duration": 5000,
                            "color": "white",
                            "text-stroke": ".25vw black",
                            "font-size": "12vw",
                            "font-family": "Roboto Mono"
                        }
                    },
                    "duration": 10
                }
            ]
        }
    ]
}