yagnikbarasiya2306@gmail.com

Web · Voice agent orb

Orb

An assistant you can see listening.

A WebGL orb for voice agents that idles, listens, thinks and speaks, each with its own motion and colour, and moves with live audio from the microphone or the agent’s voice.

View on GitHub Live demo
Platform
Any modern browser · any framework
Size
4.7 KB gzip
Dependencies
None
Licence
MIT · free for client work

Demo

A recording of the demo. Open it in a new tab

What it does

  1. 01

    One fragment shader draws a noise-shaped, rim-lit sphere; no Three.js

  2. 02

    Mic and agent audio drive the surface through a damped spring, so it never jitters

  3. 03

    States blend over 400 ms instead of snapping

  4. 04

    Pauses off-screen, falls back to CSS without WebGL, calms down for reduced motion

Use it

Get the filesbash
git clone https://github.com/YagnikBarasiya23/orb-voice-visualizer.git
# copy orb.js and orb.css into your project
Examplehtml
<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.setState('listening'); // idle | listening | thinking | speaking
</script>

Every option, the technique behind the motion and the accessibility notes are in the README on GitHub

More components

All 15
  • Web

    07 · Agent run timeline

    Trace

    Show the work, not a spinner.

    • 5.7 KB gzip
    • No dependencies
    • Free · MIT
  • Web

    08 · Prompt composer

    Vanish

    Messages that turn to particles and rebuild.

    • 4.5 KB gzip
    • No dependencies
    • Free · MIT

Get in touch

Open for freelance projects, contract roles and collaborations — mobile apps and full-stack products in particular. WhatsApp gets the fastest reply.

Message on WhatsApp Send an email
Based in
Rajkot, Gujarat, India
Elsewhere