Hidden Word

A word is found hidden letter by letter inside a sentence and lifted out as a large italic title

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { HiddenWord } from "@/components/remocn/hidden-word";
 
const HiddenWordScene = () => (
  <HiddenWord
    text="Every founder deserves a launch video that feels expensive."
    word="love"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="HiddenWord"
    component={HiddenWordScene}
    durationInFrames={186}
    fps={30}
    width={1280}
    height={720}
  />
);

The sentence fades in line by line, the letters of word light up in order inside it, the rest dims, and each lit letter lifts out and flies into place to form a large serif italic word. Pass text (it must contain the letters of word in order, case-insensitive) and word; it ships light and dark through theme.

Props5

Prop	Type	Default
text	string"Small teams make their launch film in code and post it by Friday." The sentence, set as editorial body type.
word	string"ship" The word hiding in `text`; its letters are found in order.
accent	string"#3B5BFD" Color of the lit letters and the empty-slot rule.
theme	"dark" \| "light""dark" Ships light and dark.
speed	number1 Playback speed multiplier.

textstring
The sentence, set as editorial body type.
Default"Small teams make their launch film in code and post it by Friday."
wordstring
The word hiding in `text`; its letters are found in order.
Default"ship"
accentstring
Color of the lit letters and the empty-slot rule.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark.
Default"dark"
speednumber
Playback speed multiplier.
Default1