# Band Open
URL: https://remocn.dev/docs/transitions/band-open

A horizontal band opens at the center of a stacked headline to reveal a full-frame photo title card

- Install: `npx shadcn@latest add @remocn/band-open`
- Vibe: clean
- Natural length: 36f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/band-open
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BandOpen } from "@/components/remocn/band-open";

const BandOpenScene = () => (
  <BandOpen
    line="Launch day"
    src="/images/hero.jpg"
    meta="Thursday · 09:00 · remocn.dev"
  />
);

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

Scene A stacks the headline into repeating rows that rise in and fade out above and below the center. A band opens across the middle and expands to full frame, revealing scene B, a photo with the same headline and a meta caption below. Pass `line`, `meta` and your own `src` (the default exists only in the Remocn repo); 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 the stack scene |
| `line` | `string` | `"Launch day"` | Headline repeated in the strips and over the photo |
| `src` | `string` | `"reel/reel-2.jpg"` | Photo for scene B; the default exists only in the Remocn repo |
| `meta` | `string` | `"Thursday · 09:00 · remocn.dev"` | Caption line under the headline in scene B |
| `ground` | `GshPresetId` | — | Preset id for the scene A gradients.sh shader ground |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the scene A shader parameters |
| `transitionFrames` | `number` | `BAND_OPEN_TIMING.transition` | Transition length in frames |
| `band` | `number` | — | Height share of the opening band; auto-sized from the line |
| `rest` | `BandOpenProps` | — | Other band options: center, openUntil, expandFrom, push, dim, edge, parallax |

## Use when
- A title card reveal where one word or phrase opens up onto a photo.
- Starting a launch video chapter with a bold typographic stack that splits to show the hero image.
- A date or event announcement that needs a confident, editorial reveal with a caption line.

## Don't use when
- You need a vertical reveal rather than a horizontal one — use `column-slide`.
- The reveal should be a thin line of light, not a thick band — use `hairline-open`.
- The reveal should come from a point rather than a band — use `ring-cut`.