Word Ladder

A word changes a letter or two per rung, climbing a ladder to the final word.

Installation

$ pnpm dlx shadcn@latest add @remocn/word-ladder

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { WordLadder } from "@/components/remocn/word-ladder";
 
const WordLadderScene = () => (
  <WordLadder words={["idea", "item", "stem", "step", "ship"]} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="WordLadder"
    component={WordLadderScene}
    durationInFrames={186}
    fps={30}
    width={1280}
    height={720}
  />
);

Each word in words replaces the last by changing a letter or two, stepping from the first rung to the last. Pass words as a chain where neighbors differ slightly. It ships in light and dark through the theme prop.

Props4

Prop	Type	Default
words	string[]["idea", "item", "stem", "step", "ship"] Rungs of the ladder, first to last. Neighbours should differ by a letter or two.
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.

wordsstring[]
Rungs of the ladder, first to last. Neighbours should differ by a letter or two.
Default["idea", "item", "stem", "step", "ship"]
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