ContextQMD
Back to Remotion

barrelDistortion()

packages/docs/docs/effects/barrel-distortion.mdx

4.0.4671.7 KB
Original Source

barrelDistortion()<AvailableFrom v="4.0.466" />

Part of the @remotion/effects package.

A barrel distortion effect that bends canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

It only applies geometric curvature. It does not add scanlines, blur, glow, chromatic aberration, noise, vignette, or color changes.

Preview

<Demo type="effects-barrel-distortion" />

Example

tsx
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
import {barrelDistortion} from '@remotion/effects/barrel-distortion';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          barrelDistortion({
            amount: 0.25,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API

Pass an object with the following properties.

amount?

Curvature strength from 0 to 1. Defaults to 0.25.

Use 0 for no distortion.

disabled?

When true, the effect is skipped. Defaults to false.

Requirements

barrelDistortion() uses a WebGL2 backend. During renders, enable WebGL via Config.setChromiumOpenGlRenderer() (for example 'angle'). See Using WebGL during renders.

See also