Skip to main content

regionBlur()v4.0.507

Part of the @remotion/effects package.

Applies a Gaussian blur inside a rectangular or rounded region.

Use it to obscure faces, license plates, documents, and other sensitive parts of canvas-based components such as <Video>, <HtmlInCanvas>, and <Solid>.

Preview​

Drag current effect onto a layer in the Studio

Example​

MyComp.tsx
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
import {regionBlur} from '@remotion/effects/region-blur';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          regionBlur({
            topLeft: [0.3, 0.2],
            bottomRight: [0.7, 0.8],
            blurRadius: 60,
            feather: 8,
            roundness: 1,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API​

Pass an object with the following properties.

topLeft​

Top-left corner of the blurred region in UV coordinates.

Pass a [number, number] tuple where [0, 0] is the top-left of the canvas and [1, 1] is the bottom-right. Values outside this range place the corner outside the visible area.

bottomRight​

Bottom-right corner of the blurred region in UV coordinates.

Both values must be greater than their corresponding topLeft values. Values outside the [0, 1] range are accepted.

blurRadius?​

Gaussian blur radius in pixels. Defaults to 40. Must be at least 0.

feather?​

Width of the softened region edge in pixels. Defaults to 0. Must be at least 0.

Feathering blends the original image into the edge of the blurred region. For anonymization, make the region large enough that recognizable details remain inside the fully blurred area.

roundness?​

Corner roundness from 0 to 1. Defaults to 0.

0 creates a rectangle. 1 creates a circle for a square region or a pill for a rectangular region.

disabled?​

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

Requirements​

regionBlur() uses a WebGL2 backend. See Using WebGL and WebGPU during renders.

See also​