How to build reactive voice avatars in React with GlasatarJS

Jim Hill — Sun, 14 Sep 2025 10:54:43 +0000

More and more I am designing voice and speech interfaces for AI applications. The way they look and move, as well as the way they sound, plays a big part in how they make the user feel.

So I decided to build a little React (and vanilla JS) library called Glasatar (glasatarjs) which turns a plain audio stream into a living, breathing voice avatar. Avatars have 3 states: speaking, thinking, listening.

Think of it like “privacy glass” that ripples and refracts whenever you talk into the mic. It’s weird, kind of artsy, and honestly pretty fun to play with.

In a nutshell:

Glasatar is:

WebGL powered → runs in the browser with nice GPU effects
React-friendly → drop it in as a component
Configurable → change textures, blur, refraction, colors, backgrounds, you name it
Open source → MIT licensed, so go wild

It works both inside React and as a plain JavaScript library if you don’t want React in your life.

Try it live

👉 Glasatar.com has a demo that lets you play around with it. You can even share your designs.

Pro tip: wear headphones, hit “allow mic,” and say something.

Getting started (React)

Install it from npm:

npm install @jimhill/glasatarjs

Then import the component:

import React, { useState } from "react";
import { Glasatar } from "@jimhill/glasatarjs";

function VoiceAvatar() {
  const [audioStream, setAudioStream] = useState(null);

  const startMic = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    setAudioStream(stream);
  };

  return (
    <div>
      <button onClick={startMic}>Start Voice Avatar</button>
      {audioStream && (
        <Glasatar
          audioStream={audioStream}
          width={400}
          height={400}
          texture="cathedral"
          refractionStrength={15}
          blurAmount={8}
          glassOpacity={0.9}
          avatarColor="#ff9900"
          backgroundType="linear-gradient"
          backgroundGradient={{
            centerColor: "#ff9900",
            edgeColor: "#0000ff",
            angle: 45,
          }}
        />
      )}
    </div>
  );
}

export default VoiceAvatar;

Designing your avatar

The fun part is tweaking. A few knobs you can play with:

texture: "arctic", "cathedral", "autumn", "flemish"
refractionStrength: crank this up for wilder distortion
blurAmount: soften the glass or make it crisp
avatarColor: tint it however you like
backgroundType: solid color, gradient, or even custom images

Swap textures and settings until you find something that feels right for your app. There are more props to play with!

Where could this be useful?

Voice chat apps (Discord-style but weirder)
Podcasting tools (visualise your host while they talk)
Streaming overlays (let your mic make cool effects)
Virtual events / hackathons / games

Or just because it looks cool?!

Wrap-up

This is very much an indie project. I built it for fun, but I’d love to see what other folks do with it. If you try it out:

⭐ the repo on GitHub: github.com/jimhill/glasatarjs
File issues / feature requests via x.com/jimhilluk or bsky.app/profile/jimhill.uk
Share your designs in the comments
Share a demo if you make something cool!

Thanks for checking it out. Hope it helps. ✌️