← All components
Interaction / component
Voice Pill
A microphone control that unfolds into an expressive waveform, with tap, hold, keyboard and slide-to-cancel interactions.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Retains the complete upstream speech envelope, canvas waveform and gesture model. Demo uses simulated input and never asks for microphone access.
- VoicePill.tsx also supports reactive='mic': an explicit user activation requests microphone access. Connect onStart/onStop to your application; no recording, transcription or upload service is included.
- Hidden-tab/window blur, cancellation, disable and unmount stop active input. Stale permission responses cannot attach to a later session. Pause freezes visual activity; reduced motion removes the waveform loop while the elapsed timer remains functional.
- Pause preserves interaction state. Replay deliberately restarts the demo. Reduced motion removes decorative loops; background and offscreen work is suspended.
- Full portable source, styles and notices are included; import the primitive for your own product context.
React 19.2Modern browsers
React Bits — David Haz · MIT + Commons Clause; reuse separately authorized. Exact notice bundled.
Hugeicons · MIT; installed packages include their notices.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
accentColor | string | #baf6dd | Accent; see primitive interface for full options. |
background | string | #26342f | Capsule; see primitive interface for full options. |
size | number | 40 | Size; see primitive interface for full options. |
shape | string | pill | Shape; see primitive interface for full options. |
mode | string | auto | Interaction; see primitive interface for full options. |
waveform | boolean | True | Waveform; see primitive interface for full options. |
showTime | boolean | True | Timer; see primitive interface for full options. |
paused | boolean | false | Freeze decorative work without clearing input or current state. |
replayToken | number | 0 | Demo-only replay key: changing it starts a fresh local interaction. |