Introduction

dot-anime-react is a lightweight React library for creating dot matrix animations. It provides a simple, declarative API for building pixel-based animations with zero dependencies.

Why dot-anime-react?

Key Features

• Zero Dependencies - Pure React implementation with no external dependencies
• TypeScript Ready - Full type definitions included out of the box
• Lightweight - Only 3KB gzipped, won't bloat your bundle
• Flexible - Highly customizable with extensive prop options
• Performant - Optimized for smooth 60fps animations

Core Components

The library provides three main components:

DotMatrix

The core component for creating dot matrix animations. Define a grid of dots and animate them using frame sequences.

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

<DotMatrix
  sequence={[[24], [17, 23, 25, 31]]}
  cols={7}
  rows={7}
/>

ScrambleText

A text animation component that creates a scramble/decode effect when text changes.

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

<ScrambleText text="Hello World" duration={400} />

DotFlow

A compound component that combines DotMatrix with ScrambleText for creating flowing, multi-item animations.

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

<DotFlow
  items={[
    { title: "Loading", frames: [...] },
    { title: "Processing", frames: [...] },
  ]}
  autoPlay={2000}
/>

Next Steps

Ready to get started? Head to the Installation guide to add dot-anime-react to your project.