Voice & audio

Orbs, waveforms, players and speech input. 13 live React parts, each in nine looks.

• 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. Use the ready layouts or compose the parts.
• 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 agent's voice while talking. Bars move only while there is something to show.
• 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 not an option. Works with any provider through one adapter, or with a session shared by the rest of the screen.
• 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 finished, and a number readout under reduced motion. Draws only while there is sound to draw and it is on screen.
• 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.
• Microphone 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 unblock), no microphone, unplugged. Shares its microphone with the rest of the screen.
• 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 the voice; from a 16px agent mark to a 240px voice screen.
• 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 of a media slider.
• 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 every failure (blocked, no microphone, connection lost and back) says what to do.
• 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, speakers become paragraphs with marks on the scrub bar. Takes word timings from speech-to-text or character alignment from text-to-speech.
• 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 recording, a loader while words are finished, and a check or a retry when it ends. The state comes from your operation, never from a timer.
• 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 and the orb speaks while its sample plays.
• 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 state. Peaks can be decoded from the file in the browser.

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

Other categories: Actions · Form controls · Overlays · Navigation · Layout · Feedback · Content & display · Data & tables · Charts & data-vis · Trading · Dashboard · AI & agents · Motion & effects · Blocks