LiveWaveform

A dumb, props-driven voice waveform: a row of bars whose heights track a live level through a spring, animated with transform: scaleY() only (never height, so it stays on the compositor). When active is false - or the user prefers reduced motion - the bars drop to a floor with a slow, phase- offset idle undulation instead of tracking the input.

Usage

import { LiveWaveform, LiveWaveformProps, VoiceErrorPopover, VoiceErrorPopoverProps, VoicePill, VoicePillProps, VoicePillState } from "@instruments/materia-ui/components/voice";

Best practices

Keep this dumb - drive every transition from the parent through state/level/elapsedMs; it owns no timers, audio, or permissions.
Pass label per state (the parent decides the copy, e.g. "Voice input" vs "Stop dictation") so screen readers announce the current action; never hardcode it here.
Feed level from a real RMS meter while listening - a dead-flat waveform reads as a crashed mic; the atom floors and undulates the bars, but only live level makes it look alive.

Props

LiveWaveform

Prop	Type	Default	Description
level(required)	`number`		Live RMS level, `0..1`. Drives the bar heights while `active`.
active	`boolean`		When `false`, bars sit at the idle floor/undulation instead of tracking `level`.
barCount	`number`	`6`	Number of bars to render, `5..7`.
className	`string`

VoiceErrorPopover

Prop	Type	Default	Description
open(required)	`boolean`		Controlled visibility. The parent owns error state and dismissal.
message(required)	`string`		The error message to surface.
actionLabel	`string`		When set, renders an action button (e.g. `"Retry"`) that calls `onAction`.
onAction	`() => void`
onDismiss	`() => void`
dismissLabel	`string`	`"Dismiss"`	Accessible label for the dismiss button.
children(required)	`ReactNode`		The anchor - the pill. The popover is positioned above it.
className	`string`

VoicePill

Prop	Type	Default	Description
state(required)	`VoicePillState`		Current visual state. The parent owns all transitions between states.
level	`number`	`0`	Live RMS level `0..1`, used while `listening`/`finalizing`.
elapsedMs	`number`	`0`	Elapsed capture time in ms, shown as an `mm:ss` timer while recording.
onClick	`() => void`
disabled	`boolean`
label(required)	`string`		Accessible label. The parent chooses copy per state - never hardcoded here.
pressed	`boolean`		Maps to `aria-pressed` (e.g. `true` while listening).
className	`string`

Also exports

interfaceLiveWaveformProps
interfaceVoiceErrorPopoverProps
interfaceVoicePillProps
typeVoicePillState

Composition

Builds on

Button, Flex, Icon