# Qivi an expressive particle avatar for AI agents (React + Three.js)

**URL:** <https://discourse.threejs.org/t/qivi-an-expressive-particle-avatar-for-ai-agents-react-three-js/94962>\
**Category:** Showcase\
**Created:** [October 3, 2026, 6:40am UTC](https://discourse.threejs.org/t/qivi-an-expressive-particle-avatar-for-ai-agents-react-three-js/94962 "2026-10-03T06:40:27Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![yrathod33](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yrathod33/32/73086_2.png) [@yrathod33](https://discourse.threejs.org/u/yrathod33)\
**Post date:** [October 3, 2026, 6:40am UTC](https://discourse.threejs.org/t/qivi-an-expressive-particle-avatar-for-ai-agents-react-three-js/94962/1 "2026-10-03T06:40:27Z")

</div>

Hi all! I’ve been building Qivi, a particle “face” for AI agents, and wanted to share it here since it’s all Three.js under the hood.

- Up to 38k points in a single draw call. Shape, expressions, eyes, and mouth are driven by shader uniforms, so React never re-renders per frame
- Orthographic camera; the particle budget scales with on-screen size
- Mouth and body react to Web Audio analysis of a mic, an audio element, or a MediaStream
- SVG fallback for tiny sizes, reduced-motion support, pauses when offscreen

**Live demo:** [Qivi — a companion with character](https://yogeshhrathod.github.io/qivi/)  
**Try it in StackBlitz:** [Qivi Quickstart Example - StackBlitz](https://stackblitz.com/github/yogeshhrathod/qivi/tree/main/examples/quickstart?file=src%2FApp.tsx)  
**Code (MIT):** [GitHub - yogeshhrathod/qivi: Customizable particle-based AI companion for React · GitHub](https://github.com/yogeshhrathod/qivi)

The promo video was rendered frame-accurately by faking the browser clock in Playwright and stepping 1/30 s per screenshot. Happy to share details if that’s useful to anyone.