Skip to main content
Lumidot includes 36 pre-built patterns that control which dots illuminate in your loading animation. Each pattern is defined in the PATTERN_NAMES constant.

​
Solo Patterns

Single dot animations for minimal, focused loaders.

​
solo-center

Illuminates only the center dot of the grid. 
import { Lumidot } from 'lumidot';

<Lumidot pattern="solo-center" rows={3} cols={3} variant="blue" />

​
solo-tl

Illuminates only the top-left corner dot. 
<Lumidot pattern="solo-tl" rows={3} cols={3} variant="emerald" />

​
solo-br

Illuminates only the bottom-right corner dot. 
<Lumidot pattern="solo-br" rows={3} cols={3} variant="purple" />

​
Line Patterns

Straight line formations across the grid.

​
Horizontal Lines

<Lumidot pattern="line-h-top" rows={3} cols={5} variant="cyan" />
  • line-h-top: Illuminates all dots in the top row
  • line-h-mid: Illuminates all dots in the middle row
  • line-h-bot: Illuminates all dots in the bottom row

​
Vertical Lines

<Lumidot pattern="line-v-left" rows={5} cols={3} variant="green" />
  • line-v-left: Illuminates all dots in the left column
  • line-v-mid: Illuminates all dots in the middle column
  • line-v-right: Illuminates all dots in the right column

​
Diagonal Lines

<Lumidot pattern="line-diag-1" rows={3} cols={3} variant="fuchsia" />
  • line-diag-1: Illuminates dots from top-left to bottom-right
  • line-diag-2: Illuminates dots from top-right to bottom-left

​
Corner Patterns

Patterns focusing on the four corners of the grid.

​
corners-only

Sequentially animates through each corner (top-left, top-right, bottom-right, bottom-left). 
<Lumidot pattern="corners-only" rows={4} cols={4} variant="amber" />
This pattern uses sequence mode - corners light up one at a time.

​
corners-sync

Illuminates all four corners simultaneously. 
<Lumidot pattern="corners-sync" rows={4} cols={4} variant="orange" />
This is a sync pattern defined in SYNC_PATTERNS - all corners pulse together without wave delays.

​
Shape Patterns

Complex geometric shapes and forms.

​
L-Shapes

<Lumidot pattern="l-tl" rows={3} cols={3} variant="blue" />
  • l-tl: L-shape anchored at top-left (top row + left column)
  • l-tr: L-shape anchored at top-right (top row + right column)
  • l-bl: L-shape anchored at bottom-left (bottom row + left column)
  • l-br: L-shape anchored at bottom-right (bottom row + right column)

​
T-Shapes

<Lumidot pattern="t-top" rows={3} cols={3} variant="indigo" />
  • t-top: T-shape with top row + middle column
  • t-bot: T-shape with bottom row + middle column
  • t-left: T-shape with left column + middle row
  • t-right: T-shape with right column + middle row

​
Plus Pattern

​
plus-hollow

Illuminates the four dots at the edges (top, right, bottom, left) - creating a hollow plus sign. Animates sequentially through each position. 
<Lumidot pattern="plus-hollow" rows={3} cols={3} variant="yellow" />

​
Duo Patterns

Two-dot patterns for minimal animations. 
<Lumidot pattern="duo-h" rows={3} cols={5} variant="blue" />
  • duo-h: Two dots at horizontal extremes of middle row
  • duo-v: Two dots at vertical extremes of middle column
  • duo-diag: Two dots at opposite corners (top-left and bottom-right)

​
Frame Patterns

Perimeter-based patterns that outline the grid.

​
frame

Animates around the perimeter in order: top → right → bottom → left. 
<Lumidot pattern="frame" rows={4} cols={4} variant="cyan" />

​
frame-sync

Illuminates the entire perimeter simultaneously. 
<Lumidot pattern="frame-sync" rows={4} cols={4} variant="sky" />
This is a sync pattern defined in SYNC_PATTERNS - all perimeter dots pulse together.

​
Wave Patterns

Directional wave animations across all dots. 
<Lumidot pattern="wave-lr" rows={3} cols={5} variant="blue" duration={1.2} />
  • wave-lr: Wave propagates left to right
  • wave-rl: Wave propagates right to left
  • wave-tb: Wave propagates top to bottom
  • wave-bt: Wave propagates bottom to top
These patterns use the WAVE_DIRECTIONS constant to map to specific wave directions: 
export const WAVE_DIRECTIONS = {
  'wave-lr': 'lr',
  'wave-rl': 'rl',
  'wave-tb': 'tb',
  'wave-bt': 'bt',
} as const;
Wave patterns illuminate all dots but apply different delays based on the waveDelay function to create a propagating wave effect.

​
Sparse Patterns

Minimal patterns with strategically placed dots. 
<Lumidot pattern="sparse-1" rows={3} cols={3} variant="indigo" />
  • sparse-1: Diagonal from top-left to bottom-right
  • sparse-2: Three specific dots (top-right, middle-left, bottom-middle)
  • sparse-3: Three specific dots (top-middle, middle-right, bottom-left)

​
Special Patterns

​
spiral

Animates in a spiral pattern around the perimeter layers. The pattern consists of 4 frames that animate sequentially. 
<Lumidot pattern="spiral" rows={4} cols={4} variant="fuchsia" />
The spiral direction reverses when direction is set to rtl or btt.

​
all

Illuminates all dots in the grid simultaneously. 
<Lumidot pattern="all" rows={3} cols={3} variant="white" />

​
Pattern Implementation

All patterns are defined in types.ts: 
export const PATTERN_NAMES = [
  'solo-center',
  'solo-tl',
  'solo-br',
  'line-h-top',
  'line-h-mid',
  'line-h-bot',
  'line-v-left',
  'line-v-mid',
  'line-v-right',
  'line-diag-1',
  'line-diag-2',
  'corners-only',
  'corners-sync',
  'plus-hollow',
  'l-tl',
  'l-tr',
  'l-bl',
  'l-br',
  't-top',
  't-bot',
  't-left',
  't-right',
  'duo-h',
  'duo-v',
  'duo-diag',
  'frame',
  'frame-sync',
  'sparse-1',
  'sparse-2',
  'sparse-3',
  'wave-lr',
  'wave-rl',
  'wave-tb',
  'wave-bt',
  'spiral',
  'all',
] as const;

​
Type Definition

export type LumidotPattern = (typeof PATTERN_NAMES)[number];
This creates a union type of all valid pattern names, providing full TypeScript autocomplete and type safety.

Build docs developers (and LLMs) love

Get started for freeTalk to us