Open source · MIT

Voice orb

An audio-reactive orb for voice interfaces, drawn in WebGL2. Play any voice through it, tune the look, and take the code. Open source, MIT licensed.

Get the code How it works

Built by UV · MIT licence

TwilightViolet to orchid

Voice

A voice orb, explained

Press play, or click the orb, and it tells you how it works while it moves with the voice.

Type

Ground

State

01Controls

Tune

Every slider changes every orb on the page. Hover the i for what each one does, and copy the settings to share a look.

Field

The colour pattern, its texture and how it sits on the ball.

Sphere0.85

Warp0.80

Detail1.10

Grain0.22

Motion and voice

How time and speech move and light the orb.

Drift speed1.00

Fluid0.70

Pulse rings0.60

Highlight0.70

Grade

Exposure and colour over the finished orb.

Exposure0.00

Saturation1.00

02Inside

How the orb is built

Four layers, each one live below with the palette you chose. Then the path a voice takes from the speaker to the colour.

1
A colour field
Four colour stops, deep to light, laid out by layered noise. Flat and still.
2
Wrapped on a sphere
Every point goes through a lens: the middle magnifies, the edge compresses, and the flat field reads as a ball.
3
Drifting
The noise is warped through itself and a clock moves it. Time alone does this: it is the orb at rest.
4
Moved by a voice
The voice stirs a small fluid, sends rings outward and lights the rim. Grain and a grade finish it.

From a voice to the colour

AudioA file, a link, your microphone, or a live call.
AnalyserWeb Audio reads the spectrum every frame.
Four bandsBass, low mid, high mid, treble, each 0 to 1.
Clocks and liquidLoudness speeds the drift; bass stirs a 128 × 128 fluid.
ShaderOne WebGL2 pass draws the ball, shared by every orb.

03States

Six states

The same orb in each state. Talking and listening run on simulated voices here.

Dormant

When: Not chosen yet, like the side orbs of a carousel.
Drives: One still frame, smaller and quieter. Nothing to draw after it.

Ready

When: Chosen, nothing playing.
Drives: A slow drift of the colour, on time alone.

Connecting

When: Placing the call, waiting for the first word.
Drives: A faster drift and a circling highlight, so waiting reads as working.

Listening

When: The caller is speaking.
Drives: The orb draws in and the highlight leans toward the caller's voice.

Talking

When: The agent is speaking.
Drives: Bass stirs the liquid, low mid sends waves, treble lights the highlight. Loudness speeds it all.

Settled

When: The call has ended.
Drives: A slower, dimmer drift. The orb stays chosen.

04Types

Four types

The same palette and voice in each type, all talking.

Painted

Chosen

A soft painted field wrapped onto a sphere, drifting on layered noise, with film grain. The default.

Glass

A clear ball: bright fresnel rim, a sharp specular point and caustic threads moving inside. Reads as a physical object.

Silk

Ribbons of the palette flowing across the sphere, like an aurora drawn inside a ball. Speech lifts and widens them.

Halftone

The painted field printed as a dot screen on pale paper, the darker the colour the bigger the dot. Speech swells the dots.

05Palettes

Palettes

Five ramps, deep to light, each with a glint of a neighbouring hue. Or pass four colours of your own.

Twilight

Chosen

#4a3aff
#8a7fff
#d2cfff
#f6c9ff

Violet shadows, a lavender body and an orchid glint.

Sunset

#55206e
#e8566c
#ffab73
#ffe6a6

Plum shadows, a coral body and a gold glint.

Lagoon

#003f86
#018dff
#8fd2ff
#c4fff1

Navy shadows, a sky blue body and an aqua glint.

Forest

#0b5134
#1da463
#93e2b6
#fff0b8

Pine to mint, with a glint of sunlight.

Midnight

#080064
#4a3aff
#bfbaff
#ffffff

Indigo to violet with a white glint: the neutral orb.

06Use it

Use it in your project

It is a React component and a few plain TypeScript files, no orb library to install. Clone it, copy it in, or let Claude wire it up.

Get the code

Run it

Clone the repository and start the page you are reading.

git clone https://github.com/imuvrays1/voice-orb.git
cd voice-orb
pnpm install
pnpm dev

Copy it in

Copy src/lib/orb, src/components/VoiceOrb.tsx (and its CSS) and src/data/orb.ts into your React app, with LICENSE, and keep the notice at the top of each file. Then give it any AnalyserNode.

import VoiceOrb from "@/components/VoiceOrb";
import { AnalyserLevels } from "@/lib/orb/audio";

// Any Web Audio AnalyserNode: an <audio>, the mic, a voice SDK.
const voice = new AnalyserLevels(analyser);

<VoiceOrb palette="twilight" state="talking" voice={voice} />

3
Ask Claude
Install Voice orb by UV, the Claude Code skill, then ask for an orb. It copies the files with their licence and connects your audio.
```
/plugin marketplace add imuvrays1/voice-orb
/plugin install voice-orb-by-uv@voice-orb

Add a voice orb to my call screen
```

Props

paletteid or 4 colours: twilight, sunset, lagoon, forest, midnight, or [deep, mid, light, glint].
variantstring: painted, glass, silk or halftone.
statestring: dormant, ready, connecting, listening, talking or settled.
voiceLevelSource: The speaker. Read while talking.
callerLevelSource: The person listening, usually the mic. Read while listening.
paramsPartial<OrbParams>: The sliders above: paste what Copy settings gives you.
sizeCSS length: The orb is square. Defaults to 240px.
labelstring: Names it for screen readers; without one it is decorative.

The files

src/components/VoiceOrb.tsxThe component: states, easing, the drift and pulse clocks.
src/lib/orb/renderer.tsOne shared WebGL2 context draws every orb on the page.
src/lib/orb/shaders.tsThe four types, and the lens, noise, lights and grain they share.
src/lib/orb/fluid.tsThe voice's liquid: a small stable-fluids simulation on the GPU.
src/lib/orb/audio.tsWeb Audio: four calibrated bands, the mic, tab audio, a simulated voice.
src/data/orb.tsPalettes, states, slider ranges and this page's words.

07Engine

Engine notes

What keeps it fast and well behaved. The full story, with what broke on the way, is in the build journal.

One renderer, many orbs

Every orb shares one hidden WebGL2 context and copies its frame into its own canvas. Browsers drop contexts past about sixteen, so one per orb would break a page like this.

No image assets

Each type is a fragment shader: a colour field wrapped onto a sphere, bent by layered noise, lit from the top left and finished with grain.

Calibrated to the voice

Each band calibrates to itself, so a quiet recording and a loud microphone both use the full range. A running total drives the drift, so speech speeds it and silence lets it coast.

Live calls

Anything with a Web Audio AnalyserNode can drive it. Voice SDKs often expose one for the agent's audio; a second on the microphone drives listening.

Rules it keeps

Draws only on screen and in a visible tab, holds a still frame under reduced motion, survives a GPU reset, and resting side orbs cost nothing after their first frame.

Read the build journal

Every step from a blank canvas to this page: what was tried, what broke, and the fix.

Open the journal