Lumidot Component

The Lumidot component is the core of the library, providing customizable animated dot patterns with various effects and styles.

Import

import { Lumidot } from 'lumidot';

import { Lumidot } from 'lumidot';

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

<Lumidot
  variant="emerald"
  pattern="spiral"
  rows={5}
  cols={5}
  glow={12}
  scale={1.5}
  duration={1}
  direction="ltr"
/>

The Lumidot component supports React refs through React.forwardRef:

const lumidotRef = useRef<HTMLSpanElement>(null);

<Lumidot ref={lumidotRef} variant="blue" />

For detailed information about all available props, see the Props documentation. For type definitions, see the Types documentation.

The component automatically includes accessibility attributes:

The component exposes several data attributes for styling and testing: