Skip to main content

pixelate()v4.0.479

Part of the @remotion/effects package.

A pixelate effect that divides the image into rectangular blocks, making each block a single solid color sampled from the source. Works on canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

Use it when you want a mosaic or censored look while still controlling effect order through the effects array.

Preview​

Drag current effect into a layer in the Studio

Example​

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

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

API​

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

blockSize?​

Size of each pixel block in pixels. Defaults to 20. Must be at least 1.

disabled?​

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

Requirements​

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

See also​