# Band Shift
URL: https://remocn.dev/docs/transitions/band-shift

Horizontal bands slide across in a stagger, carrying colored blocks that swap one scene for the next

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

## Installation

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

## Usage

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

const BandShiftScene = () => (
  <BandShift
    from="Before."
    to="Now live."
    bands={6}
    accent="#3B5BFD"
  />
);

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

The `from` headline holds for `delay` frames. Then 5 to 7 horizontal bands slide across in alternating directions, each carrying a colored block, and the `to` scene lands as they pass. Pass `from` and `to` as short text or any React node; `to="remocn"` sets the Remocn logo. With the defaults the shift ends at frame 55.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `React.ReactNode` | `"Before."` | Outgoing scene: a short headline or any React node |
| `to` | `React.ReactNode` | `"remocn"` | Incoming scene carried in by the bands |
| `bands` | `number` | `6` | Number of horizontal bands, clamped between 5 and 7 |
| `colors` | `string[]` | — | Colors of the blocks riding between scenes; defaults to a mesh |
| `delay` | `number` | `18` | Frames the outgoing scene holds before the shift |
| `stagger` | `number` | `3` | Frames between neighbouring bands starting |
| `accent` | `string` | `"#3B5BFD"` | Accent color used by the scenes |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline |
| `theme` | `"dark" \| "light"` | `"dark"` | Tone the incoming scene lands on |

## Use when
- A fast swap from a short headline to a logo or closing line with a graphic, rhythmic motion.
- A bold bar-based change between two statements in a launch video.
- A cut where staggered motion across the whole frame is more interesting than a single wipe.

## Don't use when
- The reveal should split vertically into columns — use `column-slide`.
- You want the reveal to expand from a single point — use `ring-burst`.
- A soft, slow swap is needed, not a rhythmic one — use `grain-dissolve`.