Text elements provide a supereasy way to add text animations that accelerate results and deliver professional-looking videos with no effort.

There are simple animations for displaying a plain text and others that include text animations in different flavors.

Check the available text styles.

Simple static text

This first example shows a simple text centred on the video using all default settings of the Text element and the default 001 style. The background of the 001 style is transparent, so make sure not to use the same color for the text and the background.

{
    "resolution": "full-hd",
    "quality": "high",
    "draft": false,
    "scenes": [
        {
            "background-color": "#4392F1",
            "elements": [
                {
                    "type": "text",
                    "text": "Hello world",
                    "duration": 10
                }
            ]
        }
    ]
}

The output of the JSON above is:

The Text element defaults are:

Variable Default value
style 001
x 0
y 0
width 0
height 0

The text is centered horizontally and vertically within its defined canvas because it's the default behaviour of the 001 style. Check the default settings for 001 style here.

Text overlay

Of course, we can overlay text to videos and images. The following is a nice tribute to Lorem ipsum dummy text.

{
    "resolution": "full-hd",
    "quality": "high",
    "draft": true,
    "scenes": [
        {
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/beach-01.mp4"
                },
                {
                    "type": "text",
                    "style": "001",
                    "text": "\"Lorem ipsum\" has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book",
                    "settings": {
                        "color": "#FFFFFF",
                        "font-size": "60px",
                        "font-family": "Roboto Condensed",
                        "shadow": 2,
                        "text-align": "left",
                        "vertical-align": "top"
                    },
                    "width": 960,
                    "x": 900,
                    "y": 50
                }
            ]
        }
    ]
}

The movie script does the following:

In the font-family property you can use any Google Font. Be careful because Google Font font-family names are case sensitive, and must match with an existing font-weight.

Text animation

Text elements also allow you to create text animations based on existing styles. You can browse all the available text styles in the library.

The following example uses the 003 style to show a simple text animation that shows the text word by word:

{
    "resolution": "full-hd",
    "quality": "high",
    "draft": true,
    "scenes": [
        {
            "background-color": "#6BAA75",
            "elements": [
                {
                    "type": "text",
                    "style": "003",
                    "text": "JSON2Video is your video editing API",
                    "settings": {
                        "shadow": 0,
                        "font-size": "80px",
                        "font-family": "Inter",
                        "font-weight": "900"
                    },
                    "width": 960,
                    "duration": 5
                }
            ]
        }
    ]
}

The resulting video is: