Voice Waveform Listen
Bars rise and fall against the room while the microphone is open, so the mic reads as live.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Voice Waveform Listen
*
* The bars an assistant shows while the microphone is open: an
* irregular, continuously moving level meter that says the room is being
* heard, without promising a duration.About this pattern
An open microphone with no feedback is indistinguishable from a broken one. The meter answers that by moving continuously and irregularly: each bar runs its own cycle, offset from its neighbours, with amplitudes tapering toward the ends the way a real level meter does. The levels come from two out-of-phase sines rather than random noise, so the shape never marches in lockstep and the server renders exactly what the client does. Bars are scaled, not resized, so the whole meter is one composited transform.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
A live meter shown for the duration that the microphone is capturing.
Related patterns
- Scan SweepA scan line travels across the surface being analyzed, then rests before the next pass.
- Transcription Word LockEach spoken word lands dimmed under a dotted rule, then firms up to solid once the recognizer commits.
- Embedding Cluster SettleScattered points drift into labelled groups, the halos and captions landing after them.