Skip to main content

linearProgressiveBlur()v4.0.472

Part of the @remotion/effects package.

A Gaussian blur whose radius changes across a two-stop linear gradient.

Use it for depth-of-field, focus pulls, and directional softening on canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

Preview​

Drag current effect into a layer in the Studio

Example​

MyComp.tsx
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
import {linearProgressiveBlur} from '@remotion/effects/linear-progressive-blur';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          linearProgressiveBlur({
            start: [0, 0.5],
            end: [1, 0.5],
            startBlur: 0,
            endBlur: 50,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API​

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

start?​

UV coordinate where startBlur is reached. Defaults to [0, 0.5].

Pass a [number, number] tuple where [0, 0] is top-left and [1, 1] is bottom-right.

The accepted range in the visual editor is [-1, 2] for each coordinate. Values outside [0, 1] place the stop outside the visible area.

end?​

UV coordinate where endBlur is reached. Defaults to [1, 0.5].

Pass a [number, number] tuple.

startBlur?​

Blur radius in pixels at start. Defaults to 0.

Negative values are clamped to 0.

endBlur?​

Blur radius in pixels at end. Defaults to 50.

Negative values are clamped to 0.

disabled?​

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

Behavior​

The blur radius is interpolated between startBlur and endBlur along the start to end line.

Before start, the radius is clamped to startBlur. After end, the radius is clamped to endBlur.

Requirements​

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

See also​