Shapes and graphics

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"
  }
}

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: "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 kinds 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 features

    Shape gradient Two colours instead of one makes the fill a gradient, running the way `gradient` names. Shape outline Leave the fill out and only the stroke draws, so what it surrounds is genuinely transparent and the footage shows through. Shape radius Rounds a rect's corners, 0 square through to 1 fully round, which is a pill on a wide box. Shape softness Feathers the edge instead of cutting it, which is how a soft spotlight or a vignette is made rather than a hard-edged block. Shape shadow A shadow behind the shape, so a card or a bar lifts off the footage instead of sitting flat on it. SVG path SVG path data straight out of a design tool, drawn as a clip. The viewBox is the space the path was written in.

    See all 117 features →