Skip to main content
Wave patterns create flowing, directional animations across the entire grid. These patterns are perfect for more prominent loading states.

​
Directional Waves

Wave patterns animate all dots in a cascading sequence.

​
wave-lr

Wave animation flowing from left to right. 
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="wave-lr" variant="blue" />;
}
Visual: All dots pulse in sequence from the leftmost column to the rightmost, creating a smooth left-to-right wave effect.

​
Use Cases

  • Progress indicators moving forward
  • Loading states with directional context
  • Horizontal scrolling feedback

​
wave-rl

Wave animation flowing from right to left. 
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="wave-rl" variant="purple" />;
}
Visual: Dots animate from right to left, creating a reverse wave effect.

​
Use Cases

  • Backward navigation feedback
  • Right-to-left language interfaces
  • Reversing/undo operations

​
wave-tb

Wave animation flowing from top to bottom. 
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="wave-tb" variant="green" />;
}
Visual: A cascading wave flows downward from the top row to the bottom row.

​
Use Cases

  • Vertical scrolling feedback
  • Dropdown menu loading
  • Downward progression indicators

​
wave-bt

Wave animation flowing from bottom to top. 
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="wave-bt" variant="cyan" />;
}
Visual: Dots pulse upward from bottom to top, creating an ascending wave.

​
Use Cases

  • Upload progress indicators
  • Upward navigation
  • Rising/filling animations

​
Spiral Pattern

​
spiral

Animates dots in a spiral pattern from outside to inside. 
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="spiral" variant="fuchsia" />;
}
Visual: Dots light up in a clockwise spiral, starting from the top edge and rotating inward toward the center. The sequence creates a hypnotic, circular motion effect.

​
Direction Control

Control the spiral direction: 
// Clockwise (default)
<Lumidot pattern="spiral" direction="ltr" />

// Counter-clockwise
<Lumidot pattern="spiral" direction="rtl" />

​
Use Cases

  • Loading states that need visual interest
  • Processing or analyzing indicators
  • Circular progress concepts

​
Full Grid Pattern

​
all

Animates all dots simultaneously across the entire grid. 
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="all" variant="orange" />;
}
Visual: Every dot on the grid pulses together in a diagonal wave pattern (default direction: ltr), creating a unified, flowing animation.

​
Direction Variations

// Diagonal left-to-right (default)
<Lumidot pattern="all" direction="ltr" />

// Diagonal right-to-left
<Lumidot pattern="all" direction="rtl" />

// Diagonal top-to-bottom
<Lumidot pattern="all" direction="ttb" />

// Diagonal bottom-to-top
<Lumidot pattern="all" direction="btt" />
Visual Effect: Each direction creates a different diagonal wave across the full grid:
  • ltr - Wave flows from top-left to bottom-right
  • rtl - Wave flows from top-right to bottom-left
  • ttb - Wave flows from top-left to bottom-right (emphasizing vertical)
  • btt - Wave flows from bottom-left to top-right

​
Use Cases

  • Full-page loading states
  • Prominent processing indicators
  • Attention-grabbing animations
  • Background loading effects

​
Customizing Wave Patterns

Wave patterns support extensive customization: 
<Lumidot
  pattern="wave-lr"
  variant="violet"
  rows={5}
  cols={7}
  duration={1.2}
  glow={15}
  scale={1.5}
/>

​
Key Parameters

  • duration - Controls wave speed (lower = faster)
  • rows / cols - Larger grids create more dramatic waves
  • glow - Higher values create more prominent light trails
  • scale - Enlarges the entire animation

​
Performance Note

Wave patterns animate more dots simultaneously, which creates beautiful effects but uses more GPU resources. For best performance:
  • Use moderate grid sizes (3x3 to 5x5 recommended)
  • Limit the number of simultaneous wave animations on screen
  • Consider using simpler patterns for inline or repeated use cases

​
Responsive Wave Patterns

Adjust grid dimensions for different screen sizes: 
function ResponsiveWave() {
  const isMobile = window.innerWidth < 768;
  
  return (
    <Lumidot
      pattern="wave-lr"
      rows={isMobile ? 3 : 5}
      cols={isMobile ? 3 : 7}
      variant="blue"
    />
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us