RemotionUI

Caption Bumper

A between-beats card that punches its line in word by word.

SceneScenesAdvanced

caption-bumper30fps · 960×540
Install
$ npx remotion-ui@latest add caption-bumper

The ground wipes in behind the line, the words land one after another out of their own masks, a rule draws under them, and the whole card wipes out again once holdSeconds is up.

The type size is fitted to the safe area, so a three-word bumper and a twelve-word one both fill the frame.

Agent notes

Install first, then import the copied source component locally. AI guide →

Import
@/remotion/scenes/caption-bumper
  • Use when: captioned videos, social clips, and synced text scenes.
  • Customize: text, eyebrow, maxFontSize, holdSeconds, plus copied source for timing, layout, colors, and typography.
  • Rule: do not import this component from the remotion-ui npm package; it is copied into your project.

Usage

Example
import { CaptionBumper } from "@/remotion/scenes/caption-bumper"; <CaptionBumper text="This is the key moment." />

API Reference

PropTypeDescription
text*stringThe line the bumper exists to land.
eyebrowstringSmall label above it — segment, chapter, timestamp.
maxFontSizenumberLargest type size at a 1280-wide stage.
holdSecondsnumberSeconds before the card wipes out. Omit to hold to the end.
accentColorstringGround, eyebrow, and rule colour.
theme"dark" | "light"Surface palette.
speednumberAnimation speed multiplier.

Related