Active Pop

The word being spoken turns to the accent colour and springs up in scale, then settles back as the voice moves on

Installation

$ pnpm dlx shadcn@latest add @remocn/caption-active-pop

Usage

CaptionActivePop shows the whole page in the base colour. The word being spoken switches to activeColor and springs up to popScale, then eases back down and returns to the base colour once the next word takes over. The scale is a transform, so the neighbouring words never shift.

It renders only the text block, so place it inside your own AbsoluteFill. See Positioning for safe placements and Get a transcript for producing captions.json.

tsx

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

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`.
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" Colour of every word that is not being spoken.
activeColor	string"#facc15" Colour of the word being spoken.
popScale	number1.12 How large the spoken word grows. Keep it modest — past about 1.25 the word starts to crowd its neighbours.
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 instead of hanging through the pause.
Default600
fontSizenumber
Font size in pixels.
Default64
fontWeightnumber
Font weight. The font itself is inherited.
Default800
colorstring
Colour of every word that is not being spoken.
Default"#ffffff"
activeColorstring
Colour of the word being spoken.
Default"#facc15"
popScalenumber
How large the spoken word grows. Keep it modest — past about 1.25 the word starts to crowd its neighbours.
Default1.12
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—