Persona

An animated AI visual powered by Rive WebGL2 — idle, listening, thinking, speaking, and asleep, with multiple look variants.

States

Drive state between idle, listening, thinking, speaking, and asleep.

Loading…

Installation

CLI

npx @sonojs/ui@latest add persona

Also needsnpm i @rive-app/react-webgl2

Usage

persona.tsx

import { Persona } from "@/components/sonojs/persona"

export function Example() {
  return <Persona className="size-32" state="listening" variant="obsidian" />
}

Props

Prop	Type	Default	Description
state	"idle" · "listening" · "thinking" · "speaking" · "asleep"	"idle"	Conversational state for the Rive state machine.
variant	"obsidian" · "command" · "glint" · "halo" · "mana" · "opal"	"obsidian"	Which Rive asset / look to load.
className	string	—	Size and layout on the canvas (default `size-16`).
onLoad / onReady / onPlay / onPause / onStop	callbacks	—	Rive lifecycle hooks.