Painted CSS orb for voice agents, a cobalt tide rising into scarlet that breathes faster across idle, listening and speaking states. Decorative and reduced-motion aware.
The source comes with full access.
One payment of $149 ($49 for now) opens the source right here and lets the CLI install every paid component, with lifetime updates.
pnpm dlx shadcn add @01orbital/voice-orbnpx shadcn add @01orbital/voice-orbyarn shadcn add @01orbital/voice-orbbunx --bun shadcn add @01orbital/voice-orbPart of the 01orbital library. With a license, put ORBITAL_TOKEN in .env.local and the same command installs it (licensed install, pricing).
It lands at components/orbs/voice-orb.tsx, as source you own and edit.
import { VoiceOrb } from "@/components/orbs/voice-orb"
type DemoProps = {
// Controlled by the shared Browse playback button.
motion?: boolean
}
export default function Demo({ motion = false }: DemoProps) {
return (
<div className="grid w-full flex-wrap place-items-center gap-8 p-6">
{(["idle", "listening", "speaking"] as const).map((state) => (
<figure key={state} className="flex flex-col items-center gap-4">
<VoiceOrb state={state} motion={motion} size={180} />
<figcaption className="text-sm text-muted-foreground capitalize">
{state}
</figcaption>
</figure>
))}
</div>
)
}Prop
Type
It also accepts the HTML attributes of the element it renders.
npm: cn. The CLI installs them for you.
Registry pieces it installs with it:
Suggest Field
Textarea with inline completion: a ghost suggestion follows the text, Tab accepts and Esc dismisses, and a Suggest button turns into Accept beside Dismiss. The caller supplies the suggestion.
Navbar
Site header built on Navigation Menu in left, centered-links and centered-logo layouts. Container queries hide links on narrow widths and wrap actions; parts include logo, links and actions.