Skip to main content

irisWipe()v4.0.540

Part of the @remotion/effects package.

Erases the inside of a polygon or star from a canvas-based component. Animate the radius to expand or close the transparent opening.

Preview​

Drag current effect onto a layer in the Studio

Example​

MyScene.tsx
import {irisWipe} from '@remotion/effects/iris-wipe';
import {Video} from '@remotion/media';
import {interpolate, useCurrentFrame} from 'remotion';

export const MyScene: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <Video
      src="https://remotion.media/video.mp4"
      effects={[
        irisWipe({
          center: [0.5, 0.5],
          points: 6,
          outerRadius: interpolate(frame, [0, 60], [0, 1500], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
          }),
          feather: 12,
        }),
      ]}
    />
  );
};

The final radius of 1500 pixels covers a centered opening on a 1920×1080 canvas. Increase it for larger canvases.

API​

Pass an object with the following properties. You can also call irisWipe() without arguments.

center?​

Center of the opening as [x, y], with both values between 0 and 1. [0, 0] is the top-left corner and [1, 1] is the bottom-right corner. Defaults to [0.5, 0.5].

points?​

Number of polygon vertices, or outer points when useInnerRadius is true. Must be an integer from 3 to 64. Defaults to 6.

outerRadius?​

Distance from the center to each outer vertex in pixels. Must be at least 0. Defaults to 0, leaving the source unchanged.

useInnerRadius?​

When true, adds vertices at innerRadius between the outer vertices to create a star. Defaults to false, creating a regular polygon.

innerRadius?​

Distance from the center to each inner vertex in pixels. Used when useInnerRadius is true. Must be at least 0. Defaults to 0.

rotation?​

Rotation of the shape in degrees, clockwise from up. At 0, the first outer vertex points upward. Defaults to 0.

feather?​

Width of the soft edge in pixels. Must be at least 0. Defaults to 0, creating a sharp edge.

disabled?​

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

Implementations​

See: Preferred effect backend.

See also​