← Recipes

Illustrated story video with drawn-in scenes

Three pencil and watercolour scenes of a lighthouse keeper. Each one is drawn onto blank paper, the pen lines first and the colour after, then fades back to paper before the next. A caption eases in under each scene.

How it is built

  1. 01

    Scenes that draw themselves

    One track holds blank paper and the three drawings. A wipe with a map turns the paper into the drawing in the order the map's greys give, black first and white last. Each map is its drawing in greyscale with the pen lines pushed to black, so the lines land first and the colour washes in after. A crossfade takes each scene back to paper before the next one.

  2. 02

    The episode tag

    A cream pill and the title in Lora italic, on screen for the whole story.

  3. 03

    The captions

    Each line is a cream strip and a text layer whose words fade in one at a time and fade out the same way.

The request

The exact request behind the video above, and every file it names is public, so it runs as it is. To make your own, change the episode title, first caption, first drawing, and its draw-in map.

job.ts
import { createClient, outputUrl } from "@rendobar/sdk";


const rb = createClient({ apiKey: process.env.RENDOBAR_API_KEY });


const job = await rb.jobs.run({
  type: "compose",
  params: {
    output: {
      format: "mp4",
      resolution: {
        width: 1920,
        height: 1080
      },
      fps: 30
    },
    timeline: {
      tracks: [
        {
          clips: [
            {
              asset: {
                type: "shape",
                shape: "rect",
                color: "#F3EAD7"
              },
              length: 1.8,
              start: 0
            },
            {
              type: "transition",
              transition: "wipe",
              map: "https://cdn.rendobar.com/compose/player/media/sk1-draw.jpg",
              duration: 1.6
            },
            {
              asset: {
                type: "image",
                src: "https://cdn.rendobar.com/compose/player/media/sk1.png"
              },
              transform: {
                fit: "cover",
                scale: [
                  {
                    time: 0,
                    value: 1,
                    easing: "linear"
                  },
                  {
                    time: 3.2,
                    value: 1.05
                  }
                ]
              },
              length: 3.2
            },
            {
              type: "transition",
              transition: "crossfade",
              duration: 0.4
            },
            {
              asset: {
                type: "shape",
                shape: "rect",
                color: "#F3EAD7"
              },
              length: 1.9
            },
            {
              type: "transition",
              transition: "wipe",
              map: "https://cdn.rendobar.com/compose/player/media/sk2-draw.jpg",
              duration: 1.4
            },
            {
              asset: {
                type: "image",
                src: "https://cdn.rendobar.com/compose/player/media/sk2.png"
              },
              transform: {
                fit: "cover",
                scale: [
                  {
                    time: 0,
                    value: 1,
                    easing: "linear"
                  },
                  {
                    time: 3.2,
                    value: 1.05
                  }
                ]
              },
              length: 3.2
            },
            {
              type: "transition",
              transition: "crossfade",
              duration: 0.4
            },
            {
              asset: {
                type: "shape",
                shape: "rect",
                color: "#F3EAD7"
              },
              length: 1.9
            },
            {
              type: "transition",
              transition: "wipe",
              map: "https://cdn.rendobar.com/compose/player/media/sk3-draw.jpg",
              duration: 1.4
            },
            {
              asset: {
                type: "image",
                src: "https://cdn.rendobar.com/compose/player/media/sk3.png"
              },
              transform: {
                fit: "cover",
                scale: [
                  {
                    time: 0,
                    value: 1,
                    easing: "linear"
                  },
                  {
                    time: 3.2,
                    value: 1.05
                  }
                ]
              },
              length: 3.2
            },
            {
              type: "transition",
              transition: "crossfade",
              duration: 0.4
            },
            {
              asset: {
                type: "shape",
                shape: "rect",
                color: "#F3EAD7"
              },
              length: 0.4
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "shape",
                shape: "rect",
                color: "#FBF6EA",
                radius: 0.5
              },
              transform: {
                size: {
                  width: 720,
                  height: 96
                },
                position: {
                  x: 960,
                  y: 112
                }
              },
              start: 0.2,
              length: 9.8,
              opacity: [
                {
                  time: 0,
                  value: 0,
                  easing: "easeOutQuad"
                },
                {
                  time: 0.4,
                  value: 1
                },
                {
                  time: 9.4,
                  value: 1,
                  easing: "easeInQuad"
                },
                {
                  time: 9.8,
                  value: 0
                }
              ]
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "text",
                text: "The Last Keeper  ·  Part 1",
                style: {
                  font: "Lora",
                  size: 48,
                  weight: 600,
                  italic: true,
                  color: "#2B2118",
                  animate: {
                    type: "fade",
                    duration: 0.5
                  }
                }
              },
              transform: {
                position: {
                  x: 960,
                  y: 112
                }
              },
              start: 0.3,
              length: 9.7,
              opacity: [
                {
                  time: 0,
                  value: 1
                },
                {
                  time: 9.35,
                  value: 1,
                  easing: "easeInQuad"
                },
                {
                  time: 9.7,
                  value: 0
                }
              ]
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "shape",
                shape: "rect",
                color: "#FBF6EA",
                radius: 0.12,
                shadow: {
                  color: "#00000033",
                  blur: 24,
                  x: 0,
                  y: 8
                }
              },
              transform: {
                size: {
                  width: 1440,
                  height: 170
                },
                position: {
                  x: 960,
                  y: 925
                }
              },
              start: 1,
              length: 2.3,
              opacity: [
                {
                  time: 0,
                  value: 0,
                  easing: "easeOutQuad"
                },
                {
                  time: 0.4,
                  value: 1
                },
                {
                  time: 1.9,
                  value: 1,
                  easing: "easeInQuad"
                },
                {
                  time: 2.3,
                  value: 0
                }
              ]
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "text",
                text: "He kept the light for forty years.",
                style: {
                  font: "Lora",
                  size: 84,
                  weight: 500,
                  italic: true,
                  color: "#2B2118",
                  animate: {
                    type: "fade",
                    by: "word",
                    duration: 0.9,
                    out: "fade"
                  }
                }
              },
              transform: {
                position: {
                  x: 960,
                  y: 925
                }
              },
              start: 1.15,
              length: 2.15
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "shape",
                shape: "rect",
                color: "#FBF6EA",
                radius: 0.12,
                shadow: {
                  color: "#00000033",
                  blur: 24,
                  x: 0,
                  y: 8
                }
              },
              transform: {
                size: {
                  width: 1440,
                  height: 170
                },
                position: {
                  x: 960,
                  y: 925
                }
              },
              start: 4.4,
              length: 2.3,
              opacity: [
                {
                  time: 0,
                  value: 0,
                  easing: "easeOutQuad"
                },
                {
                  time: 0.4,
                  value: 1
                },
                {
                  time: 1.9,
                  value: 1,
                  easing: "easeInQuad"
                },
                {
                  time: 2.3,
                  value: 0
                }
              ]
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "text",
                text: "Every night he climbed the stairs.",
                style: {
                  font: "Lora",
                  size: 84,
                  weight: 500,
                  italic: true,
                  color: "#2B2118",
                  animate: {
                    type: "fade",
                    by: "word",
                    duration: 0.9,
                    out: "fade"
                  }
                }
              },
              transform: {
                position: {
                  x: 960,
                  y: 925
                }
              },
              start: 4.55,
              length: 2.15
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "shape",
                shape: "rect",
                color: "#FBF6EA",
                radius: 0.12,
                shadow: {
                  color: "#00000033",
                  blur: 24,
                  x: 0,
                  y: 8
                }
              },
              transform: {
                size: {
                  width: 1440,
                  height: 170
                },
                position: {
                  x: 960,
                  y: 925
                }
              },
              start: 7.7,
              length: 2,
              opacity: [
                {
                  time: 0,
                  value: 0,
                  easing: "easeOutQuad"
                },
                {
                  time: 0.4,
                  value: 1
                },
                {
                  time: 1.6,
                  value: 1,
                  easing: "easeInQuad"
                },
                {
                  time: 2,
                  value: 0
                }
              ]
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "text",
                text: "Then, one night, a ship came home.",
                style: {
                  font: "Lora",
                  size: 84,
                  weight: 500,
                  italic: true,
                  color: "#2B2118",
                  animate: {
                    type: "fade",
                    by: "word",
                    duration: 0.9,
                    out: "fade"
                  }
                }
              },
              transform: {
                position: {
                  x: 960,
                  y: 925
                }
              },
              start: 7.85,
              length: 1.85
            }
          ]
        }
      ]
    }
  },
});


console.log(outputUrl(job));

Install with npm i @rendobar/sdk. jobs.run() submits and waits, so it returns the finished job in one call.

terminal
curl https://api.rendobar.com/jobs \
  -H "Authorization: Bearer $RENDOBAR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"type":"compose","params":{"output":{"format":"mp4","resolution":{"width":1920,"height":1080},"fps":30},"timeline":{"tracks":[{"clips":[{"asset":{"type":"shape","shape":"rect","color":"#F3EAD7"},"length":1.8,"start":0},{"type":"transition","transition":"wipe","map":"https://cdn.rendobar.com/compose/player/media/sk1-draw.jpg","duration":1.6},{"asset":{"type":"image","src":"https://cdn.rendobar.com/compose/player/media/sk1.png"},"transform":{"fit":"cover","scale":[{"time":0,"value":1,"easing":"linear"},{"time":3.2,"value":1.05}]},"length":3.2},{"type":"transition","transition":"crossfade","duration":0.4},{"asset":{"type":"shape","shape":"rect","color":"#F3EAD7"},"length":1.9},{"type":"transition","transition":"wipe","map":"https://cdn.rendobar.com/compose/player/media/sk2-draw.jpg","duration":1.4},{"asset":{"type":"image","src":"https://cdn.rendobar.com/compose/player/media/sk2.png"},"transform":{"fit":"cover","scale":[{"time":0,"value":1,"easing":"linear"},{"time":3.2,"value":1.05}]},"length":3.2},{"type":"transition","transition":"crossfade","duration":0.4},{"asset":{"type":"shape","shape":"rect","color":"#F3EAD7"},"length":1.9},{"type":"transition","transition":"wipe","map":"https://cdn.rendobar.com/compose/player/media/sk3-draw.jpg","duration":1.4},{"asset":{"type":"image","src":"https://cdn.rendobar.com/compose/player/media/sk3.png"},"transform":{"fit":"cover","scale":[{"time":0,"value":1,"easing":"linear"},{"time":3.2,"value":1.05}]},"length":3.2},{"type":"transition","transition":"crossfade","duration":0.4},{"asset":{"type":"shape","shape":"rect","color":"#F3EAD7"},"length":0.4}]},{"clips":[{"asset":{"type":"shape","shape":"rect","color":"#FBF6EA","radius":0.5},"transform":{"size":{"width":720,"height":96},"position":{"x":960,"y":112}},"start":0.2,"length":9.8,"opacity":[{"time":0,"value":0,"easing":"easeOutQuad"},{"time":0.4,"value":1},{"time":9.4,"value":1,"easing":"easeInQuad"},{"time":9.8,"value":0}]}]},{"clips":[{"asset":{"type":"text","text":"The Last Keeper  ·  Part 1","style":{"font":"Lora","size":48,"weight":600,"italic":true,"color":"#2B2118","animate":{"type":"fade","duration":0.5}}},"transform":{"position":{"x":960,"y":112}},"start":0.3,"length":9.7,"opacity":[{"time":0,"value":1},{"time":9.35,"value":1,"easing":"easeInQuad"},{"time":9.7,"value":0}]}]},{"clips":[{"asset":{"type":"shape","shape":"rect","color":"#FBF6EA","radius":0.12,"shadow":{"color":"#00000033","blur":24,"x":0,"y":8}},"transform":{"size":{"width":1440,"height":170},"position":{"x":960,"y":925}},"start":1,"length":2.3,"opacity":[{"time":0,"value":0,"easing":"easeOutQuad"},{"time":0.4,"value":1},{"time":1.9,"value":1,"easing":"easeInQuad"},{"time":2.3,"value":0}]}]},{"clips":[{"asset":{"type":"text","text":"He kept the light for forty years.","style":{"font":"Lora","size":84,"weight":500,"italic":true,"color":"#2B2118","animate":{"type":"fade","by":"word","duration":0.9,"out":"fade"}}},"transform":{"position":{"x":960,"y":925}},"start":1.15,"length":2.15}]},{"clips":[{"asset":{"type":"shape","shape":"rect","color":"#FBF6EA","radius":0.12,"shadow":{"color":"#00000033","blur":24,"x":0,"y":8}},"transform":{"size":{"width":1440,"height":170},"position":{"x":960,"y":925}},"start":4.4,"length":2.3,"opacity":[{"time":0,"value":0,"easing":"easeOutQuad"},{"time":0.4,"value":1},{"time":1.9,"value":1,"easing":"easeInQuad"},{"time":2.3,"value":0}]}]},{"clips":[{"asset":{"type":"text","text":"Every night he climbed the stairs.","style":{"font":"Lora","size":84,"weight":500,"italic":true,"color":"#2B2118","animate":{"type":"fade","by":"word","duration":0.9,"out":"fade"}}},"transform":{"position":{"x":960,"y":925}},"start":4.55,"length":2.15}]},{"clips":[{"asset":{"type":"shape","shape":"rect","color":"#FBF6EA","radius":0.12,"shadow":{"color":"#00000033","blur":24,"x":0,"y":8}},"transform":{"size":{"width":1440,"height":170},"position":{"x":960,"y":925}},"start":7.7,"length":2,"opacity":[{"time":0,"value":0,"easing":"easeOutQuad"},{"time":0.4,"value":1},{"time":1.6,"value":1,"easing":"easeInQuad"},{"time":2,"value":0}]}]},{"clips":[{"asset":{"type":"text","text":"Then, one night, a ship came home.","style":{"font":"Lora","size":84,"weight":500,"italic":true,"color":"#2B2118","animate":{"type":"fade","by":"word","duration":0.9,"out":"fade"}}},"transform":{"position":{"x":960,"y":925}},"start":7.85,"length":1.85}]}]}}}'

Returns immediately with a job id. Poll GET /jobs/{id} or register a webhook rather than blocking on the request.

More recipes

Ad variants at scale Real estate listings Product sales and drops