Voice Control

Round controls for voice and call surfaces, with a live level meter while listening.

FreeWeb and MobileMotion

npx shadcn add @fetaui/voice-control

Playground

Controls

Disabled

Bar: press the mic

Tap to talkAssistant

Bar: listening

Listening00:00

Bar: muted

Muted00:00

Control

Icons animation

Motion

Installation

Terminal· bash

1 npx shadcn add @fetaui/voice-control

Eight round controls for voice and call surfaces. Each has its own default label.

Motion

Listening pulses a soft halo in a 1200 ms loop.
Idle level bars loop while listening, and stop with animated off or reduced motion.
Pass levels and the bars hold those heights in place of the loop.
Bars stop when the control is disabled and pause offscreen.
Mute stops the wave at once.
With reduced motion, the halo holds still and the bars keep moving.
Swift uses an SF Symbol for the level meter.

Level bars and the halo are CSS animations on transforms. They pause when scrolled out of view, through one shared observer.
With levels, bars follow your values and the CSS loop is off.
VoiceBar renders once a second for its call clock while not idle. The bar and wave loops run in CSS, without React renders.

Give your coding assistant the Markdown reference instead of screenshots.

Import VoiceControl and VoiceBar from @/components/fetaui/voice-control.
Use VoiceControl alone for custom layouts, and pass levels with five bar heights in px for a real meter.
VoiceBar does not take levels, and its bars and wave are a loop. It records nothing.
VoiceBar's second line shows agent (default Assistant) while idle, then the time since the first tap. Pass meta to show your own text.
Captions state stays inside VoiceBar with no callback. Use VoiceControl to wire captions up.