Skip to main content
Lumidot is written in TypeScript and exports all necessary types for type-safe usage.

Type Exports

LumidotProps

The props interface for the Lumidot component.
import type { LumidotProps } from 'lumidot';

interface LumidotProps {
  variant?: LumidotVariant;
  pattern?: LumidotPattern;
  rows?: number;
  cols?: number;
  glow?: number;
  scale?: number;
  duration?: number;
  direction?: LumidotDirection;
  className?: string;
  style?: CSSProperties;
  testId?: string;
}
All properties are optional. See Props for detailed documentation.

LumidotVariant

Color variant type for the dots.
import type { LumidotVariant } from 'lumidot';

type LumidotVariant =
  | 'amber'
  | 'blue'
  | 'cyan'
  | 'emerald'
  | 'fuchsia'
  | 'green'
  | 'indigo'
  | 'lime'
  | 'orange'
  | 'pink'
  | 'purple'
  | 'red'
  | 'rose'
  | 'sky'
  | 'slate'
  | 'teal'
  | 'violet'
  | 'white'
  | 'black'
  | 'yellow';

LumidotPattern

Animation pattern type.
import type { LumidotPattern } from 'lumidot';

type LumidotPattern =
  | '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';

LumidotDirection

Wave animation direction type.
import type { LumidotDirection } from 'lumidot';

type LumidotDirection = 'ltr' | 'rtl' | 'ttb' | 'btt';
  • ltr - Left to right diagonal
  • rtl - Right to left diagonal
  • ttb - Top to bottom diagonal
  • btt - Bottom to top diagonal

Constant Exports

PATTERN_NAMES

Array of all available pattern names.
import { PATTERN_NAMES } from 'lumidot';

const PATTERN_NAMES: readonly [
  'solo-center',
  'solo-tl',
  'solo-br',
  // ... (36 patterns total)
  'spiral',
  'all',
];
Useful for iterating over all patterns or building pattern selectors.

COLORS

Object mapping variant names to hex color values.
import { COLORS } from 'lumidot';

const COLORS: {
  amber: '#fcd34d';
  blue: '#93c5fd';
  cyan: '#67e8f9';
  emerald: '#6ee7b7';
  fuchsia: '#f0abfc';
  green: '#86efac';
  indigo: '#a5b4fc';
  lime: '#bef264';
  orange: '#fdba74';
  pink: '#f9a8d4';
  purple: '#d8b4fe';
  red: '#fca5a5';
  rose: '#fda4af';
  sky: '#7dd3fc';
  slate: '#cbd5e1';
  teal: '#5eead4';
  violet: '#c4b5fd';
  white: '#ffffff';
  black: '#000000';
  yellow: '#fde047';
};

SYNC_PATTERNS

Set of pattern names that use synchronous animation (all dots animate together).
import { SYNC_PATTERNS } from 'lumidot';

const SYNC_PATTERNS: Set<string>; // Contains: 'corners-sync', 'frame-sync'

WAVE_DIRECTIONS

Mapping of wave patterns to their directional behavior.
import { WAVE_DIRECTIONS } from 'lumidot';

const WAVE_DIRECTIONS: {
  'wave-lr': 'lr';
  'wave-rl': 'rl';
  'wave-tb': 'tb';
  'wave-bt': 'bt';
};

Usage Example

import { Lumidot, PATTERN_NAMES, COLORS } from 'lumidot';
import type { LumidotProps, LumidotVariant } from 'lumidot';

// Type-safe props
const loaderProps: LumidotProps = {
  variant: 'blue',
  pattern: 'wave-lr',
  rows: 5,
  cols: 5,
};

// Iterate over patterns
PATTERN_NAMES.forEach((pattern) => {
  console.log(pattern);
});

// Access color values
const blueHex = COLORS.blue; // '#93c5fd'

// Type-safe variant
const myVariant: LumidotVariant = 'emerald';

Build docs developers (and LLMs) love