Components · 2 min read

DotMatrix

Core dot matrix animation component for creating pixel-based animations

DotMatrix

The DotMatrix component is the core building block for creating dot matrix animations.

Basic Usage

import { DotMatrix } from "dot-anime-react";

const sequence = [
  [24],
  [17, 23, 25, 31],
  [10, 16, 18, 24, 30, 32, 38],
];

<DotMatrix
  sequence={sequence}
  cols={7}
  rows={7}
  dotSize={10}
  gap={5}
  interval={120}
  color="#34d399"
/>

Props

Prop	Type	Default	Description
`sequence`*	`number[][]`	-	Array of frames, each frame is an array of dot indices to activate
`cols`	`number`	7	Number of columns in the grid
`rows`	`number`	7	Number of rows in the grid
`dotSize`	`number`	8	Size of each dot in pixels
`gap`	`number`	4	Gap between dots in pixels
`interval`	`number`	100	Animation interval in milliseconds
`shape`	`'rounded' \| 'square' \| 'circle'`	'rounded'	Shape of the dots
`color`	`string`	'#10b981'	Color of active dots
`inactiveColor`	`string`	'rgba(16, 185, 129, 0.1)'	Color of inactive dots
`activeDotStyle`	`CSSProperties`	-	Additional styles for active dots

Grid Index System

Understanding the grid index system is essential for creating animations:

7x7 Grid Index Layout:

 0   1   2   3   4   5   6
 7   8   9  10  11  12  13
14  15  16  17  18  19  20
21  22  23 [24] 25  26  27   <- center
28  29  30  31  32  33  34
35  36  37  38  39  40  41
42  43  44  45  46  47  48

Formula: index = row * cols + col

Examples

Loading Animation

const loadingSequence = [
  [21, 22, 23],
  [22, 23, 24],
  [23, 24, 25],
  [24, 25, 26],
  [25, 26, 27],
  [24, 25, 26],
  [23, 24, 25],
  [22, 23, 24],
];

<DotMatrix
  sequence={loadingSequence}
  cols={7}
  rows={7}
  interval={100}
/>

Different Shapes

// Rounded corners (default)
<DotMatrix shape="rounded" />

// Square dots
<DotMatrix shape="square" />

// Circle dots
<DotMatrix shape="circle" />

With Glow Effect

<DotMatrix
  sequence={sequence}
  color="#34d399"
  activeDotStyle={{
    boxShadow: "0 0 10px #34d39980",
  }}
/>