The Orb

The voice bar and the voice orb both paint something while a call is running. By default that is a small waveform built from plain DOM elements, which works everywhere. The orb is the other option: a liquid glass sphere rendered on the GPU from a fragment shader, which reacts to what the agent is doing and to the audio in the room.

#Turning it on

Open your project → Appearance → Launcher → Visualizer, and switch from Waveform to Orb. Pick one of the thirteen presets and you are done. The setting applies to both the voice bar and the voice orb; panel mode has no live audio surface, so it does not apply there.

For finer control, Open Orb Studio gives you every parameter the shader reads: motion, shape, lighting, the glass shell, the edge, and all twelve colours. It has a state scrubber so you can see each agent state on its own, and a Simulate a call button that runs the whole sequence with synthetic speech before you ever place a real one.

#What it reacts to

The orb is the agent's face rather than a decoration, so it moves with the conversation. Each of the eight agent states nudges your chosen preset rather than replacing it, and a spring carries the orb between them so a live call never cuts from one look to another. Your colours survive every state.

On top of that, the orb follows real audio. While the caller is talking it tracks their microphone level; while the agent is talking it tracks the agent's own output. Thinking and running an action deliberately track nothing, because there is no audio during either and inventing some would be a lie the visitor can feel.

The Audio response slider sets how far that goes. At 0 the orb still animates and still changes with agent state, it just stops following the voice. State tint blends the state colours you configured under Live state colours into the orb's glow and rim, so one setting drives both the launcher and the orb.

#Setting it in code

The same settings are plain ui options if you would rather pin them to a build than leave them editable per project. Anything you leave out falls back to the preset's own value:

import { VoxideClient } from "@voxide/react";
 
const ai = new VoxideClient({
  publicKey: "vox_pub_...",
  ui: {
    launcherMode: "voice-bar",
    visualizer: "orb",
    orb: {
      style: "voxide",     // or siri, aurora, chrome, porcelain, …
      reactivity: 0.55,    // 0 to 1: how far live audio moves it
      statusTint: 0.35,    // 0 to 1: how much the state colour tints it
      glowColor: "#FF6600",
    },
  },
});

Code wins over the dashboard, and the dashboard wins over the built-in defaults, which is the same precedence every other appearance option follows.

#Browser support and the fallback

The orb needs WebGPU. That is Chrome, Edge, Opera and Samsung Internet since version 113, Safari since version 26, and Firefox since 141 on Windows and 145 on Apple Silicon, though it remains off by default in a number of Firefox builds. In round numbers, about five browsers in six.

Turning the orb on is still safe everywhere. If a visitor's browser cannot create a GPU adapter, or the shader fails to compile, or the graphics device is lost mid-call, the widget falls back to the waveform on its own and the visitor sees a working launcher with no error. Nothing you have to handle.

#A note on presets

Every preset except one was authored on a dark background, and their core tone is close to black. On a light page they read as a dark glass marble, which is often exactly right. Porcelain is the one built for light pages, and the studio has a light and dark page toggle so you can check either before you ship. If you want to take any other preset lighter, Core tone under Fluid is the colour to reach for: it is the orb's own body, not a page background.