Voice Glow

A sound-reactive glow — a centered, colorful beam along the bottom edge of any element that rises and blooms with real microphone input. Click the mic below and speak.

Click to start the mic

Simulate "processing" state

Installation

Terminal

npx gotlui add voice-glow

Usage

page.tsx

import { VoiceBeam, useMicrophone } from "@/components/gotlui/voice-glow"

function Chat() {
  const mic = useMicrophone()

  return (
    <>
      <button onClick={mic.start}>Start mic</button>

      <VoiceBeam
        stream={mic.stream}
        type="default"          // 'default' | 'pill' | 'mobile'
        colorVariant="colorful" // colorful | mono | ocean | sunset | forest | candy | ice | gold
        theme="dark"            // dark | light | auto
        processing={false}      // true -> traveling beam while "thinking"
      >
        <div style={{ padding: 16, borderRadius: 16, background: "#1a1a1a" }}>
          Your chat input here
        </div>
      </VoiceBeam>
    </>
  )
}

Key props

Prop	Type	Description
stream	MediaStream \| null	Audio to react to — get one from useMicrophone() or any getUserMedia source.
level	number \| (() => number)	Manual 0–1 drive when no stream is given.
type	'default' \| 'pill' \| 'mobile'	Host preset that retunes the glow's geometry.
colorVariant	'colorful' \| 'mono' \| 'ocean' \| 'sunset' \| 'forest' \| 'candy' \| 'ice' \| 'gold'	Palette for the beam.
theme	'dark' \| 'light' \| 'auto'	Adapts beam colors to the background.
processing	boolean	Switches to a traveling beam, for a "thinking" state.
sensitivity	number	Input gain on the analysed audio. Default 3.1.
reach	number	How tall the glow grows at full level. Default 1.2.
active	boolean	Turns the effect on/off, fading it out when false.

Originally from Libraries.dev by Jakub Antalik, MIT licensed. It has 50+ props for fine-tuning geometry, color, and motion — see the source for the full list.