dot-anime-react：轻量级 React 点阵动画库

npm install dot-anime-react

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"
/>

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

Formula: index = row × cols + col

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}
/>

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

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

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

// 二进制风格
<ScrambleText text="Loading..." chars="01" />

// 符号风格
<ScrambleText text="Processing" chars="!@#$%^&*()_+-=[]{}|;:,.<>?" />

// 日文片假名
<ScrambleText text="アニメーション" chars="アイウエオカキクケコサシスセソタチツテト" />

import { useState } from "react";

function ControlledScramble() {
  const [text, setText] = useState("Initial");
  return (
    <div>
      <ScrambleText text={text} />
      <button onClick={() => setText("Updated!")}>
        Change Text
      </button>
    </div>
  );
}

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

const items = [
  {
    title: "Loading",
    frames: [[24], [17, 23, 25, 31], [24]],
  },
  {
    title: "Processing",
    frames: [[21, 22, 23], [22, 23, 24], [23, 24, 25]],
  },
  {
    title: "Complete",
    frames: [[16, 18, 30, 32], [24]],
  },
];

<DotFlow
  items={items}
  autoPlay={2000}
  direction="horizontal"
/>

interface DotFlowItem {
  title: string;      // 显示的文本
  frames: number[][]; // 该项目的动画帧
}

<DotFlow
  items={items}
  direction="vertical"
  spacing={12}
/>

<DotFlow
  items={items}
  matrix={{
    cols: 5,
    rows: 5,
    dotSize: 6,
    gap: 3,
    color: "#60a5fa",
    inactiveColor: "#60a5fa20",
  }}
/>

import { useState } from "react";

function ControlledDotFlow() {
  const [index, setIndex] = useState(0);
  return (
    <div>
      <DotFlow
        items={items}
        activeIndex={index}
        onChange={setIndex}
      />
      <div>
        {items.map((_, i) => (
          <button key={i} onClick={() => setIndex(i)}>
            {i + 1}
          </button>
        ))}
      </div>
    </div>
  );
}