# Column Slide
URL: https://remocn.dev/docs/transitions/column-slide

Vertical columns slide across in a stagger and swap one headline for another

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

## Installation

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

## Usage

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

const ColumnSlideScene = () => (
  <ColumnSlide
    from="Plan the launch"
    to="Launch day"
    columns={5}
    accent="#3B5BFD"
  />
);

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

The `from` headline sits on the stage. Between 3 and 7 vertical columns, set by `columns`, then slide across in a stagger, each carrying a slice of both headlines, and the new scene settles with a slight scale-down. Pass `from` and `to` as short strings; it ships light and dark and the move finishes at frame 66.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `string` | `"Plan the launch"` | Outgoing headline |
| `to` | `string` | `"Launch day"` | Incoming headline |
| `columns` | `number` | `5` | Number of vertical columns, clamped between 3 and 7 |
| `accent` | `string` | `"#3B5BFD"` | Accent color used by the scenes |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark stage |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline |

## Use when
- A clean, rhythmic swap between two headlines such as a plan and its launch.
- A beat that needs a graphic, architectural cut with a clear tempo.
- A chapter title change where the whole frame should visibly move, not just fade.

## Don't use when
- You want horizontal bands instead of vertical columns — use `band-shift`.
- The scenes are full UI shots rather than headlines — use `color-bars`.
- A single smooth push is enough — use `slide-swap`.