One line lower-third component

This component is inpired on the lower-thirds used by CNN for the breaking news

Demo:

basic/052 component schema

This is a simplified schema of a basic/052 component element:

{
    "type": "component",
    "component": "basic/052",
    "settings": {
        "card": {},
        "headline": {},
        "section": {}
    }
}

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

Settings property for basic/052

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

card object

Check all available object properties here.

Object property

Default value

vertical-align

"bottom"

horizontal-align

"left"

padding

"4vw"

headline object

Check all available object properties here.

Object property

Default value

text

"Lorem ipsum dolor sit amet, consectetur adipiscing elit"

font-size

"2.5vw"

font-family

"Inter"

font-weight

"400"

background-color

"white"

color

"black"

padding

"1vw"

section object

Check all available object properties here.

Object property

Default value

text

"SECTION"

font-size

"2.5vw"

font-family

"Inter"

font-weight

"400"

background-color

"red"

color

"white"

padding

"1vw"

Usage examples

Check the following examples of basic/052:

{
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "duration": 5,
            "elements": [
                {
                    "type": "component",
                    "component": "basic/052",
                    "settings": {
                        "headline": {
                            "text": "Lorem ipsum dolor sit amet"
                        }
                    },
                    "cache": false
                }
            ],
            "background-color": "#4392F1",
            "cache": true
        }
    ]
}

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';

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->duration = 5;
$scene1->addElement([
'component',
'basic/052',
	[
		[
'Lorem ipsum dolor sit amet'
		]
	],
false
]);
$scene1->background-color = '#4392F1';
$scene1->cache = 1;
$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");

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("duration", 5);
scene1.addElement([
"component",
"basic/052",
	[
		[
"Lorem ipsum dolor sit amet"
		]
	],
false
]);
scene1.set("background-color", "#4392F1");
scene1.set("cache", 1);
movie.addScene(scene1);

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

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

Example 2

JSON
PHP
NodeJS

{
    "resolution": "full-hd",
    "quality": "high",
    "draft": false,
    "scenes": [
        {
            "background-color": "black",
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/mars-01.mp4",
                    "scale": {
                        "height": 1080
                    }
                },
                {
                    "type": "component",
                    "component": "basic/052",
                    "settings": {
                        "section": {
                            "text": "SPACE"
                        },
                        "headline": {
                            "text": "25 photos that could change the way you see our universe"
                        }
                    }
                }
            ]
        }
    ]
}

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 = 'black';
$scene1->addElement([
'video',
'https://assets.json2video.com/assets/videos/mars-01.mp4',
	[
1080
	]
]);
$scene1->addElement([
'component',
'basic/052',
	[
		[
'SPACE'
		],
		[
'25 photos that could change the way you see our universe'
		]
	]
]);
$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", "black");
scene1.addElement([
"video",
"https://assets.json2video.com/assets/videos/mars-01.mp4",
	[
1080
	]
]);
scene1.addElement([
"component",
"basic/052",
	[
		[
"SPACE"
		],
		[
"25 photos that could change the way you see our universe"
		]
	]
]);
movie.addScene(scene1);

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

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

One line lower-third component

← Documentation

Text styles

Component packs