# Slit Reveal
URL: https://remocn.dev/docs/transitions/slit-reveal

A point of light draws a hairline that opens onto a product scene, with a glow ring below

- Install: `npx shadcn@latest add @remocn/slit-reveal`
- Vibe: premium
- Natural length: 132f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/slit-reveal
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SlitReveal } from "@/components/remocn/slit-reveal";

const SlitRevealScene = () => (
  <SlitReveal
    title="Introducing remocn"
    src="/images/app-screenshot.png"
    opening="letterbox"
    accent="#3B5BFD"
  />
);

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

A point of light draws out into a hairline with the `title` riding on it. The line then opens like a slit, letterbox style or sideways, onto the scene you pass as `children` or `src`, which settles out of a soft blur. Without either it shows a built-in product mock. With `opening="letterbox"` the reveal settles by frame 132, and sideways by frame 152.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Introducing remocn"` | Line of type that rides the hairline before it opens |
| `children` | `React.ReactNode` | — | Scene revealed in the slit; wins over src |
| `src` | `string` | — | Screenshot revealed in the slit, filled to cover |
| `opening` | `"letterbox" \| "sideways"` | `"letterbox"` | Letterbox opens top and bottom; sideways rolls the line upright |
| `accent` | `string` | `"#3B5BFD"` | Color of the light and the default product mock |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline |

## Use when
- Introducing a product with a title that rides a line of light before the screen is revealed.
- A cinematic opener where a screenshot or UI scene should appear through a slit.
- A reveal that can open either as a letterbox or sideways, depending on the aspect of the scene.

## Don't use when
- You only need to swap two text statements — use `hairline-open`.
- The reveal should be a thick title band rather than a thin slit — use `band-open`.
- You need a quick cut between two existing shots, not a reveal — use `flash-sweep`.