Elastic box component

Demo:

basic/100 component schema

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

{
    "type": "component",
    "component": "basic/100",
    "settings": {
        "box": {}
    }
}

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

Settings property for basic/100

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

box object

Check all available object properties here.

Object property

Default value

initial_left

"0%"

initial_width

"100%"

initial_top

"0%"

initial_height

"100%"

final_left

"0%"

final_width

"100%"

final_top

"0%"

final_height

"100%"

duration

1000

background

"cornflowerblue"

box-shadow

"2px 0 2px 0 #555"

easing

"easeOutElastic"

Usage examples

Check the following examples of basic/100:

{
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "duration": 5,
            "elements": [
                {
                    "type": "component",
                    "component": "basic/100",
                    "settings": {
                        "box": {
                            "background": "white",
                            "box-shadow": "none",
                            "final_width": "50%"
                        }
                    }
                }
            ],
            "background-color": "#4392F1"
        }
    ]
}

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/100',
	[
		[
'white',
'none',
'50%'
		]
	]
]);
$scene1->background-color = '#4392F1';
$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/100",
	[
		[
"white",
"none",
"50%"
		]
	]
]);
scene1.set("background-color", "#4392F1");
movie.addScene(scene1);

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

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

Example 2

JSON
PHP
NodeJS

{
    "width": 640,
    "height": 360,
    "quality": "high",
    "draft": false,
    "scenes": [
        {
            "background-color": "#1A281F",
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/new-york-02.mp4",
                    "scale": {
                        "width": 640
                    },
                    "start": 1,
                    "duration": 15,
                    "muted": true
                },
                {
                    "type": "component",
                    "component": "basic/100",
                    "settings": {
                        "box": {
                            "final_width": "40%",
                            "background": "#1A281F",
                            "box-shadow": "none",
                            "duration": 2000
                        }
                    },
                    "start": 1
                },
                {
                    "type": "text",
                    "style": "004",
                    "text": "new
york",
                    "settings": {
                        "font-family": "Libre Baskerville",
                        "font-weight": "400",
                        "font-size": "60px"
                    },
                    "width": 256,
                    "start": 2.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->width = 640;
$movie->height = 360;
$movie->quality = 'high';
$movie->draft = false;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->background-color = '#1A281F';
$scene1->addElement([
'video',
'https://assets.json2video.com/assets/videos/new-york-02.mp4',
	[
640
	],
1,
15,
true
]);
$scene1->addElement([
'component',
'basic/100',
	[
		[
'40%',
'#1A281F',
'none',
2000
		]
	],
1
]);
$scene1->addElement([
'text',
'004',
'new<br>york',
	[
'Libre Baskerville',
'400',
'60px'
	],
256,
2.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("width", 640);
movie.set("height", 360);
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", "#1A281F");
scene1.addElement([
"video",
"https://assets.json2video.com/assets/videos/new-york-02.mp4",
	[
640
	],
1,
15,
true
]);
scene1.addElement([
"component",
"basic/100",
	[
		[
"40%",
"#1A281F",
"none",
2000
		]
	],
1
]);
scene1.addElement([
"text",
"004",
"new<br>york",
	[
"Libre Baskerville",
"400",
"60px"
	],
256,
2.5
]);
movie.addScene(scene1);

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

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

Example 3

JSON
PHP
NodeJS

{
    "width": 360,
    "height": 640,
    "quality": "high",
    "draft": false,
    "scenes": [
        {
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/food-01.mp4",
                    "scale": {
                        "width": 400
                    },
                    "start": 1,
                    "muted": true
                },
                {
                    "type": "component",
                    "component": "basic/100",
                    "settings": {
                        "box": {
                            "initial_top": "90%",
                            "initial_height": "0%",
                            "final_top": "80%",
                            "final_height": "20%",
                            "background": "#FAF3DD",
                            "duration": 3000
                        }
                    },
                    "start": 1
                },
                {
                    "type": "text",
                    "style": "004",
                    "text": "Enjoy!",
                    "settings": {
                        "font-family": "Shadows Into Light",
                        "font-weight": "400",
                        "font-size": "80px",
                        "color": "#333333",
                        "text-shadow": "none"
                    },
                    "y": 512,
                    "height": 128,
                    "start": 3
                }
            ]
        }
    ]
}

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->width = 360;
$movie->height = 640;
$movie->quality = 'high';
$movie->draft = false;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->addElement([
'video',
'https://assets.json2video.com/assets/videos/food-01.mp4',
	[
400
	],
1,
true
]);
$scene1->addElement([
'component',
'basic/100',
	[
		[
'90%',
'0%',
'80%',
'20%',
'#FAF3DD',
3000
		]
	],
1
]);
$scene1->addElement([
'text',
'004',
'Enjoy!',
	[
'Shadows Into Light',
'400',
'80px',
'#333333',
'none'
	],
512,
128,
3
]);
$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("width", 360);
movie.set("height", 640);
movie.set("quality", "high");
movie.set("draft", false);

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.addElement([
"video",
"https://assets.json2video.com/assets/videos/food-01.mp4",
	[
400
	],
1,
true
]);
scene1.addElement([
"component",
"basic/100",
	[
		[
"90%",
"0%",
"80%",
"20%",
"#FAF3DD",
3000
		]
	],
1
]);
scene1.addElement([
"text",
"004",
"Enjoy!",
	[
"Shadows Into Light",
"400",
"80px",
"#333333",
"none"
	],
512,
128,
3
]);
movie.addScene(scene1);

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

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

Elastic box component

← Documentation

Text styles

Component packs

Elastic box component

basic/100 component schema

Settings property for basic/100

Usage examples

Example 1

Example 2

Example 3