An animated grid of dots, for loading states and decorative displays.
true |
Whether lit dots glow. |
bloomIntensity | number | 1.8 | How far the glow spreads. Higher values give a softer, wider glow. |
color | string | currentColor | The colour of lit dots, as a CSS colour. |
colorOff | string | var(--muted-foreground) | The colour of unlit dots, as a CSS colour. |
colorPreset | "solid"|"sunset"|"ocean"|"neon"|"aurora"|"fire"|"prism" | solid | A gradient to colour the lit dots with. |
cols | number | 5 | The number of columns of dots. |
decorative | boolean | false | Whether the matrix is decoration only, such as an ornament next to text that already says what is happening. Screen readers then skip it. |
dotSize | number | 8 | The size of each dot, in pixels. |
fps | number | 12 | How many custom |
frames | number[][][] | – | Your own animation for |
gap | number | 3 | The space between dots, in pixels. |
halo | boolean | false | Whether to add a soft glow behind the whole matrix. |
isPlaying | boolean | true | Whether the animation is playing. Set it to |
labels | Partial<DotMatrixLabels> | – | Replaces the built-in text for this instance. See |
levels | number[] | – | The height of each column in |
loop | boolean | true | Whether custom |
mode | "animation"|"static"|"vu" | animation | What the dots show: an animation (a |
onFrame | ((index: number) => void) | – | Called with the index of each custom frame as it is shown. |
pattern | number[][] | boolean[][] | – | The dots to light in |
preset | "none"|"ripple"|"spiral"|"snake"|"wave"|"wave-vertical"|"pulse"|"diagonal"|"diagonal-reverse"|"rotor"|"columns-flux"|"helix"|"infinity"|"heart-pulse"|"orbit"|"matrix-rain"|"sine-wave"|"crt-glide"|"twin-orbit"|"rung-shift"|"lunar-breath"|"nova-wheel"|"prism-bloom"|"half-helix"|"honey-gate"|"spiral-lattice"|"altitude-wave"|"glyph-cluster"|"rail-scan"|"halo-drift" | ripple | The built-in animation to play in |
rows | number | 5 | The number of rows of dots. |
shape | "circle"|"square"|"diamond"|"heart" | circle | The shape of each dot. |
speed | number | 1 | How fast a |