Skip to main content

radialProgressivePixelate()v4.0.490

Part of the @remotion/effects package.

A pixelation effect whose block size changes from the center to the edge of an ellipse.

Use it for pixelated focus regions, spotlight transitions, and radial mosaics on canvas-based components such as <Video>, <HtmlInCanvas>, and <Solid>.

Preview​

Drag current effect onto a layer in the Studio

Example​

MyComp.tsx
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
import {radialProgressivePixelate} from '@remotion/effects/radial-progressive-pixelate';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          radialProgressivePixelate({
            center: [0.5, 0.5],
            width: 1,
            height: 1,
            rotation: 0,
            start: 0.4,
            startBlockSize: 1,
            endBlockSize: 40,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API​

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

center?​

Center of the ellipse in UV coordinates. Defaults to [0.5, 0.5].

Pass a [number, number] tuple where [0, 0] is top-left and [1, 1] is bottom-right. Values outside that range place the center outside the visible area.

width?​

Full ellipse width in UV coordinates. Defaults to 1.

height?​

Full ellipse height in UV coordinates. Defaults to 1.

rotation?​

Ellipse rotation in degrees. Defaults to 0.

start?​

Normalized ellipse progress where interpolation starts. Defaults to 0.

0 is the center. 1 is the outer ellipse defined by width, height, and rotation.

startBlockSize?​

Target pixel block size at start, in pixels. Defaults to 1, which leaves the source unchanged. Must be at least 1.

endBlockSize?​

Target pixel block size at the outer ellipse, in pixels. Defaults to 40. Must be at least 1.

disabled?​

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

Behavior​

The target block size is interpolated between startBlockSize and endBlockSize from start to the outer ellipse.

Before start, the size is clamped to startBlockSize. At and beyond the outer ellipse, it is clamped to endBlockSize.

Swap the block sizes to pixelate the center and keep the outside clear.

Requirements​

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

See also​