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"

Usage examples

Check the following examples of basic/100:

Example 1

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

Example 2

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