Skip to main content

checkerboard()v4.0.480

Part of the @remotion/effects package.

Adds a repeating checkerboard pattern to canvas-based components such as <Video>, <HtmlInCanvas> and <Solid>.

It uses the same color, gap, angle and alpha masking controls as lines(), but repeats square cells on both axes.

Preview​

Drag current effect onto a layer in the Studio

Example​

MyComp.tsx
import {checkerboard} from '@remotion/effects/checkerboard';
import {AbsoluteFill, Solid, useCurrentFrame} from 'remotion';

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill>
      <Solid
        width={1280}
        height={720}
        effects={[
          checkerboard({
            colors: ['#dff4ff', '#7cc6ff'],
            cellSize: 80,
            gap: 0,
            angle: 15,
            offsetX: frame * 2,
            offsetY: frame,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

API​

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

colors?​

An array of color strings for the checker cells. Colors are assigned cyclically. Must contain at least 2 colors.

Defaults to ['#dff4ff', '#7cc6ff'].

cellSize?​

Size of each square cell in pixels. Defaults to 80.

gap?​

Transparent gap in pixels between cells. Defaults to 0.

With gap: 0 (the default), cells are packed solid with no gap between them.
With gap > 0, the source content shows through between cells.

angle?​

Rotates the checkerboard pattern in degrees. Defaults to 0.

offsetX?​

Horizontal offset in pixels. Defaults to 0.

Animate this value with useCurrentFrame() to scroll the checkerboard horizontally.

offsetY?​

Vertical offset in pixels. Defaults to 0.

Animate this value with useCurrentFrame() to scroll the checkerboard vertically.

maskToSourceAlpha?​

Masks the generated checkerboard pattern to the source alpha channel. Defaults to false.

Set this to true to prevent the checkerboard pattern from appearing in fully transparent source pixels.

disabled?​

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

Requirements​

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

See also​