Text and titles

Outline text so it stays readable

An outline round the glyphs. White text over a bright sea is hard to read without one, and a 4 to 6 pixel dark stroke fixes it.

Shown on A title over a drone shot of a bright coast

Before · the same request without it
After · rendered from the request below

The entry

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

{
  "asset": {
    "type": "text",
    "text": "OPEN WATER",
    "style": {
      "font": "Inter",
      "size": 58,
      "weight": 800,
      "color": "#FFFFFF",
      "stroke": {
        "color": "#0B0F0D",
        "width": 5
      }
    }
  },
  "transform": {
    "position": {
      "x": "50%",
      "y": "66%"
    }
  }
}

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-a.mp4"
              },
              start: 0
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "text",
                text: "OPEN WATER",
                style: {
                  font: "Inter",
                  size: 58,
                  weight: 800,
                  color: "#FFFFFF",
                  stroke: {
                    color: "#0B0F0D",
                    width: 5
                  }
                }
              },
              start: 0,
              length: 6,
              transform: {
                position: {
                  x: "50%",
                  y: "66%"
                }
              }
            }
          ]
        }
      ]
    }
  },
});


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-a.mp4"},"start":0}]},{"clips":[{"asset":{"type":"text","text":"OPEN WATER","style":{"font":"Inter","size":58,"weight":800,"color":"#FFFFFF","stroke":{"color":"#0B0F0D","width":5}}},"start":0,"length":6,"transform":{"position":{"x":"50%","y":"66%"}}}]}]}}}'

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

Questions

What does the text stroke clip do in compose?

An outline round the glyphs. White text over a bright sea is hard to read without one, and a 4 to 6 pixel dark stroke fixes it.

How do I add text stroke to a video with an API?

Send a compose job to the Rendobar API with this entry in the timeline: {"asset":{"type":"text","text":"OPEN WATER","style":{"font":"Inter","size":58,"weight":800,"color":"#FFFFFF","stroke":{"color":"#0B0F0D","width":5}}},"transform":{"position":{"x":"50%","y":"66%"}}}. 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

Fonts One text clip per script. A display family for the headline, and the bundled fallbacks carrying Arabic and Devanagari without a single font file uploaded. 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. Kinetic text A title that arrives a word at a time. It splits into letters, words or lines, with a stagger and an order setting the rhythm.

See all 117 features →