Voice Avatar

A speaking avatar for a call roster — the photo is a raised circular key; a halo outside it lights up and breathes with the speaker's audio level, so the face never distorts.

tsx

"use client"

import * as React from "react"

import { VoiceAvatar } from "@/registry/seam/ui/voice-avatar"

export default function VoiceAvatarDemo() {
  const [level, setLevel] = React.useState(0)

  React.useEffect(() => {
    const id = setInterval(
      () => setLevel(0.15 + Math.abs(Math.sin(performance.now() / 320)) * 0.85),
      80
    )
    return () => clearInterval(id)
  }, [])

  return (
    <VoiceAvatar
      name="Ada Lovelace"
      src="https://i.pravatar.cc/96?img=5"
      level={level}
      className="size-16"
    />
  )
}

bunx --bun @seamui/cli@latest add voice-avatar

Notes

Dogfoods Avatar (image + initials fallback). Drive it with speaking, a numeric level (0–1), or a track — the shared useAudioLevel hook (the same one as Voice Visualizer) analyses it, so the analyser isn't re-rolled.
With a live level the halo scales and brightens on springs.snappy (spring-smoothed so raw analyser values never jitter it); with only speaking known it settles into a gentle opacity pulse.
Under reduced motion the scale is dropped and the halo's opacity tracks the level — the indicator never disappears while someone is talking.
The halo is decorative (aria-hidden); speaking state is exposed through a visually-hidden role="status" (“Ada is speaking”) that only announces on change, and the avatar carries a real accessible name via its image alt / fallback.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.