Basic Usage

Default Loading Animation

The simplest usage with default settings:

import { Lumidot } from 'lumidot';

export default function App() {
  return <Lumidot />;
}

This creates a 3x3 grid with blue dots and the default ‘all’ pattern.

Lumidot comes with 36 built-in patterns. Here are some common ones:

import { Lumidot } from 'lumidot';

export default function App() {
  return <Lumidot pattern="solo-center" variant="purple" />;
}

Lumidot supports 20 color variants:

import { Lumidot } from 'lumidot';

export default function App() {
  return <Lumidot variant="blue" />;
}

Create horizontal, vertical, and diagonal line patterns:

import { Lumidot } from 'lumidot';

export default function App() {
  return <Lumidot pattern="line-h-top" variant="sky" />;
}

Create L-shapes and T-shapes:

import { Lumidot } from 'lumidot';

export default function App() {
  return <Lumidot pattern="l-tl" variant="lime" />;
}

Adjust glow intensity and scale:

import { Lumidot } from 'lumidot';

export default function App() {
  return <Lumidot glow={0} variant="slate" />;
}