Voice Glow

Light rising from the bottom edge of a voice surface, as if it spills in from outside the screen. It swells with the voice level and breathes while the agent thinks.

Set a timer for ten minutes

Installation

pnpm dlx shadcn@latest add @jds/voice-glow

Usage

import { VoiceGlow } from "@/components/voice/voice-glow"

<div className="relative isolate overflow-hidden rounded-4xl">
  <VoiceGlow state={session.orb} level={session.level} />
  {/* controls */}
</div>

API Reference

VoiceGlow

Prop	Type	Default
`state` Same states as the voice orb.	VoiceState	"idle"
`level` Loudness 0 to 1 of whoever is talking.	number	0
`palette` Colors left to right along the edge. primary follows the theme.	"spectrum" \| "iris" \| "ember" \| "primary" \| string[]	"spectrum"
`intensity` Overall brightness, 0 to 1.	number	1
`radius` Corner radius the edge line follows. Defaults to the container's; pass the display radius at the bottom of a phone screen.	number	–

Push to Talk Voice Orb