Anima un asistente de IA: listening y talking

¿Qué estados necesita el avatar de un asistente de IA?

Un asistente tiene un ciclo de vida más claro que una mascota genérica, porque cada conversación sigue el mismo ciclo: el usuario habla, el modelo trabaja, el modelo responde. El avatar refleja ese ciclo.

Este conjunto se acerca a lo que ya es una convención. AI Elements de Vercel, por ejemplo, incluye un componente Persona basado en Rive con los estados idle, listening, thinking, speaking y asleep (AI Elements). Si diseñas tu propio avatar, usar esos mismos nombres facilita el reemplazo.

¿Cómo diseñar el avatar de un asistente de IA?

El avatar de un asistente suele ser pequeño: una insignia de 32 a 64 px junto a los mensajes, o un personaje más grande en una pantalla de voz. Diseña primero para el tamaño pequeño.

• Haz que la cara sea el centro. Listening, thinking y talking se leen casi por completo en los ojos y la boca. Una cara grande y simple funciona mejor que un cuerpo detallado.
• Dale espacio a la boca para moverse. Talking necesita como mínimo una forma abierta y una cerrada. Si la boca es una línea diminuta, talking será invisible en tamaño de insignia.
• Usa una pose distinta para cada estado. En listening puede inclinarse hacia adelante o ladear la cabeza; en thinking puede mirar hacia arriba o a un lado. Los usuarios deben distinguir los estados de un vistazo, incluso sin color.
• Evita un parecido humano a menos que tengas presupuesto para que resulte convincente. Un personaje abstracto y amigable o una forma suave deja claro que el usuario está hablando con un software.
• Que sea tranquilo. El avatar está junto al texto que el usuario intenta leer. El movimiento suave funciona; los rebotes, no.

Un personaje de frente, con ojos, boca y partes del cuerpo separados, es el más fácil de animar para todos estos estados. Consulta cómo crear una mascota animada para tu app para ver la lista completa de diseño.

¿Cómo asocio listening, thinking y talking a los eventos de chat y voz?

Conecta el avatar a los eventos que ya emite tu stack de chat o voz. Una asignación típica:

Mantén esta lógica en un solo lugar, por ejemplo un reducer que reciba el estado del chat y devuelva el estado del avatar. No disperses llamadas de animación por tus componentes de UI.

Pronto aparecen dos casos límite. Si el usuario interrumpe mientras el asistente está en talking, vuelve directamente a listening. Si una respuesta incluye varias llamadas a herramientas, quédate en thinking entre ellas en lugar de alternar entre thinking y talking.

¿Cómo manejar la latencia entre thinking y talking?

El estado thinking existe para cubrir el intervalo entre enviar una solicitud y ver la respuesta. La forma en que manejes ese intervalo define qué tan rápido se siente el asistente.

Los límites de tiempo de respuesta de Nielsen son un buen marco: unos 0.1 s se perciben como instantáneos, alrededor de 1 s mantiene intacto el hilo de pensamiento del usuario y unos 10 s son el límite para mantener la atención (NN/g). Aplícalos al avatar:

• Cambia a listening al instante cuando se abra el micrófono o empiece la escritura. Esa respuesta debe sentirse inmediata.
• Entra en thinking justo después del envío, pero haz que la transición sea suave para que un primer token rápido no provoque un parpadeo brusco.
• Cambia a talking con el primer token, no cuando llegue la respuesta completa. El texto en streaming junto con un avatar que habla hace que la espera se sienta más corta.
• Pasados unos 10 segundos, agrega un estado en texto como "Buscando en tus archivos" para que el usuario sepa qué está pasando.

Evita un loop de talking que siga después de que el texto haya terminado de transmitirse. Termínalo con el evento de finalización del stream, no con un temporizador.

¿Cómo controlo talking a partir del audio?

Hay tres niveles de fidelidad. Elige el más bajo que se ajuste a tu producto.

1. Un loop de talking genérico. La boca se mueve en un ciclo repetitivo mientras se transmite la respuesta. Es suficiente para el chat de texto, donde los usuarios leen la respuesta y miran el avatar de reojo.
2. Boca controlada por amplitud. Para voz, lee el nivel del audio de salida y envíalo a un valor numérico de la animación, para que la boca se abra más en las sílabas más fuertes y se cierre en las pausas. En Rive es un input numérico o una propiedad numérica del view model que se actualiza en cada fotograma.
3. Visemas. Asigna los fonemas de tu motor de voz a formas de boca. Es la opción más convincente y la que más trabajo requiere. Duolingo usa máquinas de estados de Rive para sincronizar los labios de sus personajes de esta forma en todos sus cursos (blog de Duolingo).

Sea cual sea el nivel que elijas, suaviza la entrada. Los niveles de audio sin procesar saltan mucho y hacen que la boca tiemble. Una media móvil corta o un poco de easing en el valor se ve mucho más natural.

¿Uso Rive o video para un avatar de IA?

Usa un runtime interactivo como Rive para el avatar dentro del producto. Un asistente cambia de estado constantemente y de forma impredecible, a menudo varias veces por segundo en torno a una respuesta corta. Una máquina de estados puede pasar con fluidez de listening a thinking y a talking desde cualquier punto de un loop. Con video, cada estado es un clip distinto, y saltar entre clips a mitad de un loop muestra cortes visibles, a menos que agregues fundidos cruzados y una sincronización cuidadosa.

Los archivos interactivos también te permiten controlar valores de forma continua, como la apertura de la boca según el audio, algo que el video no puede hacer.

El video sigue teniendo su lugar:

• Páginas de marketing y vistas previas en tiendas de apps que muestran al asistente en acción.
• Contextos estáticos como correos y artículos de ayuda.
• Un widget web simple con un único estado en loop. Para la transparencia, entrega WebM VP9 con alfa y MOV HEVC con alfa, porque Safari ignora el canal alfa del WebM (Jake Archibald).

Charmotion incluye los estados de asistente en su set estándar: listening (mood 6) y talking (mood 7) son loops, thinking y sleeping también son loops, y success, error, yes y no son triggers puntuales, todo en un solo archivo de Rive junto con exportaciones en MP4 y video transparente en todos los planes de pago.

¿Cómo hago que un avatar de asistente sea accesible?

El avatar es una decoración sobre la conversación. Todo lo que comunica también debe estar disponible sin él.

• Muestra el estado en texto. "Escuchando", "Pensando" o un indicador de escritura junto al campo de entrada les dice a los usuarios de lectores de pantalla, y a quien no esté mirando el avatar, lo que está pasando.
• Respeta el movimiento reducido. Comprueba prefers-reduced-motion en la web (MDN) y accessibilityReduceMotion en SwiftUI. Cambia los loops por poses estáticas para cada estado, o por un cambio sutil de opacidad.
• Permite pausar. Un loop en reposo (idle) que se reproduce junto al chat durante minutos entra en el criterio WCAG 2.2 SC 2.2.2, que exige una forma de pausar, detener u ocultar cualquier movimiento que empiece automáticamente y dure más de cinco segundos (W3C). La solución más simple es que el avatar quede en una pose fija cuando está en reposo.
• Deja que los usuarios lo desactiven. Una opción para ocultar el avatar o mostrar un ícono estático respeta a quienes encuentran molesto cualquier movimiento junto al texto.
• Ocúltalo de las tecnologías de asistencia. Marca el avatar como decorativo para que los lectores de pantalla no anuncien cada cambio de estado.
• Evita los destellos, sobre todo en el estado de error.

Preguntas frecuentes

¿Qué estados debe tener un avatar de chatbot con IA?

Un avatar de chatbot con IA debe tener loops de reposo (idle), listening, thinking y talking, además de reacciones puntuales de éxito y error. También es útil un estado de sueño (asleep) para las sesiones inactivas. Esto coincide con componentes habituales como Persona de Vercel AI Elements, que usa idle, listening, thinking, speaking y asleep.

¿Cuándo debe pasar el avatar de thinking a talking?

Haz el cambio con el primer token transmitido o el primer fragmento de audio, no cuando llega la respuesta completa. Así el asistente se siente más rápido y la animación va en sincronía con lo que ve el usuario. Vuelve a idle con el evento de finalización del stream.

¿Necesito sincronización labial para un asistente de voz?

No necesariamente. Un loop de talking funciona bien para el chat de texto. Para voz, controlar la apertura de la boca con el nivel de audio resulta convincente con poco trabajo. La sincronización labial completa con visemas, que asigna fonemas a formas de boca, es la más realista, pero necesita datos de fonemas de tu motor de voz.

¿Puedo usar un archivo de video para un avatar de IA animado?

Puedes, pero es limitado. Cada estado se convierte en un clip separado, así que los cambios rápidos entre listening, thinking y talking muestran cortes. Un formato interactivo como Rive cambia de estado desde cualquier fotograma y se puede controlar con valores en vivo, como el nivel de audio.

Respuestas rápidas de esta guía

• ¿Qué estados necesita el avatar de un asistente de IA?

Fuentes

• Persona component, Vercel AI Elements
• Response Times: The 3 Important Limits, Nielsen Norman Group
• How Duolingo's characters lip sync (visemes), Duolingo Blog
• prefers-reduced-motion, MDN Web Docs
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• Video with alpha transparency on the web, Jake Archibald