Skip to main content

fisheye()v4.0.470

Part of the @remotion/effects package.

An ultra-wide-angle fisheye lens effect for canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

Pixels near the center are magnified while content near the edges is radially compressed, mimicking the look of a fisheye lens.

Preview​

Example​

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() (for example 'angle'). See Using WebGL during renders.

See also​