# Brand Sweep

Layered panels in the brand colors sweep diagonally across the frame, cover the cut, then peel away in reverse order onto the next scene.

```bash
npx shadcn add https://www.reelcn.dev/r/brand-sweep.json
```

Usage:

```tsx
<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={90}>
    <Chapter1 />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={brandSweep()} timing={linearTiming({ durationInFrames: 30 })} />
  <TransitionSeries.Sequence durationInFrames={90}>
    <Chapter2 />
  </TransitionSeries.Sequence>
</TransitionSeries>
```

Use for:

- Branded section breaks in explainers and launch videos
- Moving between topics with the brand palette on screen

Dependencies:

- `@remotion/transitions`
- `remotion`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| colors? | `string[]` | — | Panel colors from back to front; the last one covers the cut. Defaults to the theme surface, highlight and accent. |
| direction? | `"left" \| "right"` | — | Which way the panels travel. |
| angle? | `number` | — | Lean of the panel edges in degrees. |