Text elements are based on design templates that accelerate results and deliver professional-looking videos with no effort. We have dozens of templates you can use, and we are creating new ones every month.
There are simple templates for displaying plain text, others that include text animations, others with complementary text boxes, and others that can be used as chyrons or lower-thirds. Brow se the template catalog in our template library.
Simple text
This first example shows a simple text centred on the video using all default settings of the Text element
and the default basic/001
template. The background of the basic/001
template
is transparent, so make sure not to use the same color for the text and the background.
{
"project": "tutorial",
"resolution": "full-hd",
"quality": "high",
"scenes": [
{
"background-color": "#4392F1",
"elements": [
{
"type": "text",
"items": [
{
"text": "Hello world"
}
],
"y": 510,
"duration": 10
}
]
}
]
}
The output of the JSON above is:
The Text element defaults are:
- The default
template
isbasic/001
- The default
x
is0
- The default
width
is the movie width (1920 pixels) - The default
height
is the movie height (1080 pixels)
The default settings for basic/001
template are:
- The default
color
is white (#FFFFFF
) - The default
background-color
isnone
- The default
font-size
is 30 pixels - The default
font-family
issans-serif
- The default
font-weight
is400
- The default
text-align
iscenter
- The default
shadow
is1
So the text element dimensions are 1920x1080
and it's positioned at x=0
,
y=510
.
The text is centered within the text element, so it's centered within the movie.
Text overlay
Of course, we can overlay text to videos and images. The following is a nice tribute to Lorem ipsum dummy text.
{
"project": "tutorial",
"resolution": "full-hd",
"quality": "high",
"scenes": [
{
"elements": [
{
"type": "video",
"src": "https:\/\/assets.json2video.com\/assets\/videos\/beach-01.mp4"
},
{
"type": "text",
"template": "basic\/001",
"items": [
{
"text": "<em>Lorem Ipsum<\/em> 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",
"color": "#FFFFFF",
"font-size": 60,
"font-family": "Roboto Condensed",
"shadow": 2,
"text-align": "left",
"em-color": "#FFFFFF",
"em-background-color": "#FFB703"
},
{
"text": "It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged",
"color": "#FFFFFF",
"font-size": 60,
"font-family": "Birthstone"
}
],
"width": 960,
"x": 900,
"y": 50
}
]
}
]
}
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 and sits on the background
- The text element uses the
basic/001
template with 2 text items - In the
basic/001
template, text items behave like paragraphs - The first text item is left-aligned and customises the emphasis with a background and foreground color
- The second text item is center-aligned (default setting)
In the font-family
property you can use any system font (Arial, Georgia, sans-serif, serif, monospace) or
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 templates. You can browse all the available text templates in the library.
The following example uses the basic/005
template to show a simple text animation on an empty scene:
{
"project": "tutorial",
"resolution": "full-hd",
"quality": "high",
"scenes": [
{
"background-color": "#6BAA75",
"elements": [
{
"type": "text",
"template": "basic\/005",
"items": [
{
"text": "JSON2Video",
"shadow": 0,
"font-size": 100,
"font-family": "Inter",
"font-weight": "900"
},
{
"text": "Your video API",
"shadow": 0,
"font-size": 100,
"font-family": "Inter",
"font-weight": "900"
}
],
"x": 0,
"y": 510,
"width": 1920,
"height": 1080,
"duration": 5
}
]
}
]
}
The resulting video is:
Lower-third animation
In the television industry, a lower third is a graphic overlay placed in the lower area of the screen, though not necessarily the entire lower third of it, as the name suggests.
JSON2Video library has some lower-third templates you can use out-of-the-box in your projects. The following example shows how to add a lower-third to a video.
{
"project": "tutorial",
"resolution": "full-hd",
"quality": "high",
"scenes": [
{
"elements": [
{
"type": "video",
"src": "https:\/\/assets.json2video.com\/assets\/videos\/spacex-01.mp4"
},
{
"type": "text",
"template": "basic\/020",
"items": [
{
"text": "SpaceX's Falcon Heavy rocket is ready"
},
{
"text": "First launch is planned for February 2018"
},
{
"text": "Space tech"
}
],
"x": 50,
"y": 880,
"width": 1820,
"start": 7,
"duration": 10
}
]
}
]
}
The basic/020
template is inpired on the lower thirds used by CNN.
The template only requires you to provide two or three text items.
