Looks & styles

The look of a video comes from layers. Name a domain and you get a complete, matching look. Add a theme for a different complete look in one word, and a style block to change any part of it. Whatever you set in style wins over the theme, the theme wins over the domain, and everything you leave out stays as decided by the layer below.

{
  "domain": "science",
  "style": {
    "theme": "blueprint-lab",
    "palette": "ocean",
    "mascot": "robot",
    "transition": "iris",
    "captions": "highlight",
    "progress": "ring",
    "header": [
      "title"
    ],
    "effects": [
      "vignette"
    ]
  }
}

Domains

A domain is a ready-made look for a kind of topic. If you do not set one, the engine guesses it from the title and topic.

Themes

A theme bundles a palette, fonts, background, host, motion, captions and effects that were chosen to go together. style.theme takes its id; any other style field you add replaces that part of the theme.

const speed = distance / time;

function greet(name) {

  return `Hello, ${name}`;

}

for (const item of list) {

  total += item.price;

}

const speed = distance / time;

function greet(name) {

  return `Hello, ${name}`;

}

for (const item of list) {

  total += item.price;

}

import { useState } from "react";

const [open, setOpen] = useState(false);

if (ready) deploy();

git commit -m "ship it"

npm run build

await fetch("/api/videos");

import { useState } from "react";

const [open, setOpen] = useState(false);

if (ready) deploy();

git commit -m "ship it"

npm run build

await fetch("/api/videos");

SELECT name, total

FROM orders

WHERE total > 100

ORDER BY total DESC;

def fib(n):

    return n if n < 2 else fib(n - 1) + fib(n - 2)

SELECT name, total

FROM orders

WHERE total > 100

ORDER BY total DESC;

def fib(n):

    return n if n < 2 else fib(n - 1) + fib(n - 2)

Palettes

A palette is a list of backdrops. By default each scene moves to the next one, which gives a video its rhythm; set cycleBackdrops to false to keep the first. Or skip palettes: brandColor builds one around a single hex colour.

Fonts

fonts picks a heading and body pairing. displayFont and bodyFont override one side with any of the 27 fonts below.

Pairings

All fonts

Backgrounds

Backgrounds are animated layers behind every scene. background picks a ready-made stack by name (one per domain and mood, listed below); backgroundLayers builds your own, up to six layers from the bottom up. Use [] for a plain backdrop and glyphs to choose the symbols of the floating-glyphs layer.

Layers

const speed = distance / time;

function greet(name) {

  return `Hello, ${name}`;

}

for (const item of list) {

  total += item.price;

}

const speed = distance / time;

function greet(name) {

  return `Hello, ${name}`;

}

for (const item of list) {

  total += item.price;

}

import { useState } from "react";

const [open, setOpen] = useState(false);

if (ready) deploy();

git commit -m "ship it"

npm run build

await fetch("/api/videos");

import { useState } from "react";

const [open, setOpen] = useState(false);

if (ready) deploy();

git commit -m "ship it"

npm run build

await fetch("/api/videos");

SELECT name, total

FROM orders

WHERE total > 100

ORDER BY total DESC;

def fib(n):

    return n if n < 2 else fib(n - 1) + fib(n - 2)

SELECT name, total

FROM orders

WHERE total > 100

ORDER BY total DESC;

def fib(n):

    return n if n < 2 else fib(n - 1) + fib(n - 2)

Ready-made stacks

Host characters

The host waves on the title card and reacts while the narrator speaks. Set mascot to none for a video without a character.

Motion

Item animations (enter)

How the items of a scene appear as the narrator reaches them. Set style.enter for the whole video or enter on one scene.

Scene transitions

How a scene replaces the one before it. Set style.transition for the whole video or transition on one scene.

The scene that leaves stays on screen while the next one comes in, so a cut never looks like a slide being swapped. Pick one calm transition for the whole video and use a different one on the few scenes where the story turns.

Camera

style.camera decides how the picture moves while a scene is on screen. dolly and handheld are the moves of a professional edit: the first lasts exactly as long as each scene.

Colour grade

style.grade puts one deliberate colour look over the whole picture, the way the last step of a professional edit does: a tone curve, a saturation and a tint for the shadows and the highlights. It is left out by default.

Effects

Effects are finishing touches over the whole picture: a vignette, film bars, a colour grade, a glow. style.effects takes a list of up to 4; [] switches off the effects of a theme.

Captions

Captions show the sentence being spoken, a few words at a time, with the current word highlighted. They can be burnt into exports (captions: true, the default) or switched off. captionPosition is bottom (the default) or top.

Top bar, progress and logo

Top bar

Every scene except the title card shows a bar along the top with the host, the title, the kicker and the brand name. style.header is the list of the parts to show: leave it out for all of them, give a shorter list to keep some, or [] to remove the bar from the whole video. A single scene can override it with header: true or header: false, which is handy for a map or a big statement that should fill the frame.

Progress indicator

style.progress adds an indicator along the top edge of the video (or a small ring in the corner), so viewers see how far they are. It is off by default, which suits short and cinematic videos; use it for long lessons. A scene can turn it on or off with progress: true or progress: false. With more than 16 scenes dots falls back to bar.

Logo

brand.logo is the address of a picture (an http(s) address, a data:image URL or a path starting with /) shown in a corner of every scene. brand.logoPosition picks the corner: top-right, top-left, bottom-right, bottom-left. A transparent PNG or an SVG looks best. A logo that would not stand out on the background (a white logo on a light video) can sit on a rounded plate: brand.logoPlate is light (for a dark logo) or dark (for a light one).

Safe zones

On a tall video (9:16) the apps of TikTok, Instagram and YouTube draw their own buttons, names and captions over the picture. style.safeZone keeps the titles, captions and logo clear of them, and draws everything a little smaller to fit. The margins are those the platforms publish for a 1080 × 1920 video; all takes the tightest of each, so one video works everywhere. Other shapes are not changed.

Shapes and tones

Corner shape

shape sets how round cards, chips and buttons are.

Tone sets

Tones colour chips, bars and chart parts. tones chooses the set; an item then picks one of the eight tones by name with its own tone field (rose marks something negative, emerald something positive).