# Color Bars
URL: https://remocn.dev/docs/transitions/color-bars

Slanted fluted color bars whip across the frame and swap the outgoing shot for the incoming one

- Install: `npx shadcn@latest add @remocn/color-bars`
- Vibe: playful
- Natural length: 69f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/color-bars
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ColorBars } from "@/components/remocn/color-bars";

const ColorBarsScene = () => (
  <ColorBars
    images={["/shots/before.png", "/shots/after.png"]}
    direction="right"
    bars={5}
    accent="#3B5BFD"
  />
);

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

Two to six slanted bars, tinted from `accent`, whip across the frame in a stagger. The outgoing shot is shoved along while the incoming shot arrives late and settles. Pass the two shots as `scenes` (React nodes) or `images`, set the travel with `direction` and `angle`, and without either it plays a built-in pair of scenes. It ships light and dark; the bars finish and the scene settles by frame 69 with 5 bars.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `scenes` | `React.ReactNode[]` | — | Outgoing and incoming shots as React nodes |
| `images` | `string[]` | — | Outgoing and incoming screenshots, used when scenes is not passed |
| `direction` | `"right" \| "left" \| "up" \| "down"` | `"right"` | Which way the bars travel |
| `angle` | `number` | `16` | Slant of the bar edges in degrees; 0 is a straight wipe |
| `bars` | `number` | `5` | Number of bars, clamped between 4 and 6 |
| `colors` | `string[]` | — | Override the derived bar colors, leading bar first |
| `accent` | `string` | `"#3B5BFD"` | Base color the bar colors are derived from |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark built-in scenes and bar colors |

## Use when
- Cutting between two product screenshots or scenes with a bold, colorful whip.
- A launch video that needs a high-energy swap between features with brand-colored bars.
- A directional cut that can go right, left, up or down depending on the story.

## Don't use when
- You want a single band of light rather than several colored bars — use `flash-sweep`.
- You need a clean seam with no color — use `diagonal-split`.
- A soft, slow swap is better than a whip — use `grain-dissolve`.