Clips

Draw rectangles, circles and more

The kinds a shape can be. A circle takes one side of its box so it stays round on any frame, and a triangle points down until you turn it.

Shown on Five shapes on a studio backdrop

After · rendered from the request below

The entry

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

{
  "asset": {
    "type": "shape",
    "shape": "circle",
    "color": "#34D399"
  }
}

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: "shape",
                shape: "rect",
                color: [
                  "#1B2A26",
                  "#070D0B"
                ],
                gradient: "radial"
              },
              start: 0,
              length: 6
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "shape",
                shape: "rect",
                color: "#34D399"
              },
              transform: {
                size: {
                  width: "15%",
                  height: "16%"
                },
                position: {
                  x: "14%",
                  y: "50%"
                }
              },
              start: 0,
              length: 6
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "shape",
                shape: "ellipse",
                color: "#34D399"
              },
              transform: {
                size: {
                  width: "15%",
                  height: "16%"
                },
                position: {
                  x: "32%",
                  y: "50%"
                }
              },
              start: 0,
              length: 6
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "shape",
                shape: "circle",
                color: "#34D399"
              },
              transform: {
                size: {
                  width: "11%"
                },
                position: {
                  x: "50%",
                  y: "50%"
                }
              },
              start: 0,
              length: 6
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "shape",
                shape: "triangle",
                color: "#34D399"
              },
              transform: {
                size: {
                  width: "15%",
                  height: "16%"
                },
                position: {
                  x: "68%",
                  y: "50%"
                }
              },
              start: 0,
              length: 6
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "shape",
                shape: "diamond",
                color: "#34D399"
              },
              transform: {
                size: {
                  width: "15%",
                  height: "16%"
                },
                position: {
                  x: "86%",
                  y: "50%"
                }
              },
              start: 0,
              length: 6
            }
          ]
        }
      ]
    }
  },
});


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":"shape","shape":"rect","color":["#1B2A26","#070D0B"],"gradient":"radial"},"start":0,"length":6}]},{"clips":[{"asset":{"type":"shape","shape":"rect","color":"#34D399"},"transform":{"size":{"width":"15%","height":"16%"},"position":{"x":"14%","y":"50%"}},"start":0,"length":6}]},{"clips":[{"asset":{"type":"shape","shape":"ellipse","color":"#34D399"},"transform":{"size":{"width":"15%","height":"16%"},"position":{"x":"32%","y":"50%"}},"start":0,"length":6}]},{"clips":[{"asset":{"type":"shape","shape":"circle","color":"#34D399"},"transform":{"size":{"width":"11%"},"position":{"x":"50%","y":"50%"}},"start":0,"length":6}]},{"clips":[{"asset":{"type":"shape","shape":"triangle","color":"#34D399"},"transform":{"size":{"width":"15%","height":"16%"},"position":{"x":"68%","y":"50%"}},"start":0,"length":6}]},{"clips":[{"asset":{"type":"shape","shape":"diamond","color":"#34D399"},"transform":{"size":{"width":"15%","height":"16%"},"position":{"x":"86%","y":"50%"}},"start":0,"length":6}]}]}}}'

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

Questions

What does the shape clip do in compose?

The kinds a shape can be. A circle takes one side of its box so it stays round on any frame, and a triangle points down until you turn it.

How do I add shape kinds to a video with an API?

Send a compose job to the Rendobar API with this entry in the timeline: {"asset":{"type":"shape","shape":"circle","color":"#34D399"}}. 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 in the reference

    Text stroke An outline round the glyphs. White text over bright water is unreadable without one, and a 4 to 6 pixel black stroke fixes it. Text shadow A shadow behind the text. Softer than a stroke, and enough on footage that is not fighting the text. Text background A solid box behind the text. The most readable of the three, and the one that reads as a caption rather than a title. Text align Which way the lines line up, and which edge of the text sits on the clip's position. left starts there, right ends there. Text entrance An entrance. The title slides up into place while it fades in, instead of simply being there. Shape gradient Two colours instead of one makes the fill a gradient, running the way `gradient` names.

    See all 77 in the effects reference →