Avatars

Overview

An Avatar is the physical visual representation rendered on your website by the Asiyst SDK. Unlike static image icons, an Asiyst avatar is a dynamic state machine with procedural micro-animations.

Avatar Architecture

Asiyst supports two primary avatar pipelines:

• 3D Interactive (GLB / glTF): Lightweight WebGL-rendered 3D characters with real-time lighting, bone rigging, and physics-based secondary motion.

• 2.5D Animated Vectors: High-DPI SVG / Canvas sprites optimized for ultra-low bandwidth environments (< 10KB assets).

Animation States

The avatar runtime shifts dynamically across distinct states:

• idle: Default breathing, subtle blinking, and procedural floating motion.

• greeting: Waving hand or welcoming gesture triggered on visitor arrival.

• thinking: Animated pulsing or pondering pose during vector retrieval and LLM generation.

• talking: Procedural lip-sync and expressive nodding while streaming conversational output.

• walking: Directional walking transitions when guiding users across long page scrolls.

Customization & Movement

• Cursor Following: The avatar's head and eyes subtly track the visitor's cursor position.

• Drag & Reposition: Visitors can drag the avatar to their preferred corner of the screen.

• Responsive Sizing: Automatically scales from 48px on mobile to 96px on desktop displays.

Explore Avatar Studio for asset creation and configuration.