Voice

A sound-reactive glow along the bottom edge of a chat input or a phone screen — a centered, colorful beam that rises and blooms with the voice, and gathers into a travelling beam while the reply is thought through.

Preview Install & Usage

Tune in Studio Copy prompt

Add the Voice effect from Libraries.dev to my React app.

Install:
npm install voice-beam

Usage:
import { VoiceBeam, useMicrophone } from 'voice-beam';

const mic = useMicrophone();

<VoiceBeam stream={mic.stream} processing={thinking}>
  <ChatInput />
</VoiceBeam>

<button onClick={mic.state === 'live' ? mic.stop : mic.start}>
  {mic.state === 'live' ? 'Stop' : 'Listen'}
</button>

// Without a microphone, drive it yourself (0–1, a number or a per-frame getter):
<VoiceBeam level={() => meter.current}>
  <Card />
</VoiceBeam>

Props:
- type: "default" | "pill" | "mobile" — geometry preset for a ~350px chat input, a ~150×44 recording pill or the bottom of a phone screen
- stream: MediaStream to react to (wins over level); level: 0–1 number or getter
- processing: boolean, gathers the glow into a beam that travels its range while work is in progress
- colorVariant: "colorful" | "mono" | "ocean" | "sunset" | "forest" | "candy" | "ice" | "gold"
- colors: up to 7 lobe colours; bandColors: { core, above, mid, below }
- sensitivity, threshold, attack, release: the input chain (gain, gate, envelope)
- reach, spread, flow, bend, idle: the shape of the reaction
- theme: "dark" | "light" | "auto"
- strength: 0-1, effect opacity; active, paused; scale

Voice wraps a child element and overlays a sound-reactive glow along its
bottom edge: a centered, colorful beam that rises and blooms with the
voice. It auto-detects the child's border radius, ships zero runtime
dependencies and needs React 18 or newer. The microphone needs a secure
context (https or localhost) and mic.start() called from a user gesture.
Docs: https://libraries.dev/voice.html