Back to Catalog
aistreaming

AI VTuber Avatar

Interactive AI VTuber avatar demo with a Live2D anime character, real-time animations, and chat commands. Built with Pixi.js v8 and TypeScript.

Build Time: 1-2 weeks
Complexity: high

Live Preview

Open in New Tab
/projects/ai-vtuber/

AI VTuber Avatar

An interactive AI VTuber demo built with Pixi.js v8 and Live2D. The avatar (Luna) renders in real time with physics-based animations, expression changes, and gesture commands. Type a command or click a quick button to make her wave, nod, dance, shrug, smile, or wink.

This is the frontend piece of a larger AI VTuber system that includes AI chat (Claude), text-to-speech, and live streaming integration. The demo here focuses on the avatar rendering and animation layer.

Live2D Avatar with Pixi.js v8

The avatar uses the Live2D Cubism SDK rendered through Pixi.js v8's WebGL pipeline:

  • Real-time physics for hair, clothing, and accessory movement
  • Idle animation loop that plays automatically when no commands are active
  • Parameter-level control over individual model parameters (eye blink, mouth, body angle)
  • Expression presets mapped to emotions (smile, sad, wink, blush)
  • Gesture animations built by combining parameter tweens (wave, nod, shrug, dance)

Interactive Commands

The chat panel in the bottom-right corner lets you control the avatar:

  • Wave raises the right hand with a smooth arc
  • Nod tilts the head forward and back
  • Shake rotates the head side to side
  • Shrug lifts both shoulders with a head tilt
  • Dance plays a looping body sway animation
  • Raise Hand holds the arm up in a static pose
  • Smile, Sad, Wink, Blush switch facial expressions

You can also type custom commands in the input field.

Drag and Resize

Click and drag the avatar to reposition her on screen. Scroll the mouse wheel to resize. This makes it easy to frame the avatar for different streaming layouts.

Tech Stack

  • Pixi.js v8 for high-performance WebGL 2D rendering
  • Live2D Cubism SDK for anime-style character animation
  • TypeScript for type-safe animation and parameter control
  • Vite for fast builds and hot module replacement
  • Custom animation engine using requestAnimationFrame and parameter interpolation

Part of a Larger System

The full AI VTuber system includes:

  • AI personality powered by Claude with memory and mood tracking
  • Text-to-speech with lip sync mapped to avatar mouth parameters
  • Kick.com chat integration for live audience interaction
  • OBS WebSocket control for scene switching during streams

This demo shows just the avatar layer. No backend required.

What We Can Build For You

VTuber technology is not limited to streaming. The same Live2D + Pixi.js stack works for:

  • AI assistants with animated avatars in web apps
  • Interactive tutorials with a character guide
  • Customer support bots with a friendly face
  • Gaming companions with real-time expression changes
  • Educational platforms with animated instructors

We handle everything: character rigging, animation systems, WebGL integration, and backend AI.


Designed and developed by BinarCode. 30 engineers, based in Romania. We build interactive web experiences with WebGL, Live2D, and AI integration.

Ready to build your own AI avatar? Get a project estimate from our team.

Key Features

  • Live2D anime avatar with real-time rendering
  • Interactive animation commands (wave, nod, dance, shrug, etc.)
  • Expression system (smile, sad, wink, blush)
  • Drag-to-reposition and scroll-to-resize avatar
  • Chat control panel with quick command buttons
  • Physics-based idle animations
  • WebGL rendering with Pixi.js v8

Technologies Used

typescriptvitepixijs

Like What You See?

We can build something similar for your business.

Start Your Project