'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
AI
AIOrb
A living gradient orb for an assistant: it drifts when idle, breathes while listening, swirls while thinking and pulses while speaking.
import { AIOrb } from '@alea/ui';
Examples
States and sizes
Idle drifts, listening breathes, thinking swirls, speaking pulses. Each state is said in words next to it; the orb itself is decoration unless announce is on.
Ready
Listening
Thinking
Speaking
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-accent…--alea-chart-2…--alea-chart-3…
Motion
--alea-motion-ease-in-out…
Other
--alea-media-backdrop…--alea-on-media…
Props
AIOrb props
A living gradient orb for an assistant: its motion shows what it is doing. Decorative unless announce is on; with reduced motion it holds still.
| Prop | Type | Default | Description |
|---|---|---|---|
announce | boolean | - | Announces state changes (for a voice assistant). Default false: decorative. |
className | string | - | Extra class names. |
size | number | 48 | Size in px. Default 48. |
state | "idle" | "listening" | "thinking" | "speaking" | 'idle' | idle (a slow drift), listening (it breathes), thinking (it swirls) or speaking (it pulses). |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Variants
stateidlelisteningthinkingspeaking- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-orb-ai.alea-orb-ai-glow.alea-orb-ai-core.alea-orb-ai-shine- Data attributes
data-state=listeningdata-state=thinkingdata-state=speaking
Accessibility
- It is decorative by default; with announce it becomes an image named with its state, for voice assistants where the state matters.
- With reduced motion it holds still: the state should also be said in text nearby.
Do and don't
Do
- Use it as the assistant's avatar, or large on a voice screen.
- Say the state in words too: Listening, Thinking.
Don't
- Don't put many orbs on one screen.
- Don't use the motion as the only sign that the assistant is working.
In Figma
AIOrb with State (Idle, Listening, Thinking, Speaking) and sizes 24, 48 and 96.