Skip to main content

linearProgressivePixelate()v4.0.490

Part of the @remotion/effects package.

A pixelation effect whose block size changes across a two-stop linear gradient.

Use it for progressive mosaics, focus transitions, and directional pixelation 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 {linearProgressivePixelate} from '@remotion/effects/linear-progressive-pixelate';

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

API​

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

start?​

UV coordinate where startBlockSize is reached. Defaults to [0, 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 stop outside the visible area.

end?​

UV coordinate where endBlockSize is reached. Defaults to [1, 0.5].

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 end, 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 along the start to end line.

Before start, the size is clamped to startBlockSize. After end, it is clamped to endBlockSize.

Requirements​

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

See also​