Dot Matrix

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add dot-matrix

Usage#

import { DotMatrix } from "@/components/ui/dot-matrix"

export function Example() {
  return <DotMatrix />
}

Anatomy#

import { DotMatrix } from "@/components/ui/dot-matrix"

<DotMatrix />

Sizes#

xl (the default) is 64px, for a whole screen: a boot, a first load. lg is 36px, for a panel or a block inside a page. Both draw a 5px dot; the size sets the spacing.

Color#

The dots paint currentColor, so the matrix takes the text color around it, or any text-* you give it. The tail is opacity on that one color, so it reads on every ground in every theme.

In a panel#

The matrix is a status named "Loading". When words beside it already say what is loading, make those words the status and pass aria-hidden to the matrix: its role and name are dropped, so the wait is announced once.

Speed#

A lap takes 1.1s. --dot-matrix-duration retimes it, on the matrix or on any container above it: slower for a calm, long wait, never so fast that the tail stops reading as a trail.

Reduced motion#

With prefers-reduced-motion, the light stops and the spiral stays drawn: each dot holds a still opacity that brightens along the path, faint at the edge and full at the center. It still reads as a loader, without moving. This is that state:

API reference#

FAQ#