Matrix

A React component in Beamline's Voice & audio category.

A dot-matrix display: animated frame sets (loading, pulse, wave, syncing), text and digits in a 5×7 font, or a VU meter of levels or a live source. One canvas; the loop runs only while something moves and it is on screen.

Use it for

Playful status in voice products: connecting, syncing, a level meter.
A short code, a countdown or a build number as lit dots.

Not for

Values people must read precisely (metric-card, a number).
A heatmap of data (activity-heatmap).
A recording's shape (waveform).

Anatomy

canvas of dots (lit, dim)

Variants

content: frames (pattern or frame set), text (5×7 font), levels (VU columns, or a live source)

States

static
playing (frames advance at fps)
paused (autoplay false, or off screen)
reduced motion (first frame or the whole text, no loop)

Keyboard

None: a picture with a label (role img).

Motion

Each dot eases toward its new brightness; the loop stops once every dot has settled and nothing advances. Frame sets play at fps (12 by default) only on screen and in a visible tab. Reduced motion shows the first frame, the text at rest and levels without easing. Scrolling text steps column by column without easing, like a sign, so letters never smear; a live source with one loudness is drawn as a voice envelope (louder in the middle).

Props

Prop	Type	Default	Description
`rows / cols`	`number`	—	Grid size; text and frames size it when omitted.
`pattern`	`Frame`	—	One still frame: rows of 0–1 brightness.
`frames`	`Frame[]`	—	An animation; ready sets: loader, pulse, wave, snake. digits[0–9] are still frames.
`text`	`string`	—	Letters, digits and : - . % ! ? in a 5×7 font; scrolls when wider than cols.
`levels`	`number[]`	—	One 0–1 level per column: a VU meter.
`source`	`MediaStream \| LevelSource \| (() => number)`	—	A live VU meter (levels from its spectrum).
`fps`	`number`	`12`
`autoplay / loop`	`boolean`	`true / true`
`size / gap`	`number`	`8 / 2`	Dot size and spacing in px.
`palette`	`{ on: string; off: string }`	—	Colours; default currentColor and a dim of it.
`brightness`	`number`	`1`
`onFrame`	`(index: number) => void`	—
`label`	`string`	—	Accessible name; text content is read when there is none.
`style / ref`	`CSSProperties / native Ref`	—

Import

import { Matrix } from "@/components/matrix/matrix";

Get it

Matrix is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent