Skip to main content

pixelDissolve()v4.0.471

Part of the @remotion/effects package.

A pixel dissolve effect that divides the frame into a grid and fades the cells out in a pseudo-random order while preserving the source image color.

Preview​

Drag current effect into a layer in the Studio

Example​

MyComp.tsx
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
import {pixelDissolve} from '@remotion/effects/pixel-dissolve';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          pixelDissolve({
            progress: 0.45,
            columns: 10,
            rows: 10,
            seed: 0,
            feather: 0.15,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API​

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

progress?​

How far the dissolve has progressed, from 0 to 1. Defaults to 0.5.

columns?​

Horizontal divisions across the frame. Defaults to 10. Must be an integer of at least 1.

rows?​

Vertical divisions across the frame. Defaults to 10. Must be an integer of at least 1.

seed?​

Changes the random order of the blocks. Defaults to 0.

feather?​

Softness of the dissolve edge from 0 (sharp) to 1 (fully feathered). Defaults to 0.15.

disabled?​

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

Requirements​

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

See also​