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.

tsx

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.

tsx

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

Props10

Prop	Type	Default
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	number0.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	number1200 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	number600 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	number64 Font size in pixels.
fontWeight	number800 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`.

captionsCaption[]
The timed transcript, in the `Caption` shape from `@remotion/captions`. Times are relative to the start of the surrounding `Sequence`.
Default—
activeColorstring
Fill colour of the word being spoken.
Default"#facc15"
strokeColorstring
Colour of the outline around every letter.
Default"#000000"
strokeWidthnumber
How far the outline reaches outside each letter, in em. The stroke is painted under the fill, so it never eats into the letterforms.
Default0.12
combineTokensWithinMillisecondsnumber
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).
Default1200
holdMsnumber
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.
Default600
fontSizenumber
Font size in pixels.
Default64
fontWeightnumber
Font weight. The font itself is inherited.
Default800
colorstring
Fill colour of words that are not being spoken.
Default"#ffffff"
classNamestring
Classes for the text block — width, font family, `uppercase`.
Default—