●
dot-anime-react
>docs

Getting Started · 2 min read

Quick Start

Create your first dot matrix animation in minutes

Quick Start

Let's create your first dot matrix animation step by step.

Understanding the Grid

DotMatrix uses a simple index-based grid system. Each dot in the grid has a unique index:

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

Creating a Pulse Animation

Here's a simple pulse animation that expands from the center:

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

const pulseSequence = [
  [24],                              // Frame 1: center dot
  [17, 23, 25, 31],                  // Frame 2: cross pattern
  [10, 16, 18, 24, 30, 32, 38],      // Frame 3: larger cross
  [17, 23, 25, 31],                  // Frame 4: back to small cross
  [24],                              // Frame 5: back to center
];

function PulseAnimation() {
  return (
    <DotMatrix
      sequence={pulseSequence}
      cols={7}
      rows={7}
      dotSize={10}
      gap={5}
      interval={120}
      color="#34d399"
      inactiveColor="rgba(52, 211, 153, 0.1)"
    />
  );
}
✓

Each frame is an array of dot indices that should be active during that frame.

Customizing the Animation

Change the Speed

Adjust the interval prop to control animation speed (in milliseconds):

<DotMatrix
  sequence={pulseSequence}
  interval={200}  // Slower animation
/>

Change the Colors

Use the color and inactiveColor props:

<DotMatrix
  sequence={pulseSequence}
  color="#60a5fa"           // Active dot color
  inactiveColor="#60a5fa20" // Inactive dot color (with alpha)
/>

Add Glow Effect

Use activeDotStyle to add a glow effect:

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

Next Steps