Select Replace
A phrase is selected like text in an editor, deleted, and replaced with new styled words.
$ pnpm dlx shadcn@latest add @remocn/select-replaceUsage
// src/Root.tsx
import { Composition } from "remotion";
import { SelectReplace } from "@/components/remocn/select-replace";
const SelectReplaceScene = () => (
<SelectReplace text="Draft it next week." edits={[{ from: "Draft", to: "Ship" }, { from: "next week", to: "tonight" }]} />
);
export const RemotionRoot = () => (
<Composition
id="SelectReplace"
component={SelectReplaceScene}
durationInFrames={170}
fps={30}
width={1280}
height={720}
/>
);The text shows, then each edits item selects a from phrase and swaps in its to replacement with a highlight. Pass text and edits with the phrases you want changed. It ships in light and dark through the theme prop.
Props5
| Prop | Type | Default |
|---|---|---|
| text | string"Draft it next week." Starting sentence containing every `from` phrase. | |
| edits | SelectReplaceEdit[]— List of `{ from, to }` replacements applied in order. | |
| 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. | |
- textstring
Starting sentence containing every `from` phrase.
Default
"Draft it next week." - editsSelectReplaceEdit[]
List of `{ from, to }` replacements applied in order.
- 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