Bounce In

Each word springs up into place with a little overshoot the moment it is spoken, and the phrase builds word by word

Installation

$ pnpm dlx shadcn@latest add @remocn/caption-bounce-in

Usage

CaptionBounceIn takes a timed transcript and renders only the text block, so place it inside your own AbsoluteFill. Every word stays hidden until its own start time, then springs up from just below its slot. The space for the whole phrase is reserved from the first word, so the line never reflows as it builds. See Positioning for safe placements and Get a transcript for producing captions.json.

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

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`.
`bounce`	`number`	`0.6`	How much each word overshoots before it settles, from 0 (lands without overshoot) to 1 (a pronounced hop).
`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"`	Text colour.
`shadow`	`boolean`	`true`	A tight text shadow that keeps the caption legible over bright footage.
`className`	`string`	`—`	Classes for the text block — width, font family, `uppercase`.

Word Pop

One large word at a time, each popping in on a spring the moment it is spoken

Blur In

Each word resolves out of a soft blur the moment it is spoken, for captions that arrive quietly