ContextQMD
Back to Remotion

pixelDissolve()

packages/docs/docs/effects/pixel-dissolve.mdx

4.0.4742.0 KB
Original Source

pixelDissolve()<AvailableFrom v="4.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

<EffectsDemo type="effects-pixel-dissolve" />

Example

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('angle'). See Using WebGL during renders.

See also