Dim Progress

The whole phrase sits on screen dimmed and each word brightens the moment it is spoken, with no motion at all

Installation

$ pnpm dlx shadcn@latest add @remocn/caption-dim-progress

Usage

CaptionDimProgress shows the whole page at once with every upcoming word dimmed. As the voice reaches a word it brightens to full strength and stays there, so the bright part of the line is always what has been said. Nothing moves and nothing changes colour, which keeps the captions calm over busy footage. The component renders only the text block, so place it inside your own AbsoluteFill — see Positioning.

tsx

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

Props9

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`.
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.
dimOpacity	number0.35 Opacity of words the voice has not reached yet. Each word brightens to full over about 90ms as it is spoken.
fontSize	number64 Font size in pixels.
fontWeight	number800 Font weight. The font itself is inherited.
color	string"#ffffff" Text colour, the same for spoken and upcoming words.
shadow	booleantrue A tight text shadow that keeps the caption legible over bright footage.
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—
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.
Default600
dimOpacitynumber
Opacity of words the voice has not reached yet. Each word brightens to full over about 90ms as it is spoken.
Default0.35
fontSizenumber
Font size in pixels.
Default64
fontWeightnumber
Font weight. The font itself is inherited.
Default800
colorstring
Text colour, the same for spoken and upcoming words.
Default"#ffffff"
shadowboolean
A tight text shadow that keeps the caption legible over bright footage.
Defaulttrue
classNamestring
Classes for the text block — width, font family, `uppercase`.
Default—