Skip to main content

liquidContours()v4.0.491

Part of the @remotion/effects package.

Generates a two-color liquid contour background with broad, warped topographic bands.

The effect replaces the source pixels. Use contourLines() to draw thin contour lines over existing content instead.

Preview​

Drag current effect onto a layer in the Studio

Example​

MyComp.tsx
import {liquidContours} from '@remotion/effects/liquid-contours';
import {Solid, useCurrentFrame} from 'remotion';

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

  return (
    <Solid
      width={1280}
      height={720}
      effects={[
        liquidContours({
          firstColor: '#ff1a0a',
          secondColor: '#050505',
          spacing: 62,
          scale: 300,
          complexity: 0,
          smoothness: 1,
          seed: 4,
          offsetX: 13.4,
          phase: 3.23 + frame / 90,
        }),
      ]}
    />
  );
};

API​

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

firstColor?​

Color of the first set of alternating bands. Defaults to '#ff1a0a'.

secondColor?​

Color of the second set of alternating bands. Defaults to '#050505'.

spacing?​

Width of a pair of bands in pixels. Defaults to 62. Must be greater than 0.

scale?​

Size of the generated shapes in pixels. Defaults to 300. Must be greater than 0.

complexity?​

Amount of small-scale detail from 0 to 1. Defaults to 0.

smoothness?​

Edge softness from 0 to 1. Defaults to 1.

seed?​

Seed for the deterministic contour field. Defaults to 4.

Change it to generate a different pattern.

offsetX?​

Horizontal pattern offset in pixels. Defaults to 13.4.

offsetY?​

Vertical pattern offset in pixels. Defaults to 0.

phase?​

Shifts the alternating bands. Defaults to 3.23.

Animate this value with useCurrentFrame() to make the bands flow.

disabled?​

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

Requirements​

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

See also​