Your AI’s “thinking” shouldn’t be a spinner.
A living orb with five states: idle, listening, thinking, speaking and done. Talk to it below, then take the code for your own product.
Microphone audio is analysed in your browser for volume only. Nothing is recorded or sent anywhere.
Show people what the AI is doing.
Spinners say “wait”. An orb can say “I’m listening”, “I’m working on it” and “here’s your answer”, so voice and chat products feel alive instead of stuck.
Three lines to a living orb.
Plain HTML, CSS and a little JavaScript. No framework, no dependencies, themeable with CSS variables, and it respects reduced motion.
<link rel="stylesheet" href="orb.css">
<div id="orb"></div>
<script src="orb.js"></script>
<script>
const orb = new Orb(document.getElementById('orb'), { size: 320 });
orb.start();
orb.setState('listening'); // idle · listening · thinking · speaking · done
orb.setLevel(0.6); // feed it mic or TTS volume
</script>
Get the Orb kit
orb.css, orb.js, a live mic example and the five colour themes. Free for personal and commercial projects.
Thanks! Your download is ready.
Download orb-kit.zipI’ll design it, and I can build it too.
I’m Michael, a product designer and developer who ships real apps. Voice interfaces, AI chat, SaaS dashboards and the motion that makes them feel alive.