Wave Wipe
Sweep a grainy wave up across the frame, covering the outgoing scene and revealing the next one from below
Installation
$ pnpm dlx shadcn@latest add @remocn/wave-wipeUsage
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.
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. |