Skip to main content
Lumidot is a lightweight React component library that provides beautiful dot-grid loading animations with 36 unique patterns and 20 color variants.

​
What is Lumidot?

Lumidot delivers elegant, customizable loading animations using a flexible dot-grid system. Each animation is rendered as a grid of glowing dots that pulse, wave, or sequence through various patterns—perfect for loading states, transitions, or visual feedback in your React applications. 
import { Lumidot } from 'lumidot';

function App() {
  return <Lumidot variant="blue" pattern="wave-lr" />;
}

​
Key Features

36 Patterns

Solo dots, lines, corners, frames, waves, spirals, and more—organized into intuitive categories for quick discovery.

20 Color Variants

Pre-configured colors from amber to yellow, including pastels, primaries, and neutrals. Custom colors supported via CSS.

Tiny Bundle

Zero dependencies beyond React. Optimized build with tree-shaking support and minimal runtime overhead.

Accessible by Default

Respects prefers-reduced-motion, includes ARIA labels, and degrades gracefully without JavaScript.

​
Animation Modes

Lumidot automatically selects the appropriate animation mode based on your chosen pattern:
Continuous pulsing animation where dots light up in sequence across the grid. Controlled by the duration and direction props.
<Lumidot pattern="all" direction="ltr" duration={0.7} />
Used by patterns like all, wave-lr, wave-rl, wave-tb, wave-bt, and most static layouts.

​
When to Use Lumidot

Replace generic spinners with branded, on-theme loaders that match your design system.
{isLoading && <Lumidot variant="indigo" pattern="frame" />}
Show activity during async operations like API calls, AI generation, or data processing.
<Lumidot pattern="wave-lr" variant="cyan" rows={5} cols={5} />
Combine with layout components to create engaging placeholder states.
<div className="card-skeleton">
  <Lumidot pattern="solo-center" scale={2} />
</div>
Use static patterns or minimal animation to indicate background processes.
<Lumidot pattern="solo-center" glow={12} duration={1.5} />
Explore all 36 patterns and 20 colors interactively at lumidot.dev

​
Browser Support

Lumidot works in all modern browsers that support:
  • CSS Grid
  • CSS Custom Properties
  • ES2020+
This includes Chrome 88+, Firefox 87+, Safari 14+, and Edge 88+.

​
Next Steps

Installation

Add Lumidot to your project with npm, yarn, or pnpm

Quickstart

Get your first animation running in under 2 minutes

Build docs developers (and LLMs) love

Get started for freeTalk to us