# Wave Wipe
URL: https://remocn.dev/docs/transitions/wave-wipe

Sweep a grainy wave up across the frame, covering the outgoing scene and revealing the next one from below

- Install: `npx shadcn@latest add @remocn/wave-wipe`
- Vibe: premium
- Natural length: 60f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/wave-wipe
```

## Usage

`waveWipe()` is a Remotion transition presentation. Pass it to a
`TransitionSeries.Transition` between two sequences. A full-frame
grain-gradient wave field washes over the outgoing scene while its bands
drift upward, then the incoming scene rides in from the bottom on top of the
field and covers it. A 60-frame timing gives the sweep a natural pace.

```tsx
import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { waveWipe } from "@/components/remocn/wave-wipe";

export const MyVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={88}>
      <SceneA />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 60 })}
      presentation={waveWipe()}
    />
    <TransitionSeries.Sequence durationInFrames={88}>
      <SceneB />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);
```

## Props

`waveWipe(props)` accepts:

| Prop | Type | Default | Description |
|---|---|---|---|
| `colors` | `string[]` | `["#3a3a52", "#4a4a68", "#8f88ae"]` | Colors of the wave bands. |
| `colorBack` | `string` | `"#141318"` | Backdrop color between the wave bands. Match it to the scene backgrounds for a seamless sweep. |
| `intensity` | `number` | `0.2` | Distortion strength of the wave bands. |
| `softness` | `number` | `0.7` | Blending softness between the wave colors. |
| `noise` | `number` | `0.4` | Amount of per-pixel grain over the wave. |
| `zoom` | `number` | `1.16` | Magnification of the wave field. |
| `speed` | `number` | `1` | Shader animation speed of the wave bands. |

## Use when
- The transition should feel like physical motion — a swell washing over the frame, tides, page-over-page.
- Scenes stack vertically in the narrative: the next chapter literally arrives from below.
- The video has a textured, analog tone that the grain complements.

## Don't use when
- Scenes relate horizontally (steps in a flow) — the vertical sweep fights the reading direction.
- The tone is crisp and minimal — the grain texture adds visual noise by design.