// lightweight react animation
dot-anime-react
Lightweight dot matrix animation components for React.
Zero dependencies. 3KB gzipped. TypeScript ready.
$ npm i dot-anime-react
> MIT Licensed · TypeScript · Zero Dependencies
────────────────────────────────────────────────────────────
// features
{ }
Zero Deps
Pure React implementation, no external dependencies
TS
TypeScript
Full type definitions included
3KB
Lightweight
Only 3KB gzipped bundle size
// quick start
App.tsx
// 1. Import
import { DotMatrix } from 'dot-anime-react'
// 2. Define frames (dot indices per frame)
const sequence = [
[24], // center dot
[17, 23, 25, 31], // cross pattern
[10, 16, 18, 24, 30, 32, 38],
]
// 3. Render
export default () => <DotMatrix sequence={sequence} />// components
// how it works
7×7 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 index = row × cols + col frame = [indices to activate] sequence = [frame1, frame2, ...]
