# Duet Split
URL: https://remocn.dev/docs/social/duet-split

A split screen contrasts a slow grey before side with a crisp gradient after side, row by row

- Install: `npx shadcn@latest add @remocn/duet-split`
- Vibe: social
- Natural length: 100f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/duet-split
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { DuetSplit } from "@/components/remocn/duet-split";

const DuetSplitScene = () => (
  <DuetSplit
    beforeLabel="Before"
    afterLabel="With us"
    rows={[
      { before: "3 weeks", after: "1 day" },
      { before: "$12K", after: "$0" },
    ]}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="DuetSplit"
    component={DuetSplitScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Two slabs slide in, labelled by `beforeLabel` and `afterLabel`. The grey side types out wobbly serif values row by row; the after side then pushes in and shows the crisp replacements, and a wordmark rises at the bottom. Pass `rows` as `{ before, after }` pairs; it ships dark and light via `theme`. The closing wordmark is the Remocn logo, swap `RemocnLogo` in the copied file.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `beforeLabel` | `string` | `"Before"` | Label above the grey before side. |
| `afterLabel` | `string` | `"With remocn"` | Label above the gradient after side. |
| `rows` | `DuetRow[]` | — | Paired values, one row each: the old way and the new way. |
| `accent` | `string` | `"#3B5BFD"` | Color of the dot beside the after label. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships dark and light. |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the animated ground. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the ground shader parameters. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A before-and-after claim such as "3 weeks vs 1 day" or "$12K vs $0" told as paired rows.
- Comparing the old way and your product on three or four concrete metrics.
- A pricing or time-saving beat that ends on a brand sign-off.

## Don't use when
- You are comparing two images or screenshots with a sweeping divider — use `before-after`.
- The contrast is a head-to-head with a clash effect rather than paired rows — use `versus-split`.
- A single old value should be crossed out and replaced inline — use `strikethrough-replace`.