Text and titles

Animate a title word by word

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.

Shown on A title over a city skyline at night

Renders up to 1080p at 30 fps on every self-serve plan.

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": "AFTER DARK",
    "style": {
      "font": "Inter",
      "size": 58,
      "weight": 800,
      "color": "#FFFFFF",
      "animate": {
        "type": "slideUp",
        "by": "word",
        "duration": 1.1
      }
    }
  },
  "transform": {
    "position": {
      "x": "50%",
      "y": "46%"
    }
  }
}

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/city.mp4"
              },
              start: 0
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "text",
                text: "AFTER DARK",
                style: {
                  font: "Inter",
                  size: 58,
                  weight: 800,
                  color: "#FFFFFF",
                  animate: {
                    type: "slideUp",
                    by: "word",
                    duration: 1.1
                  }
                }
              },
              start: 0,
              length: 6,
              transform: {
                position: {
                  x: "50%",
                  y: "46%"
                }
              }
            }
          ]
        }
      ]
    }
  },
});


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/city.mp4"},"start":0}]},{"clips":[{"asset":{"type":"text","text":"AFTER DARK","style":{"font":"Inter","size":58,"weight":800,"color":"#FFFFFF","animate":{"type":"slideUp","by":"word","duration":1.1}}},"start":0,"length":6,"transform":{"position":{"x":"50%","y":"46%"}}}]}]}}}'

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

Questions

What does the kinetic text clip do in compose?

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.

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

Send a compose job to the Rendobar API with this entry in the timeline: {"asset":{"type":"text","text":"AFTER DARK","style":{"font":"Inter","size":58,"weight":800,"color":"#FFFFFF","animate":{"type":"slideUp","by":"word","duration":1.1}}},"transform":{"position":{"x":"50%","y":"46%"}}}. 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 stroke 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. 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.

See all 117 features →