Animations

Examples showcasing wave directions, duration, and sequence animations

Wave Directions

Control the direction of wave animations using the direction prop. This affects how the animation propagates across the grid.

Horizontal Waves

Left to Right

import { Lumidot } from 'lumidot';

export default function App() {
  return (
    <Lumidot 
      pattern="all" 
      direction="ltr" 
      variant="purple" 
    />
  );
}

Vertical Waves

Top to Bottom

import { Lumidot } from 'lumidot';

export default function App() {
  return (
    <Lumidot 
      pattern="all" 
      direction="ttb" 
      variant="emerald" 
    />
  );
}

Built-in Wave Patterns

Some patterns have built-in wave directions that create specific effects:

Wave Left to Right

import { Lumidot } from 'lumidot';

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

Animation Duration

Control the speed of animations using the duration prop (in seconds):

Fast Animation (0.4s)

import { Lumidot } from 'lumidot';

export default function App() {
  return (
    <Lumidot 
      pattern="wave-lr" 
      duration={0.4} 
      variant="sky" 
    />
  );
}

Sequence Animations

Some patterns use sequence animations instead of waves, cycling through multiple frames:

Corners Only (Sequence)

import { Lumidot } from 'lumidot';

export default function App() {
  return (
    <Lumidot 
      pattern="corners-only" 
      variant="blue" 
    />
  );
}

Synchronized Patterns

Some patterns animate all dots simultaneously without wave delays:

Corners Sync

import { Lumidot } from 'lumidot';

export default function App() {
  return (
    <Lumidot 
      pattern="corners-sync" 
      variant="cyan" 
    />
  );
}

Combining Direction with Patterns

Direction affects how patterns animate across the grid:

Frame with Left-to-Right

import { Lumidot } from 'lumidot';

export default function App() {
  return (
    <Lumidot 
      rows={5} 
      cols={5} 
      pattern="frame" 
      direction="ltr" 
      variant="amber" 
    />
  );
}

Duration with Different Grid Sizes

Larger grids may need longer durations for smooth wave effects:

Small Grid, Fast

import { Lumidot } from 'lumidot';

export default function App() {
  return (
    <Lumidot 
      rows={3} 
      cols={3} 
      pattern="wave-lr" 
      duration={0.5} 
      variant="violet" 
    />
  );
}

Sparse Patterns with Waves

Sparse patterns create interesting wave effects:

Sparse-1 Pattern

import { Lumidot } from 'lumidot';

export default function App() {
  return (
    <Lumidot 
      rows={5} 
      cols={5} 
      pattern="sparse-1" 
      variant="orange" 
    />
  );
}