AI voice orb

An animated Siri-style orb with looping conic-gradient waves and glow for AI assistant interfaces.

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/ai-voice-orb.json

Usage

Wrap the orb in a relative-positioned container with a fixed height so the absolute-positioned panel has room to expand.

TSImport

import { SiriOrb } from "@/components/ui/ai-voice-orb";

TSExample

import { SiriOrb } from "@/components/ui/ai-voice-orb";

export function Example() {
  return <SiriOrb size="192px" />;
}

Composition

Anatomy of the SiriOrb primitive.

SiriOrb                        (single self-contained client component)
├── size                       (CSS size, default "192px" — drives all responsive math)
├── animationDuration          (number, seconds per loop, default 20)
├── colors                     ({ bg?, c1?…c5? } gradient overrides)
└── className                  (merged via cn onto the root element)

All styling ships in an inline <style> tag scoped to `.siri-orb` — no
external CSS file is required. Decorative only (aria-hidden by nature).

Default

The brand-colored orb at its default 192px size. Purely decorative — waves rotate and glow on a smooth loop, and the animation pauses under `prefers-reduced-motion`.

Small

Pass a smaller `size` (e.g. `96px`). All blur, contrast, dot, and mask values scale automatically off the size.

Custom colors

Override any of `colors.c1`–`c5` / `bg` and tune `animationDuration` to retheme the orb.

Voice reactive

Drive the orb off live audio. A Web Audio `AnalyserNode` reads the mic's RMS amplitude each frame; the level pulses the orb's scale + glow with a transitions-dev (card-resize) smoothing curve. Click "Use microphone" to grant access, or drag the slider to simulate amplitude.

Simulate

System audio reactive

Same RMS analysis, but routed from an `<audio>` element through a `MediaElementSource` instead of the mic — so the orb pulses to whatever's playing. Hit play to hear a sample clip and watch the orb track it.

API Reference

Props exposed by the SiriOrb component.

Prop	Type	Default	Description
`size`	string	"192px"	CSS size of the orb. All blur / contrast / dot / mask values are derived from this.
`animationDuration`	number	20	Seconds for one full rotation of the gradient waves.
`colors`	{ bg?; c1?; c2?; c3?; c4?; c5?: string }	Squad brand palette	Override the background and the five gradient colors (any subset). Defaults: c1 #513DE5, c2 #341756, c3 #F9635D, c4 #A960FF, c5 #F2AF39.
`className`	string	—	Extra classes merged onto the root container.