Text Examples

Each example is a complete POST /v1/renders body with a video background and a text overlay. Only fields that differ from their defaults are shown (font_family: "Inter", text_color: "#ffffff", text_align: "center" are all defaults). See the element field reference for every default.

duration is required on text elements. Omitting it produces a zero-length window — the text will not appear in the render. The API returns 422 if duration is missing.

Every text overlay sets three groups of fields:

Field	Purpose
`time`, `duration`	When the text appears and disappears (`time + duration` = hide)
`x`, `y`	Position on the frame — percentage strings (`"50%"`) or pixel values (`960`)
`width`	Optional wrap width (defaults to `"100%"`)

x and y refer to the center anchor of the text box.

Minimal text

The required fields on a text element are text and duration. Centered on frame; visible from 1 s to 5 s.

{
  "width": 1920,
  "height": 1080,
  "duration": 10,
  "elements": [
    {
      "type": "video",
      "id": "vid1",
      "source_url": "https://cdn.example.com/clip.mp4",
      "time": 0,
      "in_point": 0,
      "out_point": 10
    },
    {
      "type": "text",
      "id": "t1",
      "text": "Hello World",
      "font_size": 72,
      "time": 1,
      "duration": 4,
      "x": "50%",
      "y": "50%"
    }
  ]
}

Stroke (outline only, no fill)

Glyph outline with no fill — set stroke: true together with stroke_color and stroke_width. Top-center; visible from 0.5 s to 4.5 s.

{
  "width": 1920,
  "height": 1080,
  "duration": 10,
  "elements": [
    {
      "type": "video",
      "id": "vid1",
      "source_url": "https://cdn.example.com/clip.mp4",
      "time": 0,
      "in_point": 0,
      "out_point": 10
    },
    {
      "type": "text",
      "id": "t1",
      "text": "OUTLINE",
      "font_size": 96,
      "time": 0.5,
      "duration": 4,
      "x": "50%",
      "y": "15%",
      "stroke_color": "#0070f3",
      "stroke_width": 4,
      "stroke": true
    }
  ]
}

Fill + stroke

White text with a colored stroke and fill — set stroke_color and stroke_width without stroke: true. Lower-third; visible from 2 s to 7 s.

{
  "width": 1920,
  "height": 1080,
  "duration": 10,
  "elements": [
    {
      "type": "video",
      "id": "vid1",
      "source_url": "https://cdn.example.com/clip.mp4",
      "time": 0,
      "in_point": 0,
      "out_point": 10
    },
    {
      "type": "text",
      "id": "t1",
      "text": "FILL + STROKE",
      "font_size": 96,
      "time": 2,
      "duration": 5,
      "x": "50%",
      "y": "80%",
      "stroke_color": "#00ff41",
      "stroke_width": 4
    }
  ]
}

Background

Solid color box behind the full text block. Bottom-center; visible from 1 s to 5 s.

{
  "width": 1920,
  "height": 1080,
  "duration": 10,
  "elements": [
    {
      "type": "video",
      "id": "vid1",
      "source_url": "https://cdn.example.com/clip.mp4",
      "time": 0,
      "in_point": 0,
      "out_point": 10
    },
    {
      "type": "text",
      "id": "t1",
      "text": "BACKGROUND",
      "font_size": 72,
      "time": 1,
      "duration": 4,
      "x": "50%",
      "y": "75%",
      "background_color": "#0070f3",
      "background": true
    }
  ]
}

Drop shadow

Text with a built-in drop shadow. Upper-center; visible from 0.5 s to 5.5 s.

{
  "width": 1920,
  "height": 1080,
  "duration": 10,
  "elements": [
    {
      "type": "video",
      "id": "vid1",
      "source_url": "https://cdn.example.com/clip.mp4",
      "time": 0,
      "in_point": 0,
      "out_point": 10
    },
    {
      "type": "text",
      "id": "t1",
      "text": "SHADOW",
      "font_size": 96,
      "time": 0.5,
      "duration": 5,
      "x": "50%",
      "y": "40%",
      "shadow": true
    }
  ]
}

Font controls

Bold italic with custom letter spacing and line height. Left-aligned block on the left edge; visible from 2 s to 8 s.

{
  "width": 1920,
  "height": 1080,
  "duration": 10,
  "elements": [
    {
      "type": "video",
      "id": "vid1",
      "source_url": "https://cdn.example.com/clip.mp4",
      "time": 0,
      "in_point": 0,
      "out_point": 10
    },
    {
      "type": "text",
      "id": "t1",
      "text": "Typography",
      "font_family": "Montserrat",
      "font_size": 64,
      "font_weight": 700,
      "font_style": "bolditalic",
      "tracking": 0.05,
      "leading": 1.4,
      "time": 2,
      "duration": 6,
      "x": "12%",
      "y": "50%",
      "width": "40%",
      "text_align": "left"
    }
  ]
}

Stroke

Custom outline around each glyph. Both stroke_color and stroke_width must be set. Slightly below center; visible from 1 s to 4 s.

{
  "width": 1920,
  "height": 1080,
  "duration": 10,
  "elements": [
    {
      "type": "video",
      "id": "vid1",
      "source_url": "https://cdn.example.com/clip.mp4",
      "time": 0,
      "in_point": 0,
      "out_point": 10
    },
    {
      "type": "text",
      "id": "t1",
      "text": "STROKE",
      "font_size": 96,
      "time": 1,
      "duration": 3,
      "x": "50%",
      "y": "55%",
      "stroke_color": "#ff0000",
      "stroke_width": 4
    }
  ]
}

Rotation

Tilted text using z_rotation. Offset to the lower-left; visible from 3 s to 8 s.

{
  "width": 1920,
  "height": 1080,
  "duration": 10,
  "elements": [
    {
      "type": "video",
      "id": "vid1",
      "source_url": "https://cdn.example.com/clip.mp4",
      "time": 0,
      "in_point": 0,
      "out_point": 10
    },
    {
      "type": "text",
      "id": "t1",
      "text": "TILTED",
      "font_size": 72,
      "time": 3,
      "duration": 5,
      "x": "30%",
      "y": "70%",
      "z_rotation": "-5°"
    }
  ]
}

Shorthand animation preset

Use the animation_preset string for renderer animation presets like typewriter. Bottom-center caption bar; visible from 0 s to 6 s.

{
  "width": 1920,
  "height": 1080,
  "duration": 10,
  "elements": [
    {
      "type": "video",
      "id": "vid1",
      "source_url": "https://cdn.example.com/clip.mp4",
      "time": 0,
      "in_point": 0,
      "out_point": 10
    },
    {
      "type": "text",
      "id": "t1",
      "text": "Lorem Ipsum",
      "font_family": "IBM Plex Mono",
      "font_size": 48,
      "time": 0,
      "duration": 6,
      "x": "50%",
      "y": "85%",
      "width": "80%",
      "text_color": "#00ff41",
      "stroke_color": "#00ff41",
      "stroke_width": 3,
      "animation_preset": "typewriter"
    }
  ]
}

Get Started

Renders

Render Examples

Recipes

Tasks

Webhooks

SDKs

Minimal text

Stroke (outline only, no fill)

Fill + stroke

Background

Drop shadow

Font controls

Stroke

Rotation

Shorthand animation preset

​Minimal text

​Stroke (outline only, no fill)

​Fill + stroke

​Background

​Drop shadow

​Font controls

​Stroke

​Rotation

​Shorthand animation preset

Minimal text

Stroke (outline only, no fill)

Fill + stroke

Background

Drop shadow

Font controls

Stroke

Rotation

Shorthand animation preset