Pinned Word

A serif italic word stays pinned in a sentence while the words around it change.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PinnedWord } from "@/components/remocn/pinned-word";
 
const PinnedWordScene = () => (
  <PinnedWord lines={["Ship a video tonight.", "Own every video frame."]} word="video" hold={36} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PinnedWord"
    component={PinnedWordScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

The word stays fixed in italic serif while the lines around it swap in turn. Pass lines that each contain word and set hold for pacing. It ships in light and dark through the theme prop.

Props7

Prop	Type	Default
lines	string[]— Sentences in order, each containing the pinned word.
word	string"video" Word kept fixed in italic serif.
hold	number36 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.

linesstring[]
Sentences in order, each containing the pinned word.
wordstring
Word kept fixed in italic serif.
Default"video"
holdnumber
Frames each state stays on screen before the next one.
Default36
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"