Voice agent visualiser

An assistant you can see listening.

A WebGL sphere that idles, listens, thinks and speaks. Each state has its own motion and colour, and live audio from your mic or the agent's voice moves the surface.

Colours

Use it

<link rel="stylesheet" href="orb.css">
<div id="orb" style="width: 320px"></div>

<script type="module">
  import Orb from './orb.js';

  const orb = new Orb(document.querySelector('#orb'));

  orb.listenTo(await navigator.mediaDevices.getUserMedia({ audio: true }));
  orb.speakFrom(document.querySelector('audio'));   // the agent's voice

  orb.setState('listening');   // idle | listening | thinking | speaking
  orb.setLevel(0.6);           // or feed loudness from a realtime API
</script>