Avatar Overview

Overview

An Asiyst Avatar is an interactive, animated visual character rendered directly on your website. Rather than relegating your AI assistant to an anonymous text chat widget in the corner of a screen, Asiyst gives your AI a living presence with realistic skeletal animations, emotional micro-gestures, and synchronized lip movement.

The Visual AI Agent Philosophy

Visual agents fundamentally transform user engagement compared to traditional text-only chatbots:

• Immediate Visual Trust: An animated guide establishes a recognizable brand persona that welcomes visitors.

• Micro-Animations & Empathy: Subtle breathing, nodding while listening, and thinking poses communicate responsiveness and system state without relying on loading spinners.

• Physical Site Guidance: Avatars can physically walk across the screen, point at specific UI elements (e.g., checkout buttons or navigation menus), and guide visitors through complex workflows.

Rendering Architecture: WebGL & Canvas

┌─────────────────────────────────────────────────────────────┐
│                      Host Web Page                          │
│  ┌───────────────────────────────────────────────────────┐  │
│  │   Shadow DOM Container (Isolated CSS Styles)          │  │
│  │   ┌────────────────────────┐  ┌────────────────────┐  │  │
│  │   │  WebGL Canvas (3D GLB) │  │ Reactive Speech    │  │  │
│  │   │  Bone Rigging & Draco  │  │ Bubble & Prompts   │  │  │
│  │   └────────────────────────┘  └────────────────────┘  │  │
│  └───────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘

• Zero CSS Pollution: The entire avatar renderer and speech bubble UI are mounted within an encapsulated Shadow DOM tree.

• Draco Geometry Compression: 3D glTF/GLB models are compressed to under 1.8 MB, downloading and rendering in < 200ms over 4G connections.

• Battery & GPU Efficiency: When the avatar is idle or scrolled out of view, the WebGL render loop automatically pauses to achieve 0% CPU overhead.

Avatar Lifecycle & Publishing

1. Design & Setup: Configure appearance, colors, scale, and lighting in Avatar Studio.

1. Animation Rigging: Assign seamless looping glTF animation tracks for idle, walking, talking, and thinking states.

1. Publishing: Click Publish to compile an immutable, CDN-cached asset bundle.

1. Project Assignment: Link the avatar to your web project in the dashboard.

1. Runtime Rendering: The SDK streams the model and mounts the WebGL canvas upon initialization.

Built-In Characters vs Custom 3D Models

• Built-In Character Library: Asiyst includes over 20 pre-rigged, production-ready 3D characters (modern robots, stylized human guides, geometric tech mascots) that require zero 3D modeling experience.

• Custom glTF / GLB Uploads: Upload your own 3D brand mascots crafted in Blender, Maya, or Ready Player Me.