Adding Text elements

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.

The settings object in the Text element defines the text properties. In general, these are CSS properties such as font-size, color or font-weight.

Font families

The font-family property defines what font to use and you can specify any Google Font name or a URL to a TTF or WOFF font.

Examples:

"font-family": "Montserrat"

"font-family": "Roboto"

"font-family": "https://fonts.cdnfonts.com/s/23620/Questrian.woff"

When using Google Fonts make sure that you specify a valid font-weight for that font.

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.

JSON
PHP
NodeJS

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

require 'vendor/autoload.php';

use JSON2Video\Movie;
use JSON2Video\Scene;

// Create and initialize the movie object
$movie = new Movie;
$movie->setAPIKey(YOUR_API_KEY);
$movie->resolution = 'full-hd';
$movie->quality = 'high';
$movie->draft = false;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->background-color = '#4392F1';
$scene1->addElement([
'text',
'Hello world',
10
]);
$movie->addScene($scene1);

// Finally, render the movie
$movie->render();

// Wait for the movie to be rendered
$movie->waitToFinish();

let movie = new Movie;
movie.setAPIKey(YOUR_API_KEY);
movie.set("resolution", "full-hd");
movie.set("quality", "high");
movie.set("draft", false);

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("background-color", "#4392F1");
scene1.addElement([
"text",
"Hello world",
10
]);
movie.addScene(scene1);

// Finally, render the movie
movie.render();

// Wait for the movie to be rendered
movie.waitToFinish();

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.

JSON
PHP
NodeJS

{
    "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
                }
            ]
        }
    ]
}

require 'vendor/autoload.php';

use JSON2Video\Movie;
use JSON2Video\Scene;

// Create and initialize the movie object
$movie = new Movie;
$movie->setAPIKey(YOUR_API_KEY);
$movie->resolution = 'full-hd';
$movie->quality = 'high';
$movie->draft = true;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->addElement([
'video',
'https://assets.json2video.com/assets/videos/beach-01.mp4'
]);
$scene1->addElement([
'text',
'001',
'"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',
	[
'#FFFFFF',
'60px',
'Roboto Condensed',
2,
'left',
'top'
	],
960,
900,
50
]);
$movie->addScene($scene1);

// Finally, render the movie
$movie->render();

// Wait for the movie to be rendered
$movie->waitToFinish();

let movie = new Movie;
movie.setAPIKey(YOUR_API_KEY);
movie.set("resolution", "full-hd");
movie.set("quality", "high");
movie.set("draft", true);

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.addElement([
"video",
"https://assets.json2video.com/assets/videos/beach-01.mp4"
]);
scene1.addElement([
"text",
"001",
"\"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",
	[
"#FFFFFF",
"60px",
"Roboto Condensed",
2,
"left",
"top"
	],
960,
900,
50
]);
movie.addScene(scene1);

// Finally, render the movie
movie.render();

// Wait for the movie to be rendered
movie.waitToFinish();

The movie script does the following:

The movie includes a scene with 2 elements: a video element and a text element
The video element just links to the beach video that sits on the background
The text element uses the 001 style to print a static text
The text element is top-left-aligned and customises the foreground color, font family and size, adding a subtle shadow below the text

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:

JSON
PHP
NodeJS

{
    "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
                }
            ]
        }
    ]
}

require 'vendor/autoload.php';

use JSON2Video\Movie;
use JSON2Video\Scene;

// Create and initialize the movie object
$movie = new Movie;
$movie->setAPIKey(YOUR_API_KEY);
$movie->resolution = 'full-hd';
$movie->quality = 'high';
$movie->draft = true;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->background-color = '#6BAA75';
$scene1->addElement([
'text',
'003',
'JSON2Video is your video editing API',
	[
0,
'80px',
'Inter',
'900'
	],
960,
5
]);
$movie->addScene($scene1);

// Finally, render the movie
$movie->render();

// Wait for the movie to be rendered
$movie->waitToFinish();

let movie = new Movie;
movie.setAPIKey(YOUR_API_KEY);
movie.set("resolution", "full-hd");
movie.set("quality", "high");
movie.set("draft", true);

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("background-color", "#6BAA75");
scene1.addElement([
"text",
"003",
"JSON2Video is your video editing API",
	[
0,
"80px",
"Inter",
"900"
	],
960,
5
]);
movie.addScene(scene1);

// Finally, render the movie
movie.render();

// Wait for the movie to be rendered
movie.waitToFinish();

The resulting video is:

Text elements

← API Tutorial

Types of elements

Font families

Simple static text

Text overlay

Text animation