Component

Audio Room

An animated speaking-orb grid for audio-only meetings. Renders circular avatars (with initials fallback), a speaking ring, a muted badge, and a raised-hand badge. Column count adapts automatically to the number of participants.

Basic room

Pass a list of participants — each needs an id and name. The grid columns adapt from 1 → 2 → 3 → 4 as participant count grows.

Alice Chen

Bob Smith

Carol White

David Lee

Speaking + muted

Set speaking to add an animated glow ring. Set muted to dim the orb and show a mic-off badge.

Alice is speaking (glowing ring). Bob is muted (dimmed + badge).

Alice Chen

🔇

Bob Smith

Carol White

With raised hands

Set handRaised to show a hand badge at the top-right of the orb. Variants can be combined (e.g. speaking + raised hand).

David has raised his hand. Carol is both speaking and has her hand raised.

Alice Chen

🔇

Bob Smith

✋

Carol White

✋

David Lee

Eve Torres

SpeakingOrb standalone

Use SpeakingOrb independently when you need a single orb outside a grid — in a sidebar participant list, for example.

Idle

Speaking

🔇

Muted

✋

Hand raised

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { AudioRoom, SpeakingOrb } from '@refraction-ui/react'

const participants = [
  { id: '1', name: 'Alice Chen', speaking: true },
  { id: '2', name: 'Bob Smith', muted: true },
  { id: '3', name: 'Carol White', handRaised: true },
]

export function MyRoom() {
  return <AudioRoom participants={participants} aria-label="Audio room" />
}

// Or compose individual orbs:
export function MyOrb() {
  return <SpeakingOrb name="Alice Chen" speaking />
}

AudioParticipant type

tsx

interface AudioParticipant {
  id: string
  name: string
  avatarUrl?: string
  speaking?: boolean
  muted?: boolean
  handRaised?: boolean
}

AudioRoom props

Prop	Type	Default	Description
`participants`	`AudioParticipant[]`	--	List of participants to render as speaking orbs. Each entry must have `id` and `name`.
`className`	`string`	--	Additional CSS classes applied to the grid container.

SpeakingOrb props

Prop	Type	Default	Description
`name`	`string`	--	Participant display name. Used for the initials fallback and `aria-label`.
`avatarUrl`	`string`	--	Avatar image URL. Falls back to initials when absent.
`speaking`	`boolean`	`false`	When true, an animated ring is shown around the orb.
`muted`	`boolean`	`false`	When true, the orb is dimmed and a muted badge is shown.
`handRaised`	`boolean`	`false`	When true, a raised-hand badge is shown at the top-right.
`className`	`string`	--	Additional CSS classes applied to the orb element.