Word Insert

A sentence edits itself, opening a gap and inserting new words in an accent gradient.

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

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WordInsert } from "@/components/remocn/word-insert";
 
const WordInsertScene = () => (
  <WordInsert states={["Launch videos.", "Launch videos, as code."]} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="WordInsert"
    component={WordInsertScene}
    durationInFrames={174}
    fps={30}
    width={1280}
    height={720}
  />
);

Each entry in states is the same sentence with more words added, and the new words open a gap and slide in with a gradient. Pass states as successive versions of your line. It ships in light and dark through the theme prop.

Props4

PropTypeDefault
states
string[]DEFAULT_STATES

Successive versions of the sentence, each adding words.

accent
string"#3B5BFD"

Accent color override; falls back to the theme accent.

theme
"dark" | "light""dark"

Ships light and dark; picks the palette.

speed
number1

Playback speed multiplier for the whole timeline.

  • statesstring[]

    Successive versions of the sentence, each adding words.

    DefaultDEFAULT_STATES

  • accentstring

    Accent color override; falls back to the theme accent.

    Default"#3B5BFD"

  • theme"dark" | "light"

    Ships light and dark; picks the palette.

    Default"dark"

  • speednumber

    Playback speed multiplier for the whole timeline.

    Default1