Split Word

A huge word is cut open by a hairline and a second word slides into the gap.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SplitWord } from "@/components/remocn/split-word";
 
const SplitWordScene = () => <SplitWord word="Now" insert="Available" accent="#3B5BFD" />;
 
export const RemotionRoot = () => (
  <Composition
    id="SplitWord"
    component={SplitWordScene}
    durationInFrames={126}
    fps={30}
    width={1280}
    height={720}
  />
);

word rises in letter by letter, a hairline cuts through its middle, and the two halves slide apart to open an aurora-gradient band where insert sits. The halves then settle back with a small offset. It ships light and dark through theme.

Props5

Prop	Type	Default
word	string"Now" The huge word that gets split open.
insert	string"Available" The word revealed inside the gap.
accent	string"#3B5BFD" Color of the hairline cut.
theme	"dark" \| "light""dark" Light or dark ground; ships both.
speed	number1 Playback speed multiplier.

wordstring
The huge word that gets split open.
Default"Now"
insertstring
The word revealed inside the gap.
Default"Available"
accentstring
Color of the hairline cut.
Default"#3B5BFD"
theme"dark" | "light"
Light or dark ground; ships both.
Default"dark"
speednumber
Playback speed multiplier.
Default1