Experience Shotstack for yourself,
with no risk, and generate your first
video in 5 minutes.
Unlimited developer sandbox
No credit card required
Professionally built templates to get you started.
{
"timeline": {
"soundtrack": {
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/private/stomp.wav",
"effect": "fadeOut"
},
"fonts": [
{
"src": "https://shotstack-ingest-api-v1-sources.s3.ap-southeast-2.amazonaws.com/wzr6y0wtti/zzy9j8yn-3h5d-xe4d-dw0k-2aiu8d2pqyxh/source.ttf"
},
{
"src": "https://shotstack-ingest-api-v1-sources.s3.ap-southeast-2.amazonaws.com/wzr6y0wtti/zzy9j8yc-1cni-mt2w-3ogs-2gvxce3gghhu/source.ttf"
},
{
"src": "https://shotstack-ingest-api-v1-sources.s3.ap-southeast-2.amazonaws.com/wzr6y0wtti/zzy9j8y4-0vs9-oy0p-yab2-084jou1b6m1s/source.ttf"
}
],
"background": "#000000",
"tracks": [
{
"clips": [
{
"asset": {
"type": "html",
"html": "<p>Create</p>",
"css": "p { font-family: \"Lato\"; color: #ffffff; font-size: 30px; text-align: center; font-weight: bold; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 0.096,
"length": 0.6,
"transition": {
"in": "zoom"
}
},
{
"asset": {
"type": "html",
"html": "<p>videos</p>",
"css": "p { font-family: \"Lato\"; color: #ffffff; font-size: 30px; text-align: center; font-weight: bold; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 0.72,
"length": 0.62
},
{
"asset": {
"type": "html",
"html": "<p>using</p>",
"css": "p { font-family: \"Lato\"; color: #ffffff; font-size: 30px; text-align: center; font-weight: bold; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 1.38,
"length": 0.22
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">using html</p>",
"css": "p { color: #ffffff; font-size: 30px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 1.64,
"length": 0.31
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">using html and</p>",
"css": "p { color: #ffffff; font-size: 30px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 1.99,
"length": 0.26
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">using html and css</p>",
"css": "p { color: #ffffff; font-size: 30px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 2.29,
"length": 0.31
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">with</p>",
"css": "p { color: #000000; font-size: 30px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 2.64,
"length": 0.56,
"transition": {
"in": "slideLeft"
}
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">the</p>",
"css": "p { color: #000000; font-size: 30px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 3.24,
"length": 0.68
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">Shotstack</p>",
"css": "p { color: #ffffff; font-size: 34px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 3.98,
"length": 0.54,
"effect": "zoomIn"
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">API</p>",
"css": "p { color: #000000; font-size: 38px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 4.56,
"length": 0.6,
"transition": {
"in": "slideLeft"
}
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">AP</p>",
"css": "p { color: #000000; font-size: 38px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 5.2,
"length": 0.04
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">I</p>",
"css": "p { color: #000000; font-size: 38px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 5.28,
"length": 0.04
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">use</p>",
"css": "p { color: #ffffff; font-size: 30px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 5.36,
"length": 0.22
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">your</p>",
"css": "p { color: #ffffff; font-size: 30px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 5.62,
"length": 0.22
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">own</p>",
"css": "p { color: #ffffff; font-size: 30px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 5.86,
"length": 0.22
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">font</p>",
"css": "p { color: #ffffff; font-size: 30px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 6.12,
"length": 0.2
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">font</p>",
"css": "p { color: #ffffff; font-size: 30px; font-family: Permanent Marker; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 6.36,
"length": 0.26,
"fit": "none",
"scale": 1,
"offset": {
"x": 0,
"y": 0
},
"position": "center"
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">and</p>",
"css": "p { color: #ffffff; font-size: 30px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 6.66,
"length": 0.3
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">add</p>",
"css": "p { color: #ffffff; font-size: 30px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 7,
"length": 0.46
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">color</p>",
"css": "p { color: #25d3d0; font-size: 30px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 7.5,
"length": 0.3
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">color and</p>",
"css": "p { color: #25d3d0; font-size: 30px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 7.84,
"length": 0.4
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">color and style</p>",
"css": "p { color: #fc73b4; font-size: 30px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 8.28,
"length": 0.38
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">color and style</p>",
"css": "p { color: #72fdd3; font-size: 30px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 8.7,
"length": 0.38
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">to</p>",
"css": "p { color: #ffffff; font-size: 32px; font-family: Lato; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 9.12,
"length": 0.62,
"fit": "none",
"scale": 1,
"offset": {
"x": 0,
"y": 0
},
"position": "center"
},
{
"asset": {
"type": "html",
"html": "<p>one</p>",
"css": "p { font-family: \"Lato\"; color: #ffffff; font-size: 32px; text-align: center; font-weight: bold; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 9.78,
"length": 0.58
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">ten</p>",
"css": "p { color: #ffffff; font-size: 32px; font-family: \"Lato\"; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 10.4,
"length": 0.26
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">hundreds</p>",
"css": "p { color: #ffffff; font-size: 32px; font-family: \"Lato\"; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 10.7,
"length": 0.26
},
{
"asset": {
"type": "html",
"html": "<p data-html-type=\"text\">thousands</p>",
"css": "p { color: #ffffff; font-size: 32px; font-family: \"Lato\"; text-align: center; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 11,
"length": 0.58
},
{
"asset": {
"type": "html",
"html": "<p>of</p>",
"css": "p { font-family: \"Lato\"; color: #000000; font-size: 34px; text-align: center; font-weight: bold; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 11.62,
"length": 0.18
},
{
"asset": {
"type": "html",
"html": "<p>videos</p>",
"css": "p { font-family: \"Lato\"; color: #000000; font-size: 34px; text-align: center; font-weight: bold; }",
"width": 450,
"height": 100,
"position": "center"
},
"start": 11.84,
"length": 1,
"effect": "zoomIn",
"transition": {
"out": "zoom"
}
}
]
},
{
"clips": [
{
"asset": {
"type": "html",
"html": "<p> </p>",
"width": 1024,
"height": 576,
"background": "#ffffff"
},
"start": 2.64,
"length": 1.32
},
{
"asset": {
"type": "html",
"html": "<p> </p>",
"width": 1024,
"height": 576,
"background": "#ffffff"
},
"start": 4.56,
"length": 0.76
},
{
"asset": {
"type": "html",
"html": "<p> </p>",
"width": 1024,
"height": 576,
"background": "#25d3d0"
},
"start": 9.12,
"length": 2.46,
"fit": "none",
"scale": 1,
"offset": {
"x": 0,
"y": 0
},
"position": "center"
},
{
"asset": {
"type": "html",
"html": "<p> </p>",
"width": 1024,
"height": 576,
"background": "#fc73b4"
},
"start": 11.62,
"length": 1.22
}
]
},
{
"clips": [
{
"asset": {
"type": "image",
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/branding/logo-reverse.png"
},
"start": 12.88,
"length": 4,
"fit": "none",
"transition": {
"in": "slideUp"
}
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1024,
"height": 576
}
}
}A mix of movement and text that conveys ideas and evokes emotion.
New to Shotstack? Sign up to use this template and start automatically generating videos.
Test and modify this template directly in Postman by forking our public Collection.
Customise the template and integrate it in to your application or workflow using the programming language of your choice.
Use this template as the starting point for integration with our SDKs. Port the JSON to PHP, Node or Ruby and integrate in to your code base.
Unlimited developer sandbox
No credit card required
