packages/docs/docs/effects/zoom-blur.mdx
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>.
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>
);
};
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.
zoomBlur() uses a WebGL2 backend. See Using WebGL and WebGPU during renders.