Skip to main content

createTikTokStyleCaptions()v4.0.216

Using this function, you can segment tokens to create "pages" of captions, as commonly seen on TikTok videos.

You may specify how often pages switch. A high value for combineTokensWithinMilliseconds will fit many words on 1 page, while a low value will lead to word-by-word animation.

This function is safe to use in the browser, Node.js and Bun.

Create pages from captions
tsx
import {createTikTokStyleCaptions, Caption} from '@remotion/captions';
 
const captions: Caption[] = [
  {
    text: 'Using',
    startMs: 40,
    endMs: 300,
    timestampMs: 200,
    confidence: null,
  },
  {
    text: " Remotion's",
    startMs: 300,
    endMs: 900,
    timestampMs: 440,
    confidence: null,
  },
  {
    text: ' TikTok',
    startMs: 900,
    endMs: 1260,
    timestampMs: 1080,
    confidence: null,
  },
  {
    text: ' template,',
    startMs: 1260,
    endMs: 1950,
    timestampMs: 1600,
    confidence: null,
  },
];
 
const {pages} = createTikTokStyleCaptions({
  captions,
  combineTokensWithinMilliseconds: 1200,
});
 
/* pages: [
  {
    text: "Using Remotion's",
    startMs: 40,
    tokens: [
      {
        text: 'Using',
        fromMs: 40,
        toMs: 300,
      },
      {
        text: " Remotion's",
        fromMs: 300,
        toMs: 900,
      },
    ],
  },
  {
    text: 'TikTok template,',
    startMs: 900,
    tokens: [
      {
        text: 'TikTok',
        fromMs: 900,
        toMs: 1260,
      },
      {
        text: ' template,',
        fromMs: 1260,
        toMs: 1950,
      },
    ],
  }
] */
Create pages from captions
tsx
import {createTikTokStyleCaptions, Caption} from '@remotion/captions';
 
const captions: Caption[] = [
  {
    text: 'Using',
    startMs: 40,
    endMs: 300,
    timestampMs: 200,
    confidence: null,
  },
  {
    text: " Remotion's",
    startMs: 300,
    endMs: 900,
    timestampMs: 440,
    confidence: null,
  },
  {
    text: ' TikTok',
    startMs: 900,
    endMs: 1260,
    timestampMs: 1080,
    confidence: null,
  },
  {
    text: ' template,',
    startMs: 1260,
    endMs: 1950,
    timestampMs: 1600,
    confidence: null,
  },
];
 
const {pages} = createTikTokStyleCaptions({
  captions,
  combineTokensWithinMilliseconds: 1200,
});
 
/* pages: [
  {
    text: "Using Remotion's",
    startMs: 40,
    tokens: [
      {
        text: 'Using',
        fromMs: 40,
        toMs: 300,
      },
      {
        text: " Remotion's",
        fromMs: 300,
        toMs: 900,
      },
    ],
  },
  {
    text: 'TikTok template,',
    startMs: 900,
    tokens: [
      {
        text: 'TikTok',
        fromMs: 900,
        toMs: 1260,
      },
      {
        text: ' template,',
        fromMs: 1260,
        toMs: 1950,
      },
    ],
  }
] */

API​

captions​

An array of Caption objects.

combineTokensWithinMilliseconds​

Words that are closer than this value will be combined into a single page.

Return value​

An object with the following properties:

pages​

An array of TikTokPage objects.

A page consists of:

  • text: The text of the page.
  • startMs: The start time of the page in milliseconds.
  • tokens: An array of objects, if you want to animate word-per-word:
    • text: The text of the token.
    • fromMs: The absolute start time of the token in milliseconds.
    • toMs: The absolute end time of the token in milliseconds.

Whitespace sensitivity​

The text field is white-space sensitive. You should include spaces in it, as none are added automatically.
While rendering, apply the white-space: pre CSS property to the container of the caption to ensure that the spaces are preserved.

See also​