Skip to main content

wave()v4.0.465

Part of the @remotion/effects package.

A wave effect that can be applied to canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

Preview​

Drag current effect onto a layer in the Studio

Example​

MyComp.tsx
import {AbsoluteFill, useCurrentFrame} from 'remotion';
import {Video} from '@remotion/media';
import {wave} from '@remotion/effects/wave';

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          wave({
            phase: frame * 0.2,
            amplitude: 22,
            wavelength: 180,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API​

Pass an object with the following properties.

phase?​

Phase offset in radians, passed to the sine function. Animate this value over frames to move the wave. Defaults to 0.

direction?​

Wave propagation axis. Defaults to 'horizontal'.

  • 'horizontal' — phase varies along X; pixels are displaced vertically.
  • 'vertical' — phase varies along Y; pixels are displaced horizontally.

To combine both axes, chain two wave() calls with different direction values in the effects array.

amplitude?​

Displacement strength in pixels. Defaults to 60.

wavelength?​

Distance in pixels between wave peaks. Defaults to 240. Must be greater than 0.

disabled?​

When true, the effect is skipped. Defaults to false.

Requirements​

wave() uses a WebGL2 backend. See Using WebGL and WebGPU during renders.

See also​