# Diagonal Split
URL: https://remocn.dev/docs/transitions/diagonal-split

A diagonal seam slides the outgoing scene away to reveal the next with a band of light along the edge

- Install: `npx shadcn@latest add @remocn/diagonal-split`
- Vibe: premium
- Natural length: 70f @ 30fps

## Installation

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

## Usage

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

const DiagonalSplitScene = () => (
  <DiagonalSplit
    from="Built in a weekend"
    to="Launched on Monday"
    angle={28}
    accent="#3B5BFD"
  />
);

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

A bright seam opens at `angle`, then the outgoing `from` scene is shoved off along the seam while the `to` scene settles in behind it on a fluted gradient. Pass `from` and `to` as short text or any React node and tune `angle`; it ships light and dark and the motion ends at frame 70.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `React.ReactNode` | `"Built in a weekend"` | Outgoing scene: a short headline or any React node |
| `to` | `React.ReactNode` | `"Launched on Monday"` | Incoming scene: a short headline or any React node |
| `angle` | `number` | `28` | Seam angle in degrees |
| `accent` | `string` | `"#3B5BFD"` | Accent color used by the scenes |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark stage |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline |

## Use when
- A confident before-and-after swap between two statements, such as built in a weekend and launched on Monday.
- A beat where the outgoing scene should be pushed off at an angle instead of faded.
- A directional cut where the seam angle can be tuned to match the layout.

## Don't use when
- You want an opening that is straight and symmetrical rather than angled — use `hairline-open`.
- You need several slanted bars instead of one seam — use `color-bars`.
- A plain lateral shove between full scenes is enough — use `slide-swap`.