ContextQMD
Back to Remotion

noise()

packages/docs/docs/effects/noise.mdx

4.0.4692.1 KB
Original Source

noise()<AvailableFrom v="4.0.469" />

Part of the @remotion/effects package.

Adds centered procedural noise to canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

The effect preserves the source alpha mask. Transparent regions stay transparent.

Preview

<Demo type="effects-noise" />

Example

tsx
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
import {noise} from '@remotion/effects/noise';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          noise({
            amount: 0.25,
            seed: 7,
            premultiply: false,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API

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

amount?

Strength from 0 to 1. Defaults to 0.15.

Use 0 to leave the layer unchanged.

seed?

Seed for the random noise pattern. Defaults to 0.

Change it to get a different static noise pattern. The noise is visible without animating the seed. To animate the noise, pass a value derived from useCurrentFrame().

premultiply?

Whether the centered noise is multiplied with the input colors before being added. Defaults to false.

Set to true for a subtler noise that follows the source brightness more closely.

disabled?

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

Requirements

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

See also