Orb.js
A procedural galaxy in glass that moves to an AI agent's voice. WebGL1, one script tag.
Orb.js gives a voice agent a body: a procedural galaxy sealed inside a glass sphere, drawn in WebGL1 from a single four-vertex quad. There is no geometry — the sphere, its dual-layer refraction and the chromatic rim are solved analytically in one fragment shader, in GLSL ES 1.00, so it runs wherever WebGL1 does.
A seed string is hashed (FNV-1a) into hue, archetype, phase, meteor cadence and spin, so every agent gets its own sky and gets the same one back tomorrow. The agent's real audio — a MediaStream, an audio element, an AnalyserNode or the microphone — drives four crossfaded states (idle, listening, thinking, speaking) on one smoothed scalar with roughly 350 ms transitions. Premultiplied alpha means the sphere transmits whatever UI sits behind it, light or dark.
It ships as one zero-dependency ES module under MIT: a jsDelivr tag, an <orb-js> custom element, a React wrapper or a classic global script. Version 1.0.0, September 2026. Without WebGL it falls back to a seeded static frame; under prefers-reduced-motion it holds still.
Highlights
- Analytic sphere over a four-vertex quad — no geometry, all GLSL ES 1.00
- FNV-1a seed picks hue, archetype (spiral / nebula / core / deep), phase and spin
- listenTo() accepts a MediaStream, a media element, an AnalyserNode, the microphone or a 0..1 function
- Instanced atlas draws a roster of orbs in one draw call
- Five runnable examples: microphone, TTS, OpenAI Realtime WebRTC, LiveKit, agent roster
- Seeded static frame without WebGL; honours prefers-reduced-motion