Components · 2 min read

DotFlow

Compound component for creating multi-item flowing animations

DotFlow

The DotFlow component combines DotMatrix with ScrambleText to create flowing, multi-item animations with automatic rotation.

Basic Usage

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

Props

Prop	Type	Default	Description
`items`*	`DotFlowItem[]`	-	Array of items with title and frames
`activeIndex`	`number`	-	Controlled active index
`autoPlay`	`number`	-	Auto-rotate interval in milliseconds
`direction`	`'horizontal' \| 'vertical'`	'horizontal'	Layout direction
`spacing`	`number`	16	Gap between matrix and text
`matrix`	`DotMatrixConfig`	-	Configuration for the DotMatrix component
`scramble`	`ScrambleTextConfig`	-	Configuration for the ScrambleText component
`textSize`	`number \| string`	16	Text font size
`textColor`	`string`	-	Text color
`textWeight`	`number \| string`	500	Text font weight
`onChange`	`(index: number) => void`	-	Callback when active index changes

DotFlowItem Type

interface DotFlowItem {
  title: string;      // Text to display
  frames: number[][]; // Animation frames for this item
}

Examples

Vertical Layout

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

Custom Matrix Configuration

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

Custom Text Styling

<DotFlow
  items={items}
  textSize={24}
  textColor="#fbbf24"
  textWeight={700}
/>

Controlled Mode

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>
  );
}

Custom Scramble Effect

<DotFlow
  items={items}
  scramble={{
    duration: 500,
    interval: 40,
    chars: "01",
  }}
/>