Skip to main content

whiteNoise()v4.0.470

Part of the @remotion/effects package.

Replaces or blends canvas-based components such as <Video>, <HtmlInCanvas> and <Solid> with a grayscale white noise layer.

Use it for TV static, signal loss, or snow-like visuals. For subtle additive film grain, use noise() instead.

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

Difference from noise()​

whiteNoise() blends the source towards a random grayscale image. By default, it fully replaces visible pixels with white noise.

noise() adds centered noise to the existing pixels instead. It is better suited for subtle grain while preserving the image.

Preview​

Example​

MyComp.tsx
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
import {whiteNoise} from '@remotion/effects/white-noise';

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

API​

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

amount?​

Blend amount from 0 to 1. Defaults to 1.

Use 0 to leave the layer unchanged. Use 1 to fully replace the image with white noise inside the source alpha mask.

seed?​

Seed for the random noise pattern. Defaults to 0.

Change it to get a different static white noise pattern. To animate the noise, pass a value derived from useCurrentFrame().

disabled?​

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

Requirements​

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

See also​