packages/docs/docs/effects/liquid-contours.mdx
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.
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,
}),
]}
/>
);
};
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.
liquidContours() uses a WebGL2 backend. During renders, enable WebGL via Config.setChromiumOpenGlRenderer('angle'). See Using WebGL during renders.