# Letter Gate
URL: https://remocn.dev/docs/transitions/letter-gate

The camera pushes into a giant letter pair and the gap opens like a gate onto the next scene

- Install: `npx shadcn@latest add @remocn/letter-gate`
- Vibe: premium
- Natural length: 26f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/letter-gate
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LetterGateDemo } from "@/components/remocn/letter-gate";

const LetterGateDemoScene = () => (
  <LetterGateDemo
    text="Start building"
    gate="bu"
    prompt="A launch film for v2"
  />
);

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

Scene A shows a short headline while the camera punches in twice. It then pushes into the letter pair named by `gate`, and the pair opens like a gate onto scene B, a prompt box with a label and a next step. Set `text` and make sure `gate` is a two-letter run inside it, then pass `prompt`, `placeholder`, `label` and `nextLabel` for scene B; it ships light and dark.

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 |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette for both scenes |
| `accent` | `string` | — | Accent color; defaults to the theme accent |
| `text` | `string` | `"Start building"` | Headline shown in scene A; the gate letters are taken from it |
| `gate` | `string` | `"bu"` | Two-letter run inside text that the camera pushes into |
| `prompt` | `string` | `"A launch film for v2"` | Text typed into the scene B prompt box |
| `placeholder` | `string` | `"Describe your launch"` | Placeholder shown in the prompt box before typing |
| `label` | `string` | `"Prompt"` | Label above the prompt box in scene B |
| `nextLabel` | `string` | `"Script"` | Label typed into the next-step node after the press |
| `ground` | `GshPresetId` | — | Preset id for the scene A gradients.sh shader ground |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the scene A shader parameters |
| `groundB` | `GshPresetId` | — | Preset id for the scene B gradients.sh shader ground |
| `groundParamsB` | `Partial<GradientParams>` | — | Overrides for the scene B shader parameters |
| `transition` | `LetterGateProps` | — | Overrides for the transition presentation props |

## Use when
- A launch video where a call-to-action headline hands off to a prompt or editor screen with a match cut on its own letters.
- You want a bold typographic transition that stays on one word instead of wiping the whole frame.
- A beat that moves from a brand statement into the product UI without a visible seam.

## Don't use when
- The outgoing headline is short or has no two adjacent letters worth enlarging — use `ring-cut` for a generic circular cut.
- The cut should be fast and lateral — use `whip-pan`.
- You need a quiet reveal of a single line of text — use `hairline-open`.