Video Project object

type "video".
Type of project.

height Integer. Minimum is 10, Maximum is 1920.
Height in pixels.

width Integer. Minimum is 10, Maximum is 1920.
Width in pixels.

output "h264" or "gif".
The output file. h264 renders a .mp4 file, gif renders an animated .gif.

gifLoop "true" or "false". Required only when output is "gif"
Loop the .gif indefinitely or play only once.

gifRenderEveryNthFrame Integer. Minimum is 1. Required only when output is "gif"
Frames to include in the gif. Animated gifs usually have a lower fps than videos. 1 includes all frames, 2 includes frames 1, 3, 5 ..., 3 frames 2, 5, 8 ..., and so on.

fps 15 or 24 or 30.
Frames per second.

tracks Array of Track objects. At least 1 Track should be included.
The order matters. Tracks at the start of the array will appear above tracks at the end.

Track object

start Integer. The minimum value is 0.
Frame where the track should appear on the video. The first frame is 0.

duration Integer. The minimum value is 1.
The duration of the track in frames.

element Element object.
Object describing the HTML element of this track.

keyframes Array with Keyframe objects. At least 1 object should be included.
The array with the Keyframe objects describes the style of the track over time.

Element object

type "p" or "audio" or "img" or "iframe" or "video" or "div".
String representing the HTML element of this track.

text String. Required only when type is "p"
The text to show on the "p" element.

fontName String. Required only when type is "p" and fontUrl is present.
The external font name to be used in the fontFamily CSS property for example.

fontUrl String. Required only when type is "p" and fontName is present.
The publicly available URL of a font file. The font name of the file must much the fontName property.

💡

By default Noto fonts are included.

💡

You can get these values from Google fonts opening the URL of the font in you browser, for example for "Permanent Marker":

Open https://fonts.googleapis.com/css2?family=Permanent+Marker.
fontNameis "Permanent Marker"
fontUrl is "https://fonts.gstatic.com/s/permanentmarker/v16/F...lg.woff2"

src String. Required only when type is "audio" or "img" or "iframe" or "video".
The publicly available URL of audio, image, webpage or video. For iframes the website must be allowed to be embedded in third party domains.

Keyframe object

keyframe Integer. Minimum value is 0. Each track should have a keyframe where the value is 0.
The frame where the styles and variables start to be applied to the track. The frame is relative to the track, so if a track starts at frame 30, keyframe 0 refers to the start of the track, that is, the frame 30 in the project.

variables Array of Variable objects.
Variable objects are CSS variables that can change over the course of a keyframe.

elementStyle Object where the keys are CSS properties in javascript form and the values are strings. The properties apply to the element.

containerStyle Object where the keys are CSS properties in javascript form and the values are strings.
The properties apply to the container div that each element has.

Example:

{
  "backgroundColor": "red",
  "marginRight": "var(--my-linear-var)"
}

💡

Note how the property values don't end with ";".

💡

When several tracks need to appear at the same time on the screen with a common layout, it can be useful to use the same CSS grid properties on the containerStyle of the tracks, and different gridArea values on the elementStyle.

Variable objects

Colors variable

type “colors”.
The type of the variable.

name String.
The name of the variable. This is used as a reference in properties. There is no need to prepend "--" to the name. A variable named "myname" will be readable on a property using var(--myname).

outputColors Array of 2 color strings.
The string at index 0 is the starting color, and the string at index 1 is the ending color.

{
  "fps": 30,
  "type": "video",
  "width": 500,
  "height": 500,
  "tracks": [
    {
      "start": 0,
      "duration": 90,
      "keyframes": [
        {
          "containerStyle": {
            "height": "100%",
            "width": "100%"
          },
          "elementStyle": {
            "backgroundColor": "var(--colors-background)",
            "width": "500px",
            "height": "500px"
          },
          "keyframe": 0,
          "variables": [
            {
              "name": "colors-background",
              "outputColors": [
                "#ff0000",
                "#0000FF"
              ],
              "type": "colors"
            }
          ]
        }
      ],
      "element": {
        "type": "div"
      }
    }
  ],
  "output": "gif",
  "gifRenderEveryNthFrame": 1,
  "gifLoop": true
}

Linear variable

type "linear".
The type of the variable.

outputRange Array of 2 floats.
The float at index 0 is the starting value, and the float at index 1 is the ending value.

{
  "fps": 30,
  "type": "video",
  "width": 500,
  "height": 500,
  "tracks": [
    {
      "start": 0,
      "duration": 90,
      "keyframes": [
        {
          "containerStyle": {
            "height": "100%",
            "width": "100%",
            "backgroundColor": "rgb(45, 55, 72)"
          },
          "elementStyle": {
            "backgroundColor": "white",
            "width": "100px",
            "height": "100px",
            "left": "calc(var(--linear-left) * 1px)",
            "position": "absolute",
            "top": "200px"
          },
          "keyframe": 0,
          "variables": [
            {
              "name": "linear-left",
              "outputRange": [
                -100,
                600
              ],
              "type": "linear"
            }
          ]
        }
      ],
      "element": {
        "type": "div"
      }
    }
  ],
  "output": "gif",
  "gifRenderEveryNthFrame": 1,
  "gifLoop": true
}

Bézier variable

type "bezier".
The type of the variable.

outputRange Array of 2 floats.
The float at index 0 is the starting value, and the float at index 1 is the ending value.

bezierValues Array of 4 floats, where each float must be greater or equal to 0 and less or equal to 1.
The values that define the cubic Bézier curve.

💡

You can get these values from https://cubic-bezier.com.

{
  "fps": 30,
  "type": "video",
  "width": 500,
  "height": 500,
  "tracks": [
    {
      "start": 0,
      "duration": 90,
      "keyframes": [
        {
          "containerStyle": {
            "height": "100%",
            "width": "100%",
            "backgroundColor": "rgb(45, 55, 72)"
          },
          "elementStyle": {
            "backgroundColor": "white",
            "width": "100px",
            "height": "100px",
            "left": "calc(var(--bezier-left) * 1px)",
            "position": "absolute",
            "top": "200px"
          },
          "keyframe": 0,
          "variables": [
            {
              "name": "bezier-left",
              "outputRange": [
                -100,
                600
              ],
              "bezierValues": [
                0.83,
                0.06,
                0.18,
                0.9
              ],
              "type": "bezier"
            }
          ]
        }
      ],
      "element": {
        "type": "div"
      }
    }
  ],
  "output": "gif",
  "gifRenderEveryNthFrame": 1,
  "gifLoop": true
}

Spring variable

type "spring".
The type of the variable.

outputRange Array of 2 floats.
The float at index 0 is the starting value, and the float at index 1 is the ending value.

mass Integer.
A lower mass makes the animation faster.

stiffness Integer.
Affects the bounciness of the animation.

damping Integer.
The animation deceleration.

overshootClamping "true" or "false".
Defines if the spring can go over the ending value when bouncing. If true it will not go over the ending value.

{
  "fps": 30,
  "type": "video",
  "width": 500,
  "height": 500,
  "tracks": [
    {
      "start": 0,
      "duration": 90,
      "keyframes": [
        {
          "containerStyle": {
            "height": "100%",
            "width": "100%",
            "backgroundColor": "rgb(45, 55, 72)"
          },
          "elementStyle": {
            "backgroundColor": "white",
            "width": "100px",
            "height": "100px",
            "left": "calc(var(--spring-left) * 1px)",
            "position": "absolute",
            "top": "200px"
          },
          "keyframe": 0,
          "variables": [
            {
              "name": "spring-left",
              "outputRange": [
                0,
                400
              ],
              "damping": 10,
              "mass": 1,
              "stiffness": 100,
              "overshootClamping": false,
              "type": "spring"
            }
          ]
        }
      ],
      "element": {
        "type": "div"
      }
    }
  ],
  "output": "gif",
  "gifRenderEveryNthFrame": 1,
  "gifLoop": true
}

Custom variable

type "custom".
The type of the variable.

cssValue String.
Plain CSS variable. This can be useful to make variables out of other variables or as a single source of truth for colors in a Keyframe for example.

{
  "fps": 30,
  "type": "video",
  "width": 500,
  "height": 500,
  "tracks": [
    {
      "start": 0,
      "duration": 90,
      "keyframes": [
        {
          "containerStyle": {
            "height": "100%",
            "width": "100%",
            "backgroundColor": "rgb(45, 55, 72)"
          },
          "elementStyle": {
            "backgroundColor": "white",
            "width": "100px",
            "height": "100px",
            "position": "absolute",
            "top": "200px",
            "left": "var(--custom-left)"
          },
          "keyframe": 0,
          "variables": [
            {
              "name": "custom-offset",
              "cssValue": "50px",
              "type": "custom"
            },
            {
              "name": "custom-left",
              "cssValue": "calc(var(--custom-offset) + calc(var(--frame) *  3px))",
              "type": "custom"
            }
          ]
        }
      ],
      "element": {
        "type": "div"
      }
    }
  ],
  "output": "gif",
  "gifRenderEveryNthFrame": 1,
  "gifLoop": true
}

Animatable properties

CSS properties that include a value of time are not supported, in particular, the animation* properties. You can achieve the same results using Keyframe objects and applying variables to animatable properties:

See the list of animatable properties.

Internal variables

You can use these variables on every Keyframe without defining them:

Variable	Description
`--height`	Height of the project.
`--width`	Width of the project.
`--fps`	Frames per second.
`--durationInFrames`	Total frames of the project.
`--frame`	Current frame.