Select Replace

A phrase is selected like text in an editor, deleted, and replaced with new styled words.

Installation
$ pnpm dlx shadcn@latest add @remocn/select-replace

Usage

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

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

    Default1