AI
Agent
A face for your AI: a drop of iridescent ink that breathes when idle, ripples to your voice, swirls while thinking, orbits while working, pulses as it speaks — and lands every change of state with a jelly pop.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { Agent, AgentOrb, type AgentState } from '@vizzele/react';
const [state, setState] = useState<AgentState>('idle');
// Orb + live status line ("Thinking…", "Done"…)
<Agent state={state} name="Vizzele" />
// Just the orb, driven by a real mic level (0–1)
<AgentOrb state="listening" level={micLevel} size={160} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
state | 'idle' | 'listening' | 'thinking' | 'working' | 'speaking' | 'success' | 'error' | 'idle' | What the agent is doing. |
level | number | — | Audio level 0–1 while listening/speaking. Omit it and a voice is simulated. |
size | number | 56 (Agent) · 120 (AgentOrb) | Orb diameter in px. |
name | ReactNode | — | Agent name above the status. |
label | ReactNode | — | Custom status text (e.g. "Searching the docs…"). |
layout | 'row' | 'stack' | 'row' | Orb beside or above the text. |
Accessibility
- The status line is a polite live region: screen readers hear each new state.
- Each state has its own shape cue (ripples, arc, orbit, check, cross), not only a color.
- Reduced motion: no swirl, ripples or shake — colors and glyphs still change.