# Matrix

A React component in [Beamline](https://beamline.io/)'s [Voice & audio](https://beamline.io/components/voice) category. Live demo: https://beamline.io/components/matrix

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](https://beamline.io/components/metric-card), a number).
- A heatmap of data ([activity-heatmap](https://beamline.io/components/activity-heatmap)).
- A recording's shape ([waveform](https://beamline.io/components/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

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Voice & audio

- [Audio player](https://beamline.io/components/audio-player): One audio element and its controls: play with a loading state, a scrub bar with time, skip, speed and a playlist whose rows play into the same player…
- [Bar visualizer](https://beamline.io/components/bar-visualizer): A row of bars that says what a voice agent is doing: a sweep while connecting, the person's voice while listening, a slow breath while thinking, the…
- [Conversation bar](https://beamline.io/components/conversation-bar): The control bar of a voice call with an agent: one button to call and hang up, the agent's state as bars, a call timer, mute, and typing when talking is…
- [Live waveform](https://beamline.io/components/live-waveform): Loudness drawn as it happens: a scrolling history of the microphone (or any live source) or its spectrum, a calm processing state while words are…
- [Microphone selector](https://beamline.io/components/mic-selector): Choose the microphone, test it with a live level and mute it, with every permission and device state spelled out: not yet allowed, blocked (and how to…
- [Orb](https://beamline.io/components/orb): The agent's presence: a thin ring of light around a lens in the brand's hue that holds still at rest, sends an arc round while thinking and widens with…
- [Scrub bar](https://beamline.io/components/scrub-bar): A seekable timeline for audio or video: elapsed and total time, what has loaded, chapter marks, a time preview under the pointer, and the full keyboard…
- [Speech input](https://beamline.io/components/speech-input): A text field you can speak into: the mic dictates through any speech-to-text provider, the phrase being heard shows apart from the finished words, and…
- [Transcript viewer](https://beamline.io/components/transcript-viewer): A recording and its words together: the spoken word lights up as it plays and the transcript follows it, any word or paragraph time plays from there…
- [Voice button](https://beamline.io/components/voice-button): The control that starts and stops talking: click to toggle or hold to talk (pointer, Space, Enter or a global shortcut), with a live level while…
- [Voice picker](https://beamline.io/components/voice-picker): Choose a text-to-speech voice from a searchable list (name, accent, tone, use) and hear it first: each voice has its own orb, previews play one at a time…
- [Waveform](https://beamline.io/components/waveform): The shape of a recording: one bar per slice of loudness, fitted to any width, with the played part in the accent, unmeasured slices hatched and a loading…