Baton Word

Kinetic type where each line hands its last word to the next line as an accent-colored baton

Installation
$ pnpm dlx shadcn@latest add @remocn/baton-word

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BatonWord } from "@/components/remocn/baton-word";
 
const BatonWordScene = () => (
  <BatonWord
    scenes={[
      "The app is ready for launch.",
      "Launch day needs a film.",
      "Film it in code.",
    ]}
    theme="dark"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="BatonWord"
    component={BatonWordScene}
    durationInFrames={210}
    fps={30}
    width={1280}
    height={720}
  />
);

Each sentence in scenes rises in word by word. Its last word then lights up in the accent color, travels along an arc, and becomes the first word of the next sentence, so end each line with the word the next one starts with. The motion finishes at frame 177 at speed 1 with the default three lines, and longer or more lines take longer; it ships light and dark.

Props5

PropTypeDefault
scenes
string[]—

Sentences in order; each should end with the word the next starts with

accent
string—

Color of the baton word and the lead word of each next line

background
string—

Stage color; pass transparent to composite over your own footage

speed
number1

Playback multiplier for the whole timeline

theme
"dark" | "light""dark"

Light or dark palette

  • scenesstring[]

    Sentences in order; each should end with the word the next starts with

  • accentstring

    Color of the baton word and the lead word of each next line

  • backgroundstring

    Stage color; pass transparent to composite over your own footage

  • speednumber

    Playback multiplier for the whole timeline

    Default1

  • theme"dark" | "light"

    Light or dark palette

    Default"dark"