Versus Split

A diagonal split frames Remocn against the old way with stat rows for time, cost and rounds

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { VersusSplit } from "@/components/remocn/versus-split";
 
const VersusSplitScene = () => (
  <VersusSplit
    away="The old way"
    stats={[
      { label: "Time to ship", home: "1 day", away: "3 weeks" },
      { label: "Cost", home: "$0", away: "$12K" },
    ]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="VersusSplit"
    component={VersusSplitScene}
    durationInFrames={105}
    fps={30}
    width={1280}
    height={720}
  />
);

The frame splits on a diagonal, both halves slam in and meet on a flashing seam, and a VS mark drops onto it. Stat rows then land one by one with the Remocn value on the left and the opponent value on the right, and a gradient wipe lights the Remocn half while the other side dims. Pass away, the two labels and stats as label, home and away strings. It ships light and dark through the theme prop.

Props7

Prop	Type	Default
away	string"The old way" The opponent, set in condensed caps on the right half. The left half is always the Remocn logo.
homeLabel	string"Challenger" Small label over the logo.
awayLabel	string"Title holder" Small label over the opponent.
stats	VersusStat[]— Tale-of-the-tape rows, both sides land at once. Three read best.
accent	string"#3B5BFD" The marker on the seam plates.
theme	"dark" \| "light""dark" Ships light and dark.
speed	number1 Playback speed multiplier; 1 is the designed pace.

awaystring
The opponent, set in condensed caps on the right half. The left half is always the Remocn logo.
Default"The old way"
homeLabelstring
Small label over the logo.
Default"Challenger"
awayLabelstring
Small label over the opponent.
Default"Title holder"
statsVersusStat[]
Tale-of-the-tape rows, both sides land at once. Three read best.
accentstring
The marker on the seam plates.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark.
Default"dark"
speednumber
Playback speed multiplier; 1 is the designed pace.
Default1