Drop

Each word falls into place from above and bounces as it lands the moment it is spoken, and the whole phrase drops out of frame when the speaker pauses

Installation

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

Usage

CaptionDrop 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 falls from above with a little random tilt and bounces as it lands. The space for the whole phrase is reserved from the first word, so the line never reflows. When the speaker pauses long enough for the page to leave, the words fall out downward one after another instead of fading. See Positioning for safe placements and Get a transcript for producing captions.json.

tsx

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

Words fall from about one and a half lines above their slot, so leave that much room above the block if something sits directly over it.

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`.
bounce	number0.6 How much each word bounces on landing, from 0 (settles without bouncing) to 1 (a lively rebound).
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. At the end of the hold the words fall out of frame.
fontSize	number64 Font size in pixels.
fontWeight	number800 Font weight. The font itself is inherited.
color	string"#ffffff" Text colour.
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—
bouncenumber
How much each word bounces on landing, from 0 (settles without bouncing) to 1 (a lively rebound).
Default0.6
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. At the end of the hold the words fall out of frame.
Default600
fontSizenumber
Font size in pixels.
Default64
fontWeightnumber
Font weight. The font itself is inherited.
Default800
colorstring
Text colour.
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—