blur()<AvailableFrom v="4.0.465" />

Part of the @remotion/effects package.

A Gaussian blur that can be applied to canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>..

Preview

Example

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

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[blur({radius: 8})]}
      />
    </AbsoluteFill>
  );
};

API

Pass an object with the following properties.

radius

The blur radius in pixels. Must be a finite number.

horizontal?

Whether to blur along the horizontal axis. Defaults to true.

vertical?

Whether to blur along the vertical axis. Defaults to true.

Set one axis to false for a directional blur:

effects={[blur({radius: 8, horizontal: true, vertical: false})]}

disabled?

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

Requirements

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

See also

• @remotion/effects
• HTML-in-canvas guide
• Source code for this effect