ContextQMD
Back to Remotion

speckle()

packages/docs/docs/effects/speckle.mdx

4.0.4862.1 KB
Original Source

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

Part of the @remotion/effects package.

Adds small random alpha holes to canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

Use it for isolated pinpricks or dust-like missing spots without adding edge damage or a broader grunge texture.

Preview

<EffectsDemo type="effects-speckle" />

Example

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

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          speckle({
            density: 0.14,
            size: 4,
            randomness: 1,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API

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

density?

Chance that each grid cell receives a hole. Defaults to 0.08.

Must be between 0 and 1.

size?

Maximum diameter of each alpha hole in pixels. Defaults to 4.

Must be at least 0. Set it to 0 to preserve the source.

randomness?

Controls how much each hole varies in position and size. Defaults to 1.

Set it closer to 0 for a more regular pattern. Must be between 0 and 1.

disabled?

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

Requirements

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

See also