Voice matrix

Pro

The voice state drawn on a round grid of dots: a slow breath when idle, a disc that grows with your voice while listening, an arc that circles while it thinks and rings that move outward while it speaks.

Installs components/ui/voice-matrix.tsxDepends on lucide-reactMotion honours reduced motion

pnpm dlx shadcn@latest add @caliper/voice-matrix

Ready when you are

When to use #

Use it for

Voice agents and dictation, beside or instead of the voice orb.
Products whose look is monochrome or technical, where a glowing orb feels out of place.

Skip it when

A button that starts recording; pair it with one, or use the voice orb, which is a button.

Decisions #

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Only brightness changes: Dots never move or change colour, they only brighten and dim, so every state reads as the same calm object and the canvas costs little to draw.
The level you pass is eased: A microphone meter jumps; the matrix eases toward each new level every frame, so a jumpy meter still draws smoothly.
Stops drawing when nobody can see it: Drawing pauses when the matrix leaves the screen. With reduced motion each state is a still pattern that updates only when the level changes.

Styling

Draws in the text colour: The dots use the element's colour, so it follows light and dark themes and any colour you set on it, without a palette of its own.

Usage

The words below are the state: The caption says whose turn it is and is a live region; the canvas is an image labelled with the same words.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/voice-matrix

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { VoiceMatrix } from "@/components/ui/voice-matrix"

The worked example comes with Pro

The 44-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

VoiceMatrix

component

PropTypeDefaultDescription

state *VoiceState—

levelnumber0Live loudness from 0 to 1 while listening or speaking; you supply it.

sizenumber144

dotsnumber15Dots across the widest row.

labelstring"Voice"

showCaptionbooleantrue

classNamestring—

Motion #

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.