Loading…

Matrix Orb

beta

A circular dot-matrix orb that breathes while idle, blooms with a live level while listening and runs an orbiting scan while thinking, blending smoothly between them.

AI
1 file
1 npm package
Accessibility notes
Draws on a canvas

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add matrix-orb

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { MatrixOrb } from "@/components/ui/matrix-orb";

Examples

Every example the tests run, live and operable, side by side.

Default
Interactive
States
Live Level
Colours
Density

API

Generated from the component's own types, so a prop cannot appear here without existing.

<MatrixOrb>

Prop	Type	Default
`announce` Announce state changes through a polite live region. Off by default.	`boolean`	`false`
`color` Any CSS colour for the dots. Defaults to the `tone` token.	`string`	—
`dots` Dots across the grid, 5–64.	`number`	`17`
`labels` A caption under the orb for each state. A state's caption is also its accessible name; states without one are named "Idle", "Listening" and "Thinking".	`Partial<Record<MatrixOrbState, string>>`	—
`level` How far the listening bloom reaches, 0–1 — a live input or output level. Omit it for a built-in speech-like envelope.	`number`	—
`size` Diameter of the orb in pixels.	`number`	`120`
`state` Which field the orb plays. Changes blend smoothly.	`MatrixOrbState`	`"idle"`
`tone`	`"primary" \| "foreground" \| "muted"`	`"primary"`

Plus every attribute of <div> except children, color.

Accessibility

The root is role="img", named by the current state — its caption from `labels`, or "Idle", "Listening", "Thinking" — so the name stays in step with what is drawn; aria-label or aria-labelledby replace it. The canvas and the visible caption are aria-hidden so nothing is read twice. State changes are silent unless `announce` is set, which adds a polite status region that stays empty on first paint. Under reduced motion (or --motion-scale at zero) the canvas draws one still frame per state; the state never depends on motion or colour alone, because the name carries it.

Quality

Measured from the source and its tests at build time.

All scores

7/7

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — does not apply
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

announce

Announce state changes through a polite live region. Off by default.

boolean

false

color

Any CSS colour for the dots. Defaults to the tone token.

string

—

dots

Dots across the grid, 5–64.

number

17

labels

A caption under the orb for each state. A state's caption is also its accessible name; states without one are named "Idle", "Listening" and "Thinking".

Partial<Record<MatrixOrbState, string>>

—

level

How far the listening bloom reaches, 0–1 — a live input or output level. Omit it for a built-in speech-like envelope.

number

—

size

Diameter of the orb in pixels.

number

120

state

Which field the orb plays. Changes blend smoothly.

MatrixOrbState

"idle"

tone

"primary" | "foreground" | "muted"

"primary"