KokonutUI
A voice input UI with a mic toggle, live waveform visualizer, and elapsed-time counter. Starts in demo mode with an auto-looping animation, then switches to manual toggle on first click.
Click to speak
On mount, the component cycles between listening and idle states automatically. The first click exits demo mode and hands control to the user.
Animated bars pulse with randomized heights and staggered delays when active, collapsing to minimal pips when idle.
A mono-spaced MM:SS timer ticks while recording is active and resets to 00:00 when stopped.
Idle state shows a mic icon. Active state shows a slowly spinning square stop indicator, providing clear visual feedback for the current state.
This component has no props. It renders a self-contained voice input UI with internal state management.
The waveform bar heights are generated with Math.random() on mount, so the pattern differs on each render. This is purely visual and does not reflect real audio data.
No actual Web Audio or microphone APIs are wired up. This is a UI shell. To add real voice capture, hook into the handleClick function and replace the demo logic with navigator.mediaDevices.getUserMedia().