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

const sequence = [
  [24],
  [17, 23, 25, 31],
  [10, 16, 18, 24, 30, 32, 38],
  [17, 23, 25, 31],
  [24],
];

function App() {
  return <DotMatrix sequence={sequence} />;
}

<DotMatrix
  sequence={sequence}
  cols={7}
  rows={7}
  dotSize={8}
  gap={3}
  shape="circle"
  interval={100}
  color="#00ffff"
  inactiveColor="#222"
/>

<DotMatrix shape="circle" />   // ● Round dots
<DotMatrix shape="square" />   // ■ Square dots
<DotMatrix shape="rounded" />  // ▢ Rounded squares (default)
<DotMatrix radius={4} />       // Custom border radius

const [playing, setPlaying] = useState(true);

<DotMatrix
  sequence={sequence}
  active={playing}           // Play/pause
  loop={3}                   // Loop count (-1 for infinite)
  onFrameChange={(i) => {}}  // Frame change callback
  onFinish={() => {}}        // Animation complete callback
/>

<DotMatrix
  dotStyle={{ opacity: 0.3 }}
  activeDotStyle={{
    backgroundColor: '#0ff',
    boxShadow: '0 0 8px #0ff',
  }}
  bgColor="#000"
/>

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

<ScrambleText
  text="Loading"
  duration={800}
  interval={30}
  chars="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
  onComplete={() => console.log('done')}
/>

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

const items = [
  { title: "Loading", frames: [[24], [17,23,25,31], [24]] },
  { title: "Success", frames: [[30], [23,30,37], [16,23,30,37,44]] },
  { title: "Error",   frames: [[0,6,42,48], [8,12,36,40]] },
];

// Uncontrolled with auto-play
<DotFlow items={items} autoPlay={3000} />

// Controlled mode
const [index, setIndex] = useState(0);
<DotFlow items={items} activeIndex={index} onChange={setIndex} />

<DotFlow
  items={items}
  direction="horizontal"  // or "vertical"
  spacing={16}
  matrix={{ dotSize: 8, shape: "circle", color: "#0ff" }}
  scramble={{ duration: 500 }}
  textSize={18}
  textColor="#0ff"
  textWeight={600}
/>

import type {
  DotMatrixProps,
  DotMatrixConfig,
  DotShape,
  ScrambleTextProps,
  ScrambleTextConfig,
  DotFlowProps,
  DotFlowConfig,
  DotFlowItem,
} from 'dot-anime-react';