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-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
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	number0.2 Distortion strength of the wave bands.
softness	number0.7 Blending softness between the wave colors.
noise	number0.4 Amount of per-pixel grain over the wave.
zoom	number1.16 Magnification of the wave field.
speed	number1 Shader animation speed of the wave bands.

colorsstring[]
Colors of the wave bands.
Default["#3a3a52", "#4a4a68", "#8f88ae"]
colorBackstring
Backdrop color between the wave bands. Match it to the scene backgrounds for a seamless sweep.
Default"#141318"
intensitynumber
Distortion strength of the wave bands.
Default0.2
softnessnumber
Blending softness between the wave colors.
Default0.7
noisenumber
Amount of per-pixel grain over the wave.
Default0.4
zoomnumber
Magnification of the wave field.
Default1.16
speednumber
Shader animation speed of the wave bands.
Default1