From 39b6653bee5b914bd2d71c407188508cf4ab4d28 Mon Sep 17 00:00:00 2001 From: Jonny Burger Date: Sun, 31 May 2026 12:30:54 +0200 Subject: [PATCH 1/2] @remotion/effects: fisheye() effect Closes #7840 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- packages/docs/components/demos/index.tsx | 2 + packages/docs/components/demos/types.ts | 60 +++++ .../effects/effects-fisheye-preview.tsx | 29 +++ packages/docs/docs/effects/fisheye.mdx | 79 +++++++ .../docs/docs/effects/table-of-contents.tsx | 7 + packages/docs/sidebars.ts | 1 + packages/docs/src/data/articles.ts | 9 + packages/docs/src/remotion/Root.tsx | 14 ++ .../articles-docs-effects-fisheye.png | Bin 0 -> 42383 bytes .../static/img/effects-fisheye-preview.png | Bin 0 -> 946815 bytes packages/effects/bundle.ts | 1 + packages/effects/package.json | 8 + packages/effects/src/fisheye.ts | 1 + .../effects/src/fisheye/fisheye-runtime.ts | 220 ++++++++++++++++++ .../effects/src/fisheye/fisheye-shaders.ts | 68 ++++++ packages/effects/src/fisheye/index.ts | 165 +++++++++++++ .../effects/src/test/effect-params.test.ts | 54 +++++ 17 files changed, 718 insertions(+) create mode 100644 packages/docs/components/effects/effects-fisheye-preview.tsx create mode 100644 packages/docs/docs/effects/fisheye.mdx create mode 100644 packages/docs/static/generated/articles-docs-effects-fisheye.png create mode 100644 packages/docs/static/img/effects-fisheye-preview.png create mode 100644 packages/effects/src/fisheye.ts create mode 100644 packages/effects/src/fisheye/fisheye-runtime.ts create mode 100644 packages/effects/src/fisheye/fisheye-shaders.ts create mode 100644 packages/effects/src/fisheye/index.ts diff --git a/packages/docs/components/demos/index.tsx b/packages/docs/components/demos/index.tsx index e2df4fef268..e1aab7e7f78 100644 --- a/packages/docs/components/demos/index.tsx +++ b/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, diff --git a/packages/docs/components/demos/types.ts b/packages/docs/components/demos/types.ts index e6647154b42..cb60f61ec96 100644 --- a/packages/docs/components/demos/types.ts +++ b/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,65 @@ 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: 'radius', + type: 'numeric', + min: 0.01, + max: 3, + step: 0.01, + default: 1, + optional: 'no', + }, + { + name: 'zoom', + type: 'numeric', + min: 0.1, + max: 5, + step: 0.01, + default: 1, + optional: 'no', + }, + { + name: 'centerX', + type: 'numeric', + min: 0, + max: 1, + step: 0.01, + default: 0.5, + optional: 'no', + }, + { + name: 'centerY', + type: 'numeric', + min: 0, + max: 1, + step: 0.01, + default: 0.5, + optional: 'no', + }, + ], +}; + export const effectsNoiseDemo: DemoType = { comp: EffectsNoisePreview, compHeight: 720, diff --git a/packages/docs/components/effects/effects-fisheye-preview.tsx b/packages/docs/components/effects/effects-fisheye-preview.tsx new file mode 100644 index 00000000000..b001b565c1f --- /dev/null +++ b/packages/docs/components/effects/effects-fisheye-preview.tsx @@ -0,0 +1,29 @@ +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 centerX: number; + readonly centerY: number; +}> = ({fieldOfView, radius, zoom, centerX, centerY}) => { + return ( + + ); +}; diff --git a/packages/docs/docs/effects/fisheye.mdx b/packages/docs/docs/effects/fisheye.mdx new file mode 100644 index 00000000000..0611f7a7cbe --- /dev/null +++ b/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() + +_Part of the [`@remotion/effects`](/docs/effects/api) package._ + +An ultra-wide-angle fisheye lens effect for canvas-based components such as [`