Skip to main content
Line patterns display dots arranged in straight lines across the grid. These create clean, directional loading animations.

​
Horizontal Lines

​
line-h-top

Animates a horizontal line across the top row. 
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="line-h-top" variant="blue" />;
}
Visual: All dots in the top row pulse simultaneously, creating a horizontal bar effect.

​
line-h-mid

Animates a horizontal line through the middle row. 
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="line-h-mid" variant="cyan" />;
}
Visual: The middle row of dots illuminates in a wave pattern from left to right.

​
line-h-bot

Animates a horizontal line across the bottom row. 
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="line-h-bot" variant="teal" />;
}
Visual: The bottom row pulses with a synchronized wave effect.

​
Vertical Lines

​
line-v-left

Animates a vertical line down the left column. 
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="line-v-left" variant="green" />;
}
Visual: Dots cascade from top to bottom along the left edge.

​
line-v-mid

Animates a vertical line through the middle column. 
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="line-v-mid" variant="emerald" />;
}
Visual: The center column lights up from top to bottom.

​
line-v-right

Animates a vertical line down the right column. 
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="line-v-right" variant="lime" />;
}
Visual: The rightmost column animates downward in sequence.

​
Diagonal Lines

​
line-diag-1

Animates a diagonal line from top-left to bottom-right. 
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="line-diag-1" variant="purple" />;
}
Visual: Dots illuminate diagonally from the top-left corner to the bottom-right corner.

​
line-diag-2

Animates a diagonal line from top-right to bottom-left. 
import { Lumidot } from 'lumidot';

function Example() {
  return <Lumidot pattern="line-diag-2" variant="violet" />;
}
Visual: Creates a diagonal pattern from top-right to bottom-left, the mirror of line-diag-1.

​
Direction Control

Control the animation direction for any line pattern: 
// Left to right (default)
<Lumidot pattern="line-h-mid" direction="ltr" />

// Right to left
<Lumidot pattern="line-h-mid" direction="rtl" />

// Top to bottom
<Lumidot pattern="line-v-mid" direction="ttb" />

// Bottom to top
<Lumidot pattern="line-v-mid" direction="btt" />

​
Direction Options

  • ltr - Left to right (default)
  • rtl - Right to left
  • ttb - Top to bottom
  • btt - Bottom to top

​
Custom Dimensions

Line patterns adapt to any grid size: 
// Wide horizontal line
<Lumidot pattern="line-h-mid" rows={3} cols={7} />

// Tall vertical line
<Lumidot pattern="line-v-mid" rows={7} cols={3} />

// Long diagonal
<Lumidot pattern="line-diag-1" rows={5} cols={5} />

Build docs developers (and LLMs) love

Get started for freeTalk to us