Width Lock

A condensed line keeps a fixed width while one word swaps through a list.

Installation

$ pnpm dlx shadcn@latest add @remocn/width-lock

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { WidthLock } from "@/components/remocn/width-lock";
 
const WidthLockScene = () => (
  <WidthLock before="Ship the" words={["trailer", "captions", "launch video"]} after="by tonight." />
);
 
export const RemotionRoot = () => (
  <Composition
    id="WidthLock"
    component={WidthLockScene}
    durationInFrames={170}
    fps={30}
    width={1280}
    height={720}
  />
);

The line holds a constant width while the middle word swaps through each entry in words. Pass before, words and after, and set hold for how long each word stays. It ships in light and dark through the theme prop.

Props8

Prop	Type	Default
before	string"Ship the" Text before the swapping word.
words	string[]— Words swapped in order.
after	string"by tonight." Text after the swapping word.
hold	number30 Frames each state stays on screen before the next one.
accent	string"#3B5BFD" Accent color override; falls back to the theme accent.
background	string— Background color override; falls back to the theme background.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Ships light and dark; picks the palette.

beforestring
Text before the swapping word.
Default"Ship the"
wordsstring[]
Words swapped in order.
afterstring
Text after the swapping word.
Default"by tonight."
holdnumber
Frames each state stays on screen before the next one.
Default30
accentstring
Accent color override; falls back to the theme accent.
Default"#3B5BFD"
backgroundstring
Background color override; falls back to the theme background.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Ships light and dark; picks the palette.
Default"dark"