ContextQMD
Back to Remotion

dotGrid()

packages/docs/docs/effects/dot-grid.mdx

4.0.4822.5 KB
Original Source

dotGrid()<AvailableFrom v="4.0.469" />

Part of the @remotion/effects package.

An effect that turns a canvas-based component into evenly sized source-color dots.

Use it for dotted masks on <Video>, <HtmlInCanvas> and <Solid>.

Preview

<EffectsDemo type="effects-dot-grid" />

Example

tsx
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
import {dotGrid} from '@remotion/effects/dot-grid';

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

To cut transparent dots out of the source instead, set invert to true:

tsx
import {AbsoluteFill} from 'remotion';
import {Video} from '@remotion/media';
import {dotGrid} from '@remotion/effects/dot-grid';

export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/video.mp4"
        effects={[
          dotGrid({
            dotSize: 10,
            gridSize: 24,
            invert: true,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API

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

dotSize?

Diameter of each circular dot in pixels. Defaults to 16. Must be at least 0.

gridSize?

Distance between adjacent dot centers in pixels. Defaults to 20. Must be greater than 0.

invert?

When false, only the circular dots reveal the source. When true, the source is kept and circular dot cutouts are removed. Defaults to false.

disabled?

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

Requirements

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

See also