Automate your videos & images.

Programmatically create and scale your marketing media.

Design your media with HTML and CSS.

Download from the editor or make dynamic content with the API.

{
"fps": 30,
"type": "video",
"width": 1280,
"height": 720,
"output": "h264",
"tracks": [
{
"start": 207,
"element": {
"text": "☑️ Static PNG, animated GIF or MP4",
"type": "p"
},
"duration": 122,
"keyframes": [
{
"keyframe": 0,
"variables": [
{
"name": "linear-opacity",
"type": "linear",
"outputRange": [
0,
1
]
},
{
"mass": 1,
"name": "spring-scale",
"type": "spring",
"damping": 10,
"stiffness": 100,
"outputRange": [
0.1,
1
],
"overshootClamping": false
}
],
"elementStyle": {
"color": "rgb(193, 194, 197)",
"opacity": "var(--linear-opacity)",
"fontSize": "60px",
"gridArea": "3 / 1 / 4 / 2",
"marginTop": "auto",
"textAlign": "center",
"transform": "scale(var(--spring-scale))",
"borderRadius": "50%",
"marginBottom": "auto",
"backdropFilter": "blur(10px)"
},
"containerStyle": {
"width": "100%",
"height": "100%",
"rowGap": "0px",
"display": "grid",
"columnGap": "0px",
"gridTemplateRows": "repeat(3, 1fr)",
"gridTemplateColumns": "1fr"
}
},
{
"keyframe": 21,
"variables": [],
"elementStyle": {
"color": "rgb(193, 194, 197)",
"fontSize": "60px",
"gridArea": "3 / 1 / 4 / 2",
"marginTop": "auto",
"textAlign": "center",
"borderRadius": "50%",
"marginBottom": "auto",
"backdropFilter": "blur(10px)"
},
"containerStyle": {
"width": "100%",
"height": "100%",
"rowGap": "0px",
"display": "grid",
"columnGap": "0px",
"gridTemplateRows": "repeat(3, 1fr)",
"gridTemplateColumns": "1fr"
}
}
]
},
{
"start": 157,
"element": {
"text": "☑️ Use the web editor or the API ",
"type": "p"
},
"duration": 172,
"keyframes": [
{
"keyframe": 0,
"variables": [
{
"name": "linear-opacity",
"type": "linear",
"outputRange": [
0,
1
]
},
{
"mass": 1,
"name": "spring-scale",
"type": "spring",
"damping": 10,
"stiffness": 100,
"outputRange": [
0.1,
1
],
"overshootClamping": false
}
],
"elementStyle": {
"color": "rgb(193, 194, 197)",
"opacity": "var(--linear-opacity)",
"fontSize": "60px",
"gridArea": "2 / 1 / 3 / 2",
"marginTop": "auto",
"textAlign": "center",
"transform": "scale(var(--spring-scale))",
"borderRadius": "50%",
"marginBottom": "auto",
"backdropFilter": "blur(10px)"
},
"containerStyle": {
"width": "100%",
"height": "100%",
"rowGap": "0px",
"display": "grid",
"columnGap": "0px",
"gridTemplateRows": "repeat(3, 1fr)",
"gridTemplateColumns": "1fr"
}
},
{
"keyframe": 21,
"variables": [],
"elementStyle": {
"color": "rgb(193, 194, 197)",
"fontSize": "60px",
"gridArea": "2 / 1 / 3 / 2",
"marginTop": "auto",
"textAlign": "center",
"borderRadius": "50%",
"marginBottom": "auto",
"backdropFilter": "blur(10px)"
},
"containerStyle": {
"width": "100%",
"height": "100%",
"rowGap": "0px",
"display": "grid",
"columnGap": "0px",
"gridTemplateRows": "repeat(3, 1fr)",
"gridTemplateColumns": "1fr"
}
}
]
},
{
"start": 107,
"element": {
"text": "☑️ Its just HTML and CSS ",
"type": "p"
},
"duration": 222,
"keyframes": [
{
"keyframe": 0,
"variables": [
{
"name": "linear-opacity",
"type": "linear",
"outputRange": [
0,
1
]
},
{
"mass": 1,
"name": "spring-scale",
"type": "spring",
"damping": 10,
"stiffness": 100,
"outputRange": [
0.1,
1
],
"overshootClamping": false
}
],
"elementStyle": {
"color": "rgb(193, 194, 197)",
"opacity": "var(--linear-opacity)",
"fontSize": "60px",
"gridArea": "1 / 1 / 2 / 2",
"marginTop": "auto",
"textAlign": "center",
"transform": "scale(var(--spring-scale))",
"borderRadius": "50%",
"marginBottom": "auto",
"backdropFilter": "blur(10px)"
},
"containerStyle": {
"width": "100%",
"height": "100%",
"rowGap": "0px",
"display": "grid",
"columnGap": "0px",
"gridTemplateRows": "repeat(3, 1fr)",
"gridTemplateColumns": "1fr"
}
},
{
"keyframe": 21,
"variables": [],
"elementStyle": {
"color": "rgb(193, 194, 197)",
"fontSize": "60px",
"gridArea": "1 / 1 / 2 / 2",
"marginTop": "auto",
"textAlign": "center",
"borderRadius": "50%",
"marginBottom": "auto",
"backdropFilter": "blur(10px)"
},
"containerStyle": {
"width": "100%",
"height": "100%",
"rowGap": "0px",
"display": "grid",
"columnGap": "0px",
"gridTemplateRows": "repeat(3, 1fr)",
"gridTemplateColumns": "1fr"
}
}
]
},
{
"start": 0,
"element": {
"text": "videoCode.IO",
"type": "p",
"fontUrl": "https://fonts...woff",
"fontName": "Open Sans"
},
"duration": 107,
"keyframes": [
{
"keyframe": 0,
"variables": [
{
"name": "bezier-width",
"type": "bezier",
"outputRange": [
1,
65
],
"bezierValues": [
0.26,
0.08,
0.36,
0.99
]
}
],
"elementStyle": {
"color": "rgb(193, 194, 197)",
"width": "calc(var(--bezier-width) * 1%)",
"fontSize": "120px",
"overflow": "hidden",
"textAlign": "center",
"fontFamily": "Open Sans",
"borderRight": "15px solid rgb(193, 194, 197)"
},
"containerStyle": {
"width": "100%",
"height": "100%",
"display": "flex",
"alignItems": "center",
"justifyContent": "center"
}
},
{
"keyframe": 76,
"variables": [],
"elementStyle": {
"color": "rgb(193, 194, 197)",
"width": "65%",
"fontSize": "120px",
"overflow": "hidden",
"textAlign": "center",
"fontFamily": "Open Sans",
"borderRight": "15px solid rgb(193, 194, 197)"
},
"containerStyle": {
"width": "100%",
"height": "100%",
"display": "flex",
"alignItems": "center",
"justifyContent": "center"
}
},
{
"keyframe": 90,
"variables": [
{
"name": "linear-opacity",
"type": "linear",
"outputRange": [
1,
0
]
}
],
"elementStyle": {
"color": "rgb(193, 194, 197)",
"width": "65%",
"opacity": "var(--linear-opacity)",
"fontSize": "120px",
"overflow": "hidden",
"textAlign": "center",
"fontFamily": "Open Sans",
"borderRight": "15px solid rgb(193, 194, 197)"
},
"containerStyle": {
"width": "100%",
"height": "100%",
"display": "flex",
"alignItems": "center",
"justifyContent": "center"
}
}
]
},
{
"start": 0,
"element": {
"src": "https://storage...mp4",
"type": "video"
},
"duration": 107,
"keyframes": [
{
"keyframe": 0,
"variables": [],
"elementStyle": {
"width": "100%",
"height": "100%",
"objectFit": "scale-down"
},
"containerStyle": {
"width": "100%",
"height": "100%",
"display": "flex",
"alignItems": "center",
"justifyContent": "center"
}
},
{
"keyframe": 90,
"variables": [
{
"name": "linear-opacity",
"type": "linear",
"outputRange": [
1,
0
]
}
],
"elementStyle": {
"width": "100%",
"height": "100%",
"opacity": "var(--linear-opacity)",
"objectFit": "scale-down"
},
"containerStyle": {
"width": "100%",
"height": "100%",
"display": "flex",
"alignItems": "center",
"justifyContent": "center"
}
}
]
},
{
"start": 90,
"element": {
"src": "https://storage...mp4",
"type": "video"
},
"duration": 239,
"keyframes": [
{
"keyframe": 0,
"variables": [
{
"name": "linear-opacity",
"type": "linear",
"outputRange": [
1,
0.5
]
}
],
"elementStyle": {
"width": "100%",
"height": "100%",
"opacity": "var(--linear-opacity)",
"objectFit": "scale-down"
},
"containerStyle": {
"width": "100%",
"height": "100%",
"display": "flex",
"alignItems": "center",
"justifyContent": "center"
}
},
{
"keyframe": 38,
"variables": [],
"elementStyle": {
"width": "100%",
"height": "100%",
"opacity": "0.5",
"objectFit": "scale-down"
},
"containerStyle": {
"width": "100%",
"height": "100%",
"display": "flex",
"alignItems": "center",
"justifyContent": "center"
}
}
]
}
]
}

Render a PNG in a single request, a GIF or MP4 in seconds.

© 2022 videocode