# Slide Doors
URL: https://remocn.dev/docs/typography/slide-doors

Two panels slide apart like doors to reveal 'Arriving in your repo.' with an accent word

- Install: `npx shadcn@latest add @remocn/slide-doors`
- Vibe: clean
- Natural length: 138f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/slide-doors
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SlideDoors } from "@/components/remocn/slide-doors";

const SlideDoorsScene = () => (
  <SlideDoors lines={["Scenes that move.", "Code you own.", "Arriving in your repo."]} highlight="repo." />
);

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

Each line slides apart like a pair of doors and the next line is revealed in the gap, ending with the last line and its highlight word in the accent colour. Pass `lines` and `highlight`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | — | Lines shown in turn; the last one gets the highlight. |
| `highlight` | `string` | `"repo."` | Word or phrase set in the accent colour. |
| `hold` | `number` | `28` | Frames the final line holds. |
| `accent` | `string` | — | Accent colour (any CSS colour). |
| `background` | `string` | — | Overrides the theme background colour. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A rhythmic three-line pitch where each line is pushed out by the next, like doors sliding apart.
- A final line that lands on a highlighted word, such as where the product ends up.

## Don't use when
- You need a single line, not a sequence — use `scan-reveal`.
- You want lines to rewrite in place — use `rewrite-bars`.