'/%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}
IA
AIOrb
Un orbe de degradado vivo para un asistente: deriva en reposo, respira mientras escucha, gira mientras piensa y late mientras habla.
import { AIOrb } from '@alea/ui';
Ejemplos
Estados y tamaños
En reposo deriva, escuchando respira, pensando gira, hablando late. Cada estado se dice con palabras al lado; el orbe es decorativo salvo que announce esté activo.
Ready
Listening
Thinking
Speaking
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
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
Un orbe de degradado vivo para un asistente: su movimiento muestra qué está haciendo. Decorativo salvo que announce esté activo; con movimiento reducido se queda quieto.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
announce | boolean | - | Anuncia los cambios de estado (para un asistente de voz). Por defecto false: decorativo. |
className | string | - | Clases extra. |
size | number | 48 | Tamaño en px. Por defecto 48. |
state | "idle" | "listening" | "thinking" | "speaking" | 'idle' | idle (deriva lenta), listening (respira), thinking (gira) o speaking (late). |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Variantes
stateidlelisteningthinkingspeaking- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-orb-ai.alea-orb-ai-glow.alea-orb-ai-core.alea-orb-ai-shine- Atributos data
data-state=listeningdata-state=thinkingdata-state=speaking
Accesibilidad
- Es decorativo por defecto; con announce se vuelve una imagen con el nombre de su estado, para asistentes de voz donde el estado importa.
- Con movimiento reducido se queda quieto: di el estado también en texto cerca.
Qué hacer y qué evitar
Hacer
- Úsalo como avatar del asistente, o grande en una pantalla de voz.
- Di el estado también con palabras: Escuchando, Pensando.
Evitar
- No pongas muchos orbes en una pantalla.
- No uses el movimiento como única señal de que el asistente está trabajando.
En Figma
AIOrb con State (Idle, Listening, Thinking, Speaking) y tamaños 24, 48 y 96.