Dot Matrix

A premium, vector-based grid component supporting custom shapes, gradient presets, and tactile animations.

Preview

Loading Preview...

bun add xiod-ui

1import { DotMatrix } from "xiod-ui/dot-matrix";

1<DotMatrix>2</DotMatrix>

Detailed documentation of properties and options.

Prop	Type	Default
`rows`	`number` \|`undefined`	`5`
`cols`	`number` \|`undefined`	`5`
`mode`	`"animation"` \|`"static"` \|`"vu"` \|`undefined`	`animation`
`pattern`	`number[][]` \|`boolean[][]` \|`undefined`	-
`preset`	`DotMatrixPreset` \|`undefined`	`ripple`
`frames`	`number[][][]` \|`undefined`	-
`isPlaying`	`boolean` \|`undefined`	`true`
`loop`	`boolean` \|`undefined`	`true`
`autoplay`	`boolean` \|`undefined`	`true`
`fps`	`number` \|`undefined`	`12`
`speed`	`number` \|`undefined`	`1`
`levels`	`number[]` \|`undefined`	-
`dotSize`	`number` \|`undefined`	`8`
`gap`	`number` \|`undefined`	`3`
`shape`	`DotMatrixShape` \|`undefined`	`circle`
`colorPreset`	`DotMatrixColorPreset` \|`undefined`	`solid`
`color`	`string` \|`undefined`	`currentColor`
`colorOff`	`string` \|`undefined`	`var(--muted-foreground)`
`bloom`	`boolean` \|`undefined`	`true`
`bloomIntensity`	`number` \|`undefined`	`1.8`
`halo`	`boolean` \|`undefined`	`false`
`ariaLabel`	`string` \|`undefined`	`Dot matrix loader`
`onFrame`	`((index: number) => void)` \|`undefined`	-