Typo Fix

A misspelled word is caught and corrected in place inside a short line.

Installation

$ pnpm dlx shadcn@latest add @remocn/typo-fix

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TypoFix } from "@/components/remocn/typo-fix";
 
const TypoFixScene = () => (
  <TypoFix wrong="Lanuch" correct="Launch" after="day" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="TypoFix"
    component={TypoFixScene}
    durationInFrames={116}
    fps={30}
    width={1280}
    height={720}
  />
);

The wrong word appears in a short line, gets flagged, and is corrected to correct in place. Pass wrong, correct and surrounding before and after text. It ships in light and dark through the theme prop.

Props7

Prop	Type	Default
wrong	string"Lanuch" Misspelled word shown first.
correct	string"Launch" Correct spelling it becomes.
before	string"" Text before the word.
after	string"day" Text after the word.
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.

wrongstring
Misspelled word shown first.
Default"Lanuch"
correctstring
Correct spelling it becomes.
Default"Launch"
beforestring
Text before the word.
Default""
afterstring
Text after the word.
Default"day"
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