Baton Word
Kinetic type where each line hands its last word to the next line as an accent-colored baton
$ pnpm dlx shadcn@latest add @remocn/baton-wordUsage
// 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
| Prop | Type | Default |
|---|---|---|
| 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
Default
1 - theme"dark" | "light"
Light or dark palette
Default
"dark"