Media and clips

Lottie animation in a video timeline

A Lottie lower third that sweeps in over the footage, with the words on it set as a compose text clip.

Shown on A drone shot of a coast

After · rendered from the request below

The entry

Use it as a clip's asset, on a track above the footage.

{
  "asset": {
    "type": "animation",
    "src": "https://cdn.rendobar.com/compose/showcase/media/lower-third.json"
  }
}

Every setting and default is in the docs

Run it

The whole request behind the render above. Paste it as it is, or swap the file for your own.

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: {
    schemaVersion: 1,
    output: {
      format: "mp4",
      resolution: {
        width: 960,
        height: 540
      }
    },
    timeline: {
      tracks: [
        {
          clips: [
            {
              asset: {
                type: "video",
                src: "https://cdn.rendobar.com/compose/showcase/media/coast-b.mp4"
              },
              start: 0
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "animation",
                src: "https://cdn.rendobar.com/compose/showcase/media/lower-third.json"
              }
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "text",
                text: "Through the sea stacks",
                style: {
                  font: "Inter",
                  size: 28,
                  weight: 700,
                  color: "#FFFFFF",
                  align: "left"
                }
              },
              start: 0.6,
              length: 3.6,
              transform: {
                position: {
                  x: "15%",
                  y: "84.7%"
                }
              }
            }
          ]
        }
      ]
    }
  },
});


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":{"schemaVersion":1,"output":{"format":"mp4","resolution":{"width":960,"height":540}},"timeline":{"tracks":[{"clips":[{"asset":{"type":"video","src":"https://cdn.rendobar.com/compose/showcase/media/coast-b.mp4"},"start":0}]},{"clips":[{"asset":{"type":"animation","src":"https://cdn.rendobar.com/compose/showcase/media/lower-third.json"}}]},{"clips":[{"asset":{"type":"text","text":"Through the sea stacks","style":{"font":"Inter","size":28,"weight":700,"color":"#FFFFFF","align":"left"}},"start":0.6,"length":3.6,"transform":{"position":{"x":"15%","y":"84.7%"}}}]}]}}}'

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

Questions

What does the lottie animation clip do in compose?

A Lottie lower third that sweeps in over the footage, with the words on it set as a compose text clip.

How do I add lottie animation to a video with an API?

Send a compose job to the Rendobar API with this entry in the timeline: {"asset":{"type":"animation","src":"https://cdn.rendobar.com/compose/showcase/media/lower-third.json"}}. Use it as a clip's asset, on a track above the footage. The request on this page is complete and renders as shown.

Footage and sound

More features

Keyframes A Ken Burns push on a still photo. The box scales from 1 to 1.15 across the clip, eased in and out, so a photograph becomes a shot. Speed Play the source faster or slower. 2 is double speed, and the clip lasts half as long. Opacity How solid the clip is, 1 to 0. Keyframes on it are how a clip fades in or out. Color A warm cinematic grade: the light pulled towards gold, contrast and color lifted a little, skin left believable. LUT A film grade from a LUT file: shadows toward teal, skin and highlights toward orange, the look a colourist hands over as a .cube. Looks The whole archive look in one word: sepia, grain, dust, scratches, projector flicker and a vignette together.

See all 117 features →