Subtitles element

Renders captions. With `source: "auto"` the cues and word timings derive from the scene's voice elements; you can also supply explicit cues.

Renders captions. With source: "auto" the cues and word timings derive from the scene's voice elements; you can also supply explicit cues.

Properties

Property	Type	Default	Description
`id` *	string (non-empty)	—	Stable identifier, unique across the whole movie. Used by editor selection sync and error paths.
`start`	number (≥ 0)	`0`	When the element appears, in seconds relative to its scene (or to the movie for movie-level elements).
`duration`	number (> 0)	—	How long the element is active, in seconds. Defaults to the remainder of its scene.
`type` *	"subtitles"	—	Timed subtitles.
`source`	"auto" \| object	`"auto"`	Where cues come from: "auto" (derived from voice elements) or an explicit cue list.
`font`	"Inter" \| "Roboto" \| "Open Sans" \| "Montserrat" \| "Poppins" \| "Lato" \| "Oswald" \| "Raleway" \| "Nunito" \| "Work Sans" \| "DM Sans" \| "Space Grotesk" \| "Source Sans 3" \| "Merriweather" \| "Playfair Display" \| "Lora" \| "Bebas Neue" \| "Anton" \| "Pacifico" \| "Caveat"	`"Inter"`	Font family from the curated Google Fonts set bundled with the renderer.
`fontSize`	number (> 0)	`48`	Subtitle font size in output pixels.
`color`	string (non-empty)	`"#ffffff"`	Subtitle text color.
`highlightColor`	string (non-empty)	`"#facc15"`	Color of the currently spoken word in "word" mode.
`position`	"top-left" \| "top-center" \| "top-right" \| "center-left" \| "center" \| "center-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"	`"bottom-center"`	Anchor where the subtitles are rendered.
`mode`	"word" \| "line"	`"word"`	Display mode: "word" highlights each word as it is spoken; "line" shows whole lines.

`source` object

An explicit list of subtitle cues.

Property	Type	Default	Description
`cues` *	object[]	—	Explicit subtitle cues, in order.

Example

Subtitles: automatic word-timed captions from the voiceover:

movie.json

{
  "schema": "v1",
  "preset": "9:16",
  "scenes": [
    {
      "id": "captioned",
      "duration": "voice",
      "background": "#0c0a09",
      "elements": [
        {
          "id": "captioned-voice",
          "type": "voice",
          "text": "Auto subtitles are timed word by word from the generated speech.",
          "voiceId": "Matthew",
          "language": "en-US"
        },
        {
          "id": "captioned-subs",
          "type": "subtitles",
          "source": "auto",
          "font": "Inter",
          "fontSize": 52,
          "color": "#ffffff",
          "highlightColor": "#facc15",
          "position": "bottom-center",
          "mode": "word"
        }
      ]
    }
  ]
}

▶ Try it in the playground

Properties

source object

Example

On this page

`source` object