# Split Doors

The outgoing scene splits down the middle and its two halves slide apart like doors, revealing the next scene.

```bash
npx shadcn add https://www.reelcn.dev/r/split-doors.json
```

Usage:

```tsx
<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <TitleCard />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={splitDoors()} timing={linearTiming({ durationInFrames: 24 })} />
  <TransitionSeries.Sequence durationInFrames={90}>
    <ProductShot />
  </TransitionSeries.Sequence>
</TransitionSeries>
```

Use for:

- Revealing a product shot, logo or new chapter behind the current scene
- Moving from a title card into the main content

Avoid:

- An outgoing scene that plays audio or video, since it renders once per door. Use `circle-burst`

Dependencies:

- `@remotion/transitions`
- `remotion`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| direction? | `"vertical" \| "horizontal"` | — | Which way the doors travel. Defaults to `horizontal` in landscape and square, `vertical` in portrait. |
| shadowColor? | `string` | — | Shadow the doors cast on the revealed scene. |