Outline

Heavy-stroked captions that stay readable over any footage, with the spoken word switching to a contrast colour and nothing else moving

Installation

$ pnpm dlx shadcn@latest add @remocn/caption-outline

Usage

CaptionOutline takes a timed transcript and renders only the text block, so place it inside your own AbsoluteFill. Every letter carries a heavy stroke painted under its fill, and the word being spoken switches to activeColor. Nothing scales or moves inside the page, which keeps the line rock-steady for reading. See Positioning for safe placements and Get a transcript for producing captions.json.

import { AbsoluteFill } from "remotion";
import { CaptionOutline } from "@/components/remocn/caption-outline";
import captions from "./captions.json";
 
export const MyScene = () => (
  <AbsoluteFill
    style={{
      justifyContent: "flex-end",
      alignItems: "center",
      paddingBottom: 108,
      paddingInline: 192,
    }}
  >
    <CaptionOutline captions={captions} />
  </AbsoluteFill>
);

The look is at its strongest in caps with a heavy display face. Load one with @remotion/google-fonts and pass className="uppercase" along with it.

import { loadFont } from "@remotion/google-fonts/Anton";
 
const { fontFamily } = loadFont();
 
export const Caps = () => (
  <div style={{ fontFamily }}>
    <CaptionOutline captions={captions} className="uppercase" fontWeight={400} />
  </div>
);

Props

Prop	Type	Default	Description
`captions`	`Caption[]`	`—`	The timed transcript, in the `Caption` shape from `@remotion/captions`. Times are relative to the start of the surrounding `Sequence`.
`activeColor`	`string`	`"#facc15"`	Fill colour of the word being spoken.
`strokeColor`	`string`	`"#000000"`	Colour of the outline around every letter.
`strokeWidth`	`number`	`0.12`	How far the outline reaches outside each letter, in em. The stroke is painted under the fill, so it never eats into the letterforms.
`combineTokensWithinMilliseconds`	`number`	`1200`	How much speech one page may span before the next word starts a new page. Pages also break at the end of a sentence and on any pause of at least `holdMs` (300 ms minimum).
`holdMs`	`number`	`600`	How long a page stays after its last word when the next page is not already due. It fades out at the end of the hold instead of hanging through the pause.
`fontSize`	`number`	`64`	Font size in pixels.
`fontWeight`	`number`	`800`	Font weight. The font itself is inherited.
`color`	`string`	`"#ffffff"`	Fill colour of words that are not being spoken.
`className`	`string`	`—`	Classes for the text block — width, font family, `uppercase`.

Weight

The word being spoken swells from a light weight to a heavy one and relaxes as the voice moves on, with no layout shift

Prosody

Word size follows the delivery, so drawn-out words land large and rushed words stay small, and the rhythm of the voice is visible with the sound off