Voice Pill
Zero-dependency audio capture capsule with hardware microphone streaming or simulated speech cadence, real-time DPR-aware canvas FFT visualizer, and slide-to-cancel physics.
Dependencies
lucide-react
Interaction
Compact resting pill expands horizontally over 220ms via cubic-bezier kinematics. Unfolds real-time 80-frame canvas equalizer and monospace elapsed timer. Dragging left beyond 64px triggers physical slide-to-cancel.
Props
| Prop | Type | Description |
|---|---|---|
| accentColor | string | Waveform and status accent color (Peel Acid Lime). |
| stopColor | string | Color for active stop square and cancel indicator (Peel Coral). |
| iconColor | string | Idle microphone icon color. |
| background | string | Capsule shell chassis background. |
| borderColor | string | Hairline border stroke color. |
| size | number | Idle height and width in pixels. |
| shape | "pill" | "rounded" | Capsule corner geometry style. |
| reach | number | Additional extension buffer when expanded. |
| showTime | boolean | Whether to show monospace elapsed clock (0:00). |
| waveform | boolean | Whether to render dynamic canvas audio waveform. |
| slideToCancel | boolean | Enables horizontal slide-to-cancel drag physics. |
| cancelDistance | number | Pixel distance dragged left before triggering cancel. |
| attack | number | Waveform envelope attack time constant (ms). |
| release | number | Waveform envelope release decay constant (ms). |
| sensitivity | number | Audio input gain multiplier. |
| floor | number | Minimum visible waveform bar height ratio. |
| openDuration | number | Expansion transition duration in ms. |
| pressScale | number | Scale transformation on pointer down. |
| mode | "auto" | "hold" | "toggle" | Trigger interaction mode. |
| holdAfter | number | Milliseconds before tap transitions into a hold. |
| reactive | "simulated" | "mic" | Audio source: real microphone or simulated speech. |
| disabled | boolean | Disables recording triggers. |
| ariaLabel | string | Accessible label. |
| onStart | (info: { source: "simulated" | "mic" }) => void | Fired when voice recording starts. |
| onStop | (info: { reason: string; duration: number }) => void | Fired when voice recording terminates. |
| className | string | Additional styling classes. |
MIT License. Free to use in personal and commercial projects. Built for Peel UI.