DEV Community

Cover image for How to build reactive voice avatars in React with GlasatarJS
Jim Hill
Jim Hill

Posted on

How to build reactive voice avatars in React with GlasatarJS

#react #webgl #ui #ai

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.

This shows an image of a round avatar with a pink rippled shape that reflects the waveform being spoken.

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

Getting started (React)

Install it from npm:

npm install @jimhill/glasatarjs
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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:

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

Top comments (0)