wave()<AvailableFrom v="4.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>.

Example

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. During renders, enable WebGL via Config.setChromiumOpenGlRenderer() (for example 'angle'). See Using WebGL during renders.

See also

• @remotion/effects
• blur()
• Source code for this effect