Skip to main content

dotGrid()v4.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​

Example​

MyComp.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:

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

See also​