Split Match

Split-flap reels lock on each word in turn until the last word merges into a large logo.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SplitMatch } from "@/components/remocn/split-match";
 
const SplitMatchScene = () => (
  <SplitMatch
    words={["build", "ship", "launch", "remocn"]}
    accent="#3B5BFD"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SplitMatch"
    component={SplitMatchScene}
    durationInFrames={145}
    fps={30}
    width={1280}
    height={720}
  />
);

Two reels slam in and lock on the first word, then step to each next word in turn until the last one, where the seam closes and the gradient floods into the large logo. Pass words; length grows by 25 frames per extra word, and the file exports splitMatchDuration(wordCount) for the composition length. Ships light and dark.

Props4

Prop	Type	Default
words	string[]["build", "ship", "launch", "remocn"] Words in order; the last one becomes the poster logo.
accent	string"#3B5BFD" Accent colour for the mark and highlights; any CSS colour.
theme	"dark" \| "light""dark" Dark or light palette and ground.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.

wordsstring[]
Words in order; the last one becomes the poster logo.
Default["build", "ship", "launch", "remocn"]
accentstring
Accent colour for the mark and highlights; any CSS colour.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1