Add zoom blur effect

Author: JonnyBurger

packages/docs/components/effects-demos/registry.ts

@@ -34,6 +34,7 @@ import {wave} from '@remotion/effects/wave';
 import {waves} from '@remotion/effects/waves';
 import {whiteNoise} from '@remotion/effects/white-noise';
 import {zigzag} from '@remotion/effects/zigzag';
+import {zoomBlur} from '@remotion/effects/zoom-blur';
 import {lightLeakEffectSchema} from '@remotion/light-leaks';
 import {starburstEffectSchema} from '@remotion/starburst';
 import {EffectsBarrelDistortionPreview} from '../effects/effects-barrel-distortion-preview';
@@ -80,6 +81,7 @@ import {EffectsWavePreview} from '../effects/effects-wave-preview';
 import {EffectsWavesPreview} from '../effects/effects-waves-preview';
 import {EffectsWhiteNoisePreview} from '../effects/effects-white-noise-preview';
 import {EffectsZigzagPreview} from '../effects/effects-zigzag-preview';
+import {EffectsZoomBlurPreview} from '../effects/effects-zoom-blur-preview';
 import type {EffectsDemoType} from './types';
 
 const defaults = {
@@ -338,6 +340,14 @@ export const effectsDemos: EffectsDemoType[] = [
 		comp: EffectsLinearProgressiveBlurPreview,
 		schema: linearProgressiveBlur().definition.schema,
 	},
+	{
+		...defaults,
+		id: 'effects-zoom-blur',
+		effectName: 'zoomBlur',
+		effectImportPath: '@remotion/effects/zoom-blur',
+		comp: EffectsZoomBlurPreview,
+		schema: zoomBlur().definition.schema,
+	},
 	{
 		...defaults,
 		id: 'effects-chromatic-aberration',

packages/docs/components/effects/effects-zoom-blur-preview.tsx

@@ -0,0 +1,20 @@
+import {zoomBlur} from '@remotion/effects/zoom-blur';
+import React from 'react';
+import {CanvasImage} from 'remotion';
+import {EFFECTS_PREVIEW_IMAGE_SRC} from './effects-preview-image';
+
+export const EffectsZoomBlurPreview: React.FC<{
+	readonly amount: number;
+	readonly center: readonly [number, number];
+	readonly samples: number;
+}> = ({amount, center, samples}) => {
+	return (
+		<CanvasImage
+			src={EFFECTS_PREVIEW_IMAGE_SRC}
+			width={1280}
+			height={720}
+			fit="cover"
+			effects={[zoomBlur({amount, center, samples})]}
+		/>
+	);
+};

packages/docs/docs/effects/table-of-contents.tsx

@@ -105,6 +105,13 @@ const categories: {
 				name: 'linearProgressiveBlur()',
 				description: 'Gradient-controlled blur effect',
 			},
+			{
+				link: '/docs/effects/zoom-blur',
+				preview: '/img/effects-zoom-blur-preview.png',
+				alt: 'zoom blur effect preview',
+				name: 'zoomBlur()',
+				description: 'Radial zoom blur effect',
+			},
 			{
 				link: '/docs/effects/drop-shadow',
 				preview: '/img/effects-drop-shadow-preview.png',

packages/docs/docs/effects/zoom-blur.mdx

@@ -0,0 +1,84 @@
+---
+image: /generated/articles-docs-effects-zoom-blur.png
+slug: /effects/zoom-blur
+title: zoomBlur()
+sidebar_label: zoomBlur()
+crumb: '@remotion/effects'
+---
+
+# zoomBlur()<AvailableFrom v="4.0.476" />
+
+_Part of the [`@remotion/effects`](/docs/effects/api) 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>`](/docs/media/video), [`<HtmlInCanvas>`](/docs/remotion/html-in-canvas) and [`<Solid>`](/docs/solid).
+
+## Preview
+
+<EffectsDemo type="effects-zoom-blur" />
+
+## Example
+
+```tsx twoslash title="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')`](/docs/config#setchromiumopenglrenderer). See [Using WebGL during renders](/docs/remotion/html-in-canvas#using-webgl-during-renders).
+
+## See also
+
+- [`@remotion/effects`](/docs/effects/api)
+- [`blur()`](/docs/effects/blur)
+- [`linearProgressiveBlur()`](/docs/effects/linear-progressive-blur)
+- [HTML-in-canvas guide](/docs/html-in-canvas)
+- [Source code for this effect](https://github.com/remotion-dev/remotion/blob/main/packages/effects/src/zoom-blur/index.ts)

packages/docs/sidebars.ts

@@ -307,6 +307,7 @@ const sidebars: SidebarsConfig = {
 				'effects/white-noise',
 				'effects/xy-translate',
 				'effects/zigzag',
+				'effects/zoom-blur',
 			],
 		},
 		{

packages/docs/src/data/articles.ts

@@ -2069,6 +2069,15 @@ export const articles = [
 		noAi: false,
 		slug: 'effects/zigzag',
 	},
+	{
+		id: 'effects/zoom-blur',
+		title: 'zoomBlur()',
+		relativePath: 'docs/effects/zoom-blur.mdx',
+		compId: 'articles-docs-effects-zoom-blur',
+		crumb: '@remotion/effects',
+		noAi: false,
+		slug: 'effects/zoom-blur',
+	},
 	{
 		id: 'electron',
 		title: 'Using Remotion in Electron',

packages/docs/src/remotion/Root.tsx

@@ -47,6 +47,7 @@ import {EffectsWavePreview} from '../../components/effects/effects-wave-preview'
 import {EffectsWavesPreview} from '../../components/effects/effects-waves-preview';
 import {EffectsWhiteNoisePreview} from '../../components/effects/effects-white-noise-preview';
 import {EffectsZigzagPreview} from '../../components/effects/effects-zigzag-preview';
+import {EffectsZoomBlurPreview} from '../../components/effects/effects-zoom-blur-preview';
 import {articles} from '../data/articles';
 import {AllTemplates} from './AllTemplates';
 import {Article} from './Article';
@@ -303,6 +304,13 @@ export const RemotionRoot: React.FC = () => {
 						endBlur: 50,
 					}}
 				/>
+				<Still
+					id="effects-zoom-blur-preview"
+					component={EffectsZoomBlurPreview}
+					width={1280}
+					height={720}
+					defaultProps={{amount: 80, center: [0.22, 0.5], samples: 32}}
+				/>
 				<Still
 					id="effects-wave-preview"
 					component={EffectsWavePreview}

packages/docs/static/generated/articles-docs-effects-zoom-blur.png

@@ -43,6 +43,7 @@ const effectEntrypoints = [
 	'src/waves.ts',
 	'src/zigzag.ts',
 	'src/white-noise.ts',
+	'src/zoom-blur.ts',
 ];
 
 console.time('Generated.');