Skip to main content

zoomBlur()v4.0.480

Part of the @remotion/effects package.

A radial zoom blur that smears pixels away from a configurable center point. It can be applied to canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

Preview​

Drag current effect onto a layer in the Studio

Example​

MyComp.tsx
import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';
import {Video} from '@remotion/media';
import {zoomBlur} from '@remotion/effects/zoom-blur';

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
  const amount = interpolate(frame, [0, 20], [80, 0], {
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          zoomBlur({
            amount,
            center: [0.25, 0.5],
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API​

Pass an object with the following properties.

amount?​

The blur strength in pixels. Defaults to 40.

Set to 0 to leave the source unchanged.

center?​

The origin of the blur in UV coordinates. Defaults to [0.5, 0.5].

Use [0, 0.5] for a center on the left edge, [1, 0.5] for a center on the right edge, and [0.5, 0.5] for a centered zoom blur.

samples?​

The number of samples used to average the blur. Defaults to 24.

Higher values are smoother and more expensive to render. Must be an integer between 1 and 64.

disabled?​

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

Requirements​

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

See also​