ContextQMD
Back to Remotion

fisheye()

packages/docs/docs/effects/fisheye.mdx

4.0.4702.2 KB
Original Source

fisheye()<AvailableFrom v="4.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

<Demo type="effects-fisheye" />

Example

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