Keep Words
Serif belief statements build word by word; each keyword turns red and drops into a closing column of mottos.
$ pnpm dlx shadcn@latest add @remocn/keep-wordsUsage
// src/Root.tsx
import { Composition } from "remotion";
import { KeepWords } from "@/components/remocn/keep-words";
const KeepWordsScene = () => (
<KeepWords
beliefs={[
{ text: "A launch film should be written like code.", keep: "written" },
{ text: "Every scene you install stays yours.", keep: "yours" },
{ text: "And it ships on time with the release.", keep: "on time" },
]}
/>
);
export const RemotionRoot = () => (
<Composition
id="KeepWords"
component={KeepWordsScene}
durationInFrames={330}
fps={30}
width={1280}
height={720}
/>
);Each belief builds word by word in a large serif; its keyword turns the accent color while the other words fall away, and the keyword flies down into a motto line. In the end the keywords stack into a column of one-word sentences, each ending in an accent full stop. Pass beliefs as { text, keep } where keep is the exact word or phrase inside text. Timing stretches to fill the composition; 285 frames assumes three beliefs in 330. It ships light and dark.
Props5
| Prop | Type | Default |
|---|---|---|
| beliefs | { text: string; keep: string }[]DEFAULT_BELIEFS Beliefs played in order; keep is the word or phrase inside text to extract. | |
| accent | string— Color of the keywords and full stops. | |
| background | string— Background fill; pass "transparent" to drop it. | |
| speed | number1 Playback speed multiplier for the whole timeline. | |
| theme | "dark" | "light""dark" Light or dark palette. | |
- beliefs{ text: string; keep: string }[]
Beliefs played in order; keep is the word or phrase inside text to extract.
Default
DEFAULT_BELIEFS - accentstring
Color of the keywords and full stops.
- backgroundstring
Background fill; pass "transparent" to drop it.
- speednumber
Playback speed multiplier for the whole timeline.
Default
1 - theme"dark" | "light"
Light or dark palette.
Default
"dark"