Keep Words

Serif belief statements build word by word; each keyword turns red and drops into a closing column of mottos.

Installation
$ pnpm dlx shadcn@latest add @remocn/keep-words

Usage

tsx
// 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

PropTypeDefault
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.

    DefaultDEFAULT_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.

    Default1

  • theme"dark" | "light"

    Light or dark palette.

    Default"dark"