Lumidot

A 3x3 dot-grid loader with named patterns, color variants, directional wave animation, and glow effects.

Basic Usage

import { Lumidot } from 'lumidot';

<Lumidot />

Patterns

Control which dots are active in the 3x3 grid. 36 named patterns are available.

<Lumidot pattern="all" />
<Lumidot pattern="frame" />
<Lumidot pattern="corners-only" />
<Lumidot pattern="plus-hollow" />
<Lumidot pattern="line-diag-1" />
<Lumidot pattern="solo-center" />

Color Variants

20 named color variants from the Tailwind palette.

<Lumidot variant="blue" />
<Lumidot variant="purple" />
<Lumidot variant="rose" />
<Lumidot variant="amber" />
<Lumidot variant="white" />

Direction

Control the wave animation direction across the grid.

<Lumidot direction="ltr" />  // left to right (default)
<Lumidot direction="rtl" />  // right to left
<Lumidot direction="ttb" />  // top to bottom
<Lumidot direction="btt" />  // bottom to top

Scale

Control the size with a multiplier. Base size is 20px.

<Lumidot scale={1} />  // 20px
<Lumidot scale={2} />  // 40px
<Lumidot scale={3} />  // 60px
<Lumidot scale={5} />  // 100px

Glow

Control the glow intensity around active dots.

<Lumidot glow={0} />   // no glow
<Lumidot glow={8} />   // subtle glow (default)
<Lumidot glow={24} />  // strong glow

Duration

Control the wave animation cycle speed in seconds.

<Lumidot duration={0.3} />  // fast
<Lumidot duration={0.7} />  // default
<Lumidot duration={2} />    // slow

Accessibility

The component includes role="status" and aria-label="Loading" by default. It also respects prefers-reduced-motion — when enabled, the wave animation is disabled and dots remain static.

Ref Forwarding

The component forwards refs to the root <span> element:

const ref = useRef<HTMLSpanElement>(null);
<Lumidot ref={ref} />

API Reference