Word Insert
A sentence edits itself, opening a gap and inserting new words in an accent gradient.
$ pnpm dlx shadcn@latest add @remocn/word-insertUsage
// 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
| Prop | Type | Default |
|---|---|---|
| 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.
Default
DEFAULT_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.
Default
1