Compose: render from a timeline

An illustrated story rendered by Compose from the request below: each drawing sketches itself in, then fills with colour, under its caption.

The request that made it

{
  "schemaVersion": 1,
  "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
          }
        ]
      }
    ]
  }
}

The same request, built up step by step, is the illustrated story recipe. compose renders a video from a JSON timeline. You start with one clip and add more clips, transitions, overlays and effects as you need them.

Your simplest render

The smallest timeline is one track with one clip. This call renders the first three seconds of a video to MP4.

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

const client = createClient({ apiKey: "rb_YOUR_KEY" });

// run() creates the job and waits for it to finish.
const job = await client.jobs.run({
  type: "compose",
  params: {
    schemaVersion: 1,
    output: {
      format: "mp4",
      resolution: { width: 1080, height: 1920 },
      fps: 30,
    },
    timeline: {
      tracks: [
        {
          clips: [
            {
              asset: {
                type: "video",
                src: "https://cdn.rendobar.com/assets/examples/sea.mp4",
              },
              start: 0,
              length: 3,
            },
          ],
        },
      ],
    },
  },
});

console.log(outputUrl(job));

import requests

res = requests.post(
    "https://api.rendobar.com/jobs",
    headers={"Authorization": "Bearer rb_YOUR_KEY"},
    json={
        "type": "compose",
        "params": {
            "schemaVersion": 1,
            "output": {
                "format": "mp4",
                "resolution": {"width": 1080, "height": 1920},
                "fps": 30,
            },
            "timeline": {
                "tracks": [
                    {
                        "clips": [
                            {
                                "asset": {
                                    "type": "video",
                                    "src": "https://cdn.rendobar.com/assets/examples/sea.mp4",
                                },
                                "start": 0,
                                "length": 3,
                            }
                        ]
                    }
                ]
            },
        },
    },
)

curl -X POST https://api.rendobar.com/jobs \
  -H "Authorization: Bearer rb_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "compose",
    "params": {
      "schemaVersion": 1,
      "output": {
        "format": "mp4",
        "resolution": { "width": 1080, "height": 1920 },
        "fps": 30
      },
      "timeline": {
        "tracks": [
          {
            "clips": [
              {
                "asset": {
                  "type": "video",
                  "src": "https://cdn.rendobar.com/assets/examples/sea.mp4"
                },
                "start": 0,
                "length": 3
              }
            ]
          }
        ]
      }
    }
  }'

Assets: video, image, audio, text, timer, subtitles, shape, animation (Lottie), composition · Output: mp4 / webm / gif / mp3 (audio only) / jpg / png (still frame)

Without trim, a clip plays its source from the start for length seconds. Leave length off and it plays the whole source. To play one segment, add trim: { from, to } to the asset, in source seconds. length sets how long the clip lasts on the timeline, and trim picks which part of the source fills that time.

Join two clips

Put a second clip on the same track and a transition between them.

"clips": [
  { "asset": { "type": "video", "src": "https://cdn.rendobar.com/assets/examples/river.mp4" } },
  { "type": "transition", "transition": "crossfade", "duration": 1 },
  { "asset": { "type": "video", "src": "https://cdn.rendobar.com/assets/examples/forest.mp4" } }
]

You set no timing here. Each clip plays its whole source, the second starts after the first, and the transition overlaps them by its duration. You do not need to know how long either file is. You can also write the timing out. This gives the same render, with the second clip starting duration seconds before the first ends.

"clips": [
  { "asset": { "type": "video", "src": "https://cdn.rendobar.com/assets/examples/river.mp4" }, "start": 0, "length": 3 },
  { "type": "transition", "transition": "crossfade", "duration": 1 },
  { "asset": { "type": "video", "src": "https://cdn.rendobar.com/assets/examples/forest.mp4" }, "start": 2, "length": 3 }
]

See Transitions for the seven transition kinds, wipe shapes, directions and your own wipe patterns.

Everything else

How the timeline works

Tracks, clips, scenes, and when you can leave timing out.

Media clips

Video, images, audio and Lottie, with trim, speed, opacity and blend modes.

Placing and framing a clip

Position, scale, rotate, crop, fit and pin a clip, each shown before and after.

Text and titles

Readable titles, entrances and exits, and kinetic titles a word at a time.

Subtitles and timers

Every caption in one clip, from cues or an .srt file, and countdowns.

Fonts and languages

Google fonts by name, bundled families, your own files, and other scripts.

Shapes

Bars, cards, circles and SVG paths, with gradients, outlines and shadows.

Keyframes and easing

Animate anything numeric with 33 easings, and turn clips in 3D.

Transitions

Crossfade, fade, slide, push, wipe and zoom, and your own wipe patterns.

Effects

Colour, looks, stylised filters, keying and every other filter by name.

Audio and mixing

Levels, ducking, panning, the mix, voice clean-up and audiograms.

Output

Formats, size presets, frame rate, quality and transparent video.

Pricing and validation

One price per minute of output, and a free check before you render.

Edit like a professional

The pacing, transition and text conventions working editors follow.

Reference

Every field, generated from the schema the API validates with.

Getting Started

Concepts

Storage

Jobs

Automation

Developer tools

Support

Compose: render from a timeline

Your simplest render

Join two clips

Everything else

How the timeline works

Media clips

Placing and framing a clip

Text and titles

Subtitles and timers

Fonts and languages

Shapes

Keyframes and easing

Transitions

Effects

Audio and mixing

Output

Pricing and validation

Edit like a professional

Reference

See also

​Your simplest render

​Join two clips

​Everything else

How the timeline works

Media clips

Placing and framing a clip

Text and titles

Subtitles and timers

Fonts and languages

Shapes

Keyframes and easing

Transitions

Effects

Audio and mixing

Output

Pricing and validation

Edit like a professional

Reference

​See also

Your simplest render

Join two clips

Everything else

See also