Skip to main content

waves()v4.0.471

Part of the @remotion/effects package.

Adds repeating wavy bands to canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

Colors are composited over the source.

Preview​

Drag current effect into a layer in the Studio

Example​

MyComp.tsx
import {waves} from '@remotion/effects/waves';
import {AbsoluteFill, Solid, useCurrentFrame} from 'remotion';

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

  return (
    <AbsoluteFill>
      <Solid
        width={1280}
        height={720}
        effects={[
          waves({
            colors: ['#dff4ff', '#7cc6ff'],
            direction: 'horizontal',
            thickness: 40,
            gap: 0,
            angle: 0,
            offset: frame * 2,
            amplitude: 24,
            wavelength: 160,
            phase: frame * 2,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API​

Pass an object with the following properties. You can also call waves() without arguments.

colors?​

An array of color strings for the bands. Colors are assigned cyclically. Must contain at least 2 colors.

Defaults to ['#dff4ff', '#7cc6ff'].

direction?​

Base band direction before wave displacement. Either 'horizontal' or 'vertical'. Defaults to 'horizontal'.

thickness?​

Thickness of each band in pixels. Defaults to 40.

gap?​

Transparent gap in pixels between each band. Defaults to 0.

angle?​

Rotates the pattern in degrees. Defaults to 0.

offset?​

Offset in pixels. Defaults to 0.

Animate this value with useCurrentFrame() to scroll through the bands.

amplitude?​

Wave displacement in pixels. Defaults to 24.

wavelength?​

Distance in pixels before the wave repeats. Defaults to 160. Must be greater than 0.

phase?​

Wave phase in degrees. Defaults to 0.

Animate this value with useCurrentFrame() to move the wave shape without scrolling through the bands.

disabled?​

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

Requirements​

waves() uses a WebGL2 backend. During renders, enable WebGL via Config.setChromiumOpenGlRenderer() (for example 'angle'). See Using WebGL during renders.

See also​