Captions layers
Captions render animated subtitles with optional word-by-word highlighting. Feed them a WhisperX-style JSON array, an SRT string, a VTT string, or a URL to any of the above.
On this page
const $ = new VideoFlow({ width: 512, height: 512, fps: 30, backgroundColor: '#000' });
const captions = $.addCaptions(
{
fontSize: 9,
fontWeight: 800,
color: '#ffffff',
position: [0.5, 0.5],
textAlign: 'center',
},
{
captions: [
{ caption: 'VideoFlow', startTime: 0.0, endTime: 1.2 },
{ caption: 'renders', startTime: 1.3, endTime: 2.2 },
{ caption: 'beautiful captions.', startTime: 2.3, endTime: 3.5 },
],
maxCharsPerLine: 24,
maxLines: 2,
},
);
$.wait('3.5s');
captions.remove();
return $;Input shape
// Pass typography in properties; timed entries in settings.captions
$.addCaptions(
{
fontSize: 2,
fontWeight: 600,
color: '#ffffff',
position: [0.5, 0.85],
textAlign: 'center',
},
{
captions: [
{ caption: 'Hello world.', startTime: 0, endTime: 1.5 },
{ caption: 'Built from JSON.', startTime: 1.5, endTime: 3.0 },
],
maxCharsPerLine: 40,
maxLines: 2,
},
);Properties
| Prop | Default | Notes |
|---|---|---|
captions (setting) | — | Array of { caption, startTime, endTime }. |
fontSize / fontWeight / fontFamily / color | Same as text layer. | |
backgroundColor / padding / borderRadius | Per-line pill. | |
position | [0.5, 0.85] | Bottom-centre by default. |
maxCharsPerLine (setting) | 40 | Line-break hint. |
maxLines (setting) | 2 | — |