# Versus Split
URL: https://remocn.dev/docs/numbers/versus-split

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

- Install: `npx shadcn@latest add @remocn/versus-split`
- Vibe: playful
- Natural length: 66f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1` | Playback speed multiplier; 1 is the designed pace. |

## Use when
- A head-to-head beat that pits the product against the old way on a diagonal split with a tale-of-the-tape of time, cost and effort.
- A fight-poster style comparison where the winning side lights up and the opponent dims.
- A short stat-by-stat contrast with three rows of paired values and a clear winner.

## Don't use when
- The contest should read as a football-style scoreline — use `score-bug`.
- You only compare one measurement on a shared axis — use `measure-dim`.
- You compare across many attributes at once and want an overlay shape — use `radar-compare`.