@remotion/effects: fisheye() effect

packages/docs/components/demos/index.tsx

@@ -24,6 +24,7 @@ import {
 	effectsContrastDemo,
 	effectsDropShadowDemo,
 	effectsDuotoneDemo,
+	effectsFisheyeDemo,
 	effectsGlowDemo,
 	effectsGrayscaleDemo,
 	effectsHalftoneDemo,
@@ -122,6 +123,7 @@ const demos: DemoType[] = [
 	effectsXyTranslateDemo,
 	effectsUvTranslateDemo,
 	effectsBarrelDistortionDemo,
+	effectsFisheyeDemo,
 	effectsVignetteDemo,
 	effectsBlurDemo,
 	effectsChromaticAberrationDemo,

packages/docs/components/demos/types.ts

@@ -7,6 +7,7 @@ import {EffectsContrastPreview} from '../effects/effects-contrast-preview';
 import {EffectsDotGridPreview} from '../effects/effects-dot-grid-preview';
 import {EffectsDropShadowPreview} from '../effects/effects-drop-shadow-preview';
 import {EffectsDuotonePreview} from '../effects/effects-duotone-preview';
+import {EffectsFisheyePreview} from '../effects/effects-fisheye-preview';
 import {EffectsGlowPreview} from '../effects/effects-glow-preview';
 import {EffectsGrayscalePreview} from '../effects/effects-grayscale-preview';
 import {EffectsHalftoneLinearGradientPreview} from '../effects/effects-halftone-linear-gradient-preview';
@@ -2023,6 +2024,56 @@ export const effectsBarrelDistortionDemo: DemoType = {
 	],
 };
 
+export const effectsFisheyeDemo: DemoType = {
+	comp: EffectsFisheyePreview,
+	compHeight: 720,
+	compWidth: 1280,
+	durationInFrames: 1,
+	fps: 30,
+	id: 'effects-fisheye',
+	autoPlay: false,
+	controls: false,
+	logLevel: 'info',
+	options: [
+		{
+			name: 'fieldOfView',
+			type: 'numeric',
+			min: 0,
+			max: Math.PI,
+			step: 0.01,
+			default: 2.5,
+			optional: 'no',
+		},
+		{
+			name: 'center',
+			type: 'uv-coordinate',
+			min: 0,
+			max: 1,
+			step: 0.01,
+			default: [0.5, 0.5],
+			optional: 'no',
+		},
+		{
+			name: 'radius',
+			type: 'numeric',
+			min: 0.01,
+			max: 3,
+			step: 0.01,
+			default: 1.2,
+			optional: 'no',
+		},
+		{
+			name: 'zoom',
+			type: 'numeric',
+			min: 0.1,
+			max: 5,
+			step: 0.01,
+			default: 1,
+			optional: 'no',
+		},
+	],
+};
+
 export const effectsNoiseDemo: DemoType = {
 	comp: EffectsNoisePreview,
 	compHeight: 720,

packages/docs/components/effects/effects-fisheye-preview.tsx

@@ -0,0 +1,29 @@
+import type {FisheyeUvCoordinate} from '@remotion/effects/fisheye';
+import {fisheye} from '@remotion/effects/fisheye';
+import React from 'react';
+import {CanvasImage} from 'remotion';
+import {EFFECTS_PREVIEW_IMAGE_SRC} from './effects-preview-image';
+
+export const EffectsFisheyePreview: React.FC<{
+	readonly fieldOfView: number;
+	readonly radius: number;
+	readonly zoom: number;
+	readonly center: FisheyeUvCoordinate;
+}> = ({fieldOfView, radius, zoom, center}) => {
+	return (
+		<CanvasImage
+			src={EFFECTS_PREVIEW_IMAGE_SRC}
+			width={1280}
+			height={720}
+			fit="cover"
+			effects={[
+				fisheye({
+					fieldOfView,
+					radius,
+					zoom,
+					center,
+				}),
+			]}
+		/>
+	);
+};

packages/docs/docs/effects/fisheye.mdx

@@ -0,0 +1,79 @@
+---
+image: /generated/articles-docs-effects-fisheye.png
+slug: /effects/fisheye
+title: fisheye()
+sidebar_label: fisheye()
+crumb: '@remotion/effects'
+---
+
+# fisheye()<AvailableFrom v="4.0.470" />
+
+_Part of the [`@remotion/effects`](/docs/effects/api) package._
+
+An ultra-wide-angle fisheye lens effect for canvas-based components such as [`<Video>`](/docs/media/video), [`<HtmlInCanvas>`](/docs/remotion/html-in-canvas) and [`<Solid>`](/docs/solid).
+
+Pixels near the center are magnified while content near the edges is radially compressed, mimicking the look of a fisheye lens.
+
+## Preview
+
+<Demo type="effects-fisheye" />
+
+## Example
+
+```tsx twoslash title="MyComp.tsx"
+import {AbsoluteFill} from 'remotion';
+import {Video} from '@remotion/media';
+import {fisheye} from '@remotion/effects/fisheye';
+
+export const MyComp: React.FC = () => {
+  return (
+    <AbsoluteFill>
+      <Video
+        src="https://remotion.media/video.mp4"
+        effects={[
+          fisheye({
+            fieldOfView: 2.5,
+          }),
+        ]}
+      />
+    </AbsoluteFill>
+  );
+};
+```
+
+## API
+
+Pass an object with the following properties.
+
+### `fieldOfView?`
+
+Lens field of view in radians, from `0` to `Math.PI` (180°). Higher values produce a stronger fisheye distortion. Defaults to `2.5` (≈ 143°).
+
+Use `0` to disable the warp.
+
+### `center?`
+
+UV coordinate of the lens center as a `[u, v]` tuple. `[0, 0]` is the top-left of the source and `[1, 1]` is the bottom-right. Defaults to `[0.5, 0.5]`.
+
+### `radius?`
+
+Radius of the lens area in normalized units, where `1` covers the full vertical extent of the source. Pixels outside this radius are sampled without warping. Defaults to `1`.
+
+### `zoom?`
+
+Post-warp zoom factor. Values above `1` zoom in, values below `1` zoom out. Defaults to `1`.
+
+### `disabled?`
+
+When `true`, the effect is skipped. Defaults to `false`.
+
+## Requirements
+
+`fisheye()` uses a WebGL2 backend. During renders, enable WebGL via [`Config.setChromiumOpenGlRenderer()`](/docs/config#setchromiumopenglrenderer) (for example `'angle'`). See [Using WebGL during renders](/docs/remotion/html-in-canvas#using-webgl-during-renders).
+
+## See also
+
+- [`@remotion/effects`](/docs/effects/api)
+- [`barrelDistortion()`](/docs/effects/barrel-distortion)
+- [`wave()`](/docs/effects/wave)
+- [Source code for this effect](https://github.com/remotion-dev/remotion/blob/main/packages/effects/src/fisheye/index.ts)

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

@@ -151,6 +151,13 @@ const categories: {
 				name: 'chromaticAberration()',
 				description: 'RGB channel split effect',
 			},
+			{
+				link: '/docs/effects/fisheye',
+				preview: '/img/effects-fisheye-preview.png',
+				alt: 'fisheye effect preview',
+				name: 'fisheye()',
+				description: 'Ultra-wide-angle lens effect',
+			},
 			{
 				link: '/docs/effects/wave',
 				preview: '/img/effects-wave-preview.png',

packages/docs/sidebars.ts

@@ -275,6 +275,7 @@ const sidebars: SidebarsConfig = {
 				'effects/contrast',
 				'effects/drop-shadow',
 				'effects/duotone',
+				'effects/fisheye',
 				'effects/glow',
 				'effects/grayscale',
 				'effects/halftone',

packages/docs/src/data/articles.ts

@@ -1790,6 +1790,15 @@ export const articles = [
 		noAi: false,
 		slug: 'effects/duotone',
 	},
+	{
+		id: 'effects/fisheye',
+		title: 'fisheye()',
+		relativePath: 'docs/effects/fisheye.mdx',
+		compId: 'articles-docs-effects-fisheye',
+		crumb: '@remotion/effects',
+		noAi: false,
+		slug: 'effects/fisheye',
+	},
 	{
 		id: 'effects/glow',
 		title: 'glow()',

packages/docs/src/remotion/Root.tsx

@@ -10,6 +10,7 @@ import {EffectsContrastPreview} from '../../components/effects/effects-contrast-
 import {EffectsDotGridPreview} from '../../components/effects/effects-dot-grid-preview';
 import {EffectsDropShadowPreview} from '../../components/effects/effects-drop-shadow-preview';
 import {EffectsDuotonePreview} from '../../components/effects/effects-duotone-preview';
+import {EffectsFisheyePreview} from '../../components/effects/effects-fisheye-preview';
 import {EffectsGlowPreview} from '../../components/effects/effects-glow-preview';
 import {EffectsGrayscalePreview} from '../../components/effects/effects-grayscale-preview';
 import {EffectsHalftoneLinearGradientPreview} from '../../components/effects/effects-halftone-linear-gradient-preview';
@@ -226,6 +227,18 @@ export const RemotionRoot: React.FC = () => {
 					height={720}
 					defaultProps={{amount: 0.28}}
 				/>
+				<Still
+					id="effects-fisheye-preview"
+					component={EffectsFisheyePreview}
+					width={1280}
+					height={720}
+					defaultProps={{
+						fieldOfView: 2.5,
+						radius: 1.2,
+						zoom: 1,
+						center: [0.5, 0.5],
+					}}
+				/>
 				<Still
 					id="effects-chromatic-aberration-preview"
 					component={EffectsChromaticAberrationPreview}

packages/effects/bundle.ts

@@ -14,6 +14,7 @@ const effectEntrypoints = [
 	'src/contrast.ts',
 	'src/drop-shadow.ts',
 	'src/duotone.ts',
+	'src/fisheye.ts',
 	'src/glow.ts',
 	'src/grayscale.ts',
 	'src/halftone-linear-gradient.ts',

packages/effects/package.json

@@ -69,6 +69,11 @@
 			"module": "./dist/esm/duotone.mjs",
 			"import": "./dist/esm/duotone.mjs"
 		},
+		"./fisheye": {
+			"types": "./dist/fisheye.d.ts",
+			"module": "./dist/esm/fisheye.mjs",
+			"import": "./dist/esm/fisheye.mjs"
+		},
 		"./glow": {
 			"types": "./dist/glow.d.ts",
 			"module": "./dist/esm/glow.mjs",
@@ -194,6 +199,9 @@
 			"duotone": [
 				"dist/duotone.d.ts"
 			],
+			"fisheye": [
+				"dist/fisheye.d.ts"
+			],
 			"glow": [
 				"dist/glow.d.ts"
 			],

packages/effects/src/fisheye.ts

@@ -0,0 +1 @@
+export {fisheye, type FisheyeParams} from './fisheye/index.js';