"Avatar expresivo para IA conversacional" es un prototipo de cara de robot basado únicamente en ojos paramétricos animados por SVG, inspirado en el estilo de robots como Vector o EMO. No usa imágenes ni vídeo: cada fotograma se dibuja recalculando la geometría de dos ojos cian (rectángulos redondeados), sus cejas/párpados, sus brillos y la inclinación de la cabeza, sobre un fondo plano oscuro. El objetivo es dar a un asistente de IA una capa visual emocional ligera que comunique estados de ánimo y reaccione al usuario en tiempo real.
El sistema funciona como un motor de expresión: cada emoción es un conjunto de parámetros numéricos (ancho, alto, radio de esquina, posición e inclinación de ceja, factor de sonrisa, color, achatamiento, etc.) y al cambiar de una a otra se interpola con un easing de rebote (easeOutBack) para que el gesto se sienta físico y vivo. Por encima corre un comportamiento continuo autónomo: parpadeos aleatorios, micro-movimientos de mirada (micro-saccades), flotación de reposo, seguimiento del cursor y un ladeo dinámico de cabeza hacia donde mira. Incluye ocho emociones (neutral, feliz, enfadado, triste, sorpresa, sueño, suspicaz, amor) y tres acciones (parpadear, guiño, mirar alrededor).
Es un prototipo de front-end puro, sin backend ni dependencias externas: tres ficheros (HTML, CSS y JavaScript vanilla). No incluye reconocimiento de voz, síntesis ni conexión a un modelo de lenguaje; es la capa de presentación emocional que se conectaría a esos sistemas mediante su API JavaScript interna (setEmotion, blink/wink, lookAround). Pensado como demostración de cómo dar rostro y presencia a un asistente conversacional con un coste técnico mínimo.
- Geometría declarativa en SVG El HTML define un SVG con viewBox 800x520 que contiene, por cada ojo, un rectángulo de relleno cian (con filtro de glow), una elipse de párpado/sonrisa, una ceja y dos brillos circulares; más un grupo de acentos por emoción (corazones, letras Z de sueño, chispas y gota de sudor). app.js no recrea nodos: reescribe sus atributos en cada fotograma.
- Cada emoción es un conjunto de parámetros El diccionario EMOTIONS define ocho estados. Cada uno devuelve valores numéricos por ojo (ancho, alto, radio de esquina, posición e inclinación de ceja, factor de sonrisa, desplazamiento vertical, achatamiento y tinte) más una pose de cabeza (inclinación, desplazamiento, escala). La mayoría de emociones son simétricas; la suspicaz es asimétrica (cada ojo recibe parámetros distintos). Así la expresión es dato, no código gráfico fijo.
- Transición con interpolación y rebote Al llamar a setEmotion se guarda la pose actual (poseFrom) y la nueva (poseTo) y se interpola entre ambas con lerp aplicando easeOutBack durante 560 ms, lo que produce un ligero sobreimpulso que da sensación de vida. La transición arranca siempre desde la pose en curso, no desde el estado base, así no hay saltos. Si el usuario tiene activado 'reduce motion', se sustituye por easeOutCubic sin rebote.
- Bucle de render por fotograma Una función frame() ejecutada con requestAnimationFrame calcula en cada ciclo: el progreso de la transición emocional, el parpadeo, la mirada autónoma o guiada por cursor, la inclinación de cabeza y la flotación de reposo. Luego renderEye('L') y renderEye('R') reescriben la geometría de cada ojo, ceja, sonrisa y brillos.
- Esculpido de la forma con párpados del color del fondo El truco central: las cejas y la elipse de sonrisa tienen el color exacto del fondo facial (variable --face). Al superponerse sobre el ojo cian, lo 'comen' parcialmente y crean la forma emocional (entrecerrar, fruncir, sonreír) sin necesidad de clip-paths. La sonrisa se logra con esa elipse de color de fondo que sube desde abajo recortando el ojo y dejando una curva ascendente.
- Interacción y comportamiento autónomo El cursor controla la mirada (pointermove mapea la posición normalizada a un desplazamiento de gaze acotado) durante 2,2 s; pasado ese tiempo el avatar retoma micro-saccades aleatorios. Tocar o hacer clic en la cara dispara un parpadeo. El panel de botones invoca emociones y acciones directamente sobre la API interna del módulo.
Ocho estados emocionales
neutral, feliz, enfadado, triste, sorpresa, sueño, suspicaz y amor. Cada uno cambia geometría de ojos, posición e inclinación de cejas, color (cian, rojo para enfado, rosa para amor) y pose de cabeza.
Cambio de emoción con animación física
Las transiciones interpolan desde la pose actual a la nueva con easing de rebote (easeOutBack) durante 560 ms, evitando saltos bruscos y dando sensación de gesto natural.
Seguimiento del cursor
Los ojos siguen el puntero en tiempo real mapeando su posición a un desplazamiento de mirada acotado, con suavizado por interpolación; el control del cursor caduca a los 2,2 s sin movimiento.
Mirada autónoma (micro-saccades)
Cuando el cursor no interviene, el avatar genera movimientos de mirada aleatorios cada 1,5-3,8 s (con cierta probabilidad de volver al centro) para parecer atento y vivo, no estático.
Parpadeo natural y aleatorio
Parpadeo automático en intervalos variables (2,6-6,2 s) con curva senoidal, probabilidad (~18%) de doble parpadeo, además de parpadeo al tocar o hacer clic en la cara.
Acciones manuales: parpadear, guiño y mirar alrededor
Tres acciones invocables: un parpadeo puntual; un guiño que cierra solo el ojo derecho mientras esboza una sonrisa (pasa a 'feliz') y vuelve al estado previo; y una secuencia coreografiada de mirada que recorre el entorno en cinco posiciones.
Head-tilt dinámico
La cabeza se inclina, desplaza y escala según la emoción, y añade un ladeo sutil (acotado) hacia el lado donde mira, rotando sobre un pivote situado bajo los ojos.
Flotación de reposo (idle)
Los ojos oscilan suavemente en X e Y con funciones senoidales de distinto periodo para que el avatar nunca quede totalmente quieto.
Brillos reactivos en los ojos
Cada ojo lleva dos brillos blancos cuya opacidad se calcula por fotograma: se atenúan al parpadear, al sonreír y al bajar mucho las cejas, reforzando la lectura de la expresión.
Acentos visuales por emoción
Símbolos animados con CSS que aparecen solo en su estado: corazones flotantes (amor), letras Z ascendentes (sueño), chispas (sorpresa) y gota de sudor (suspicaz).
Accesibilidad y respeto a 'reduce motion'
Detecta prefers-reduced-motion y desactiva el rebote, la flotación y los micro-saccades, reduce la frecuencia de parpadeo y deja los acentos estáticos. El SVG lleva role e aria-label.
- SVG paramétrico: Es el lienzo del rostro. Ojos, cejas, sonrisa, brillos y acentos son nodos SVG cuya geometría (posición, tamaño, radio, rotación, opacidad) se reescribe por fotograma desde JavaScript, en lugar de usar imágenes.
- JavaScript vanilla (estilo ES5, sin frameworks): Contiene todo el motor: diccionario de emociones, interpolación, bucle de render, parpadeo, mirada, head-tilt e interacción. Sin librerías, encapsulado en una IIFE autocontenida con 'use strict'.
- requestAnimationFrame: Conduce el bucle de animación sincronizado con el refresco de pantalla, recalculando cada fotograma la pose emocional y el comportamiento continuo.
- Funciones de easing (easeOutBack / easeOutCubic): Dan el carácter de las transiciones: easeOutBack añade el sobreimpulso/rebote que hace que el cambio de emoción se sienta vivo; easeOutCubic es la alternativa sin rebote para accesibilidad.
- Interpolación lineal (lerp): Mezcla la pose de partida y la de destino para cada parámetro de los ojos y de la cabeza, y suaviza el seguimiento de mirada y los micro-saccades.
- Filtro SVG feGaussianBlur + feMerge (glow): Genera el brillo cian de los ojos difuminando la fuente y fusionándola consigo misma, de modo que el resplandor hereda el tinte de cada emoción (cian, rojo, rosa).
- CSS con custom properties y keyframes: Define la paleta (variables --face, --cyan...), el fondo plano clave para el truco de los párpados, el panel de control y las animaciones de los acentos por emoción (floatUp, riseZ, pop, drip).
- Técnica de párpados del color del fondo: En vez de recortar formas, las cejas y la elipse de sonrisa usan el color exacto del fondo para 'comer' el ojo cian y esculpir cada emoción, evitando clip-paths complejos.
- Pointer Events API: Capta pointermove para el seguimiento del cursor y pointerdown sobre la cara para reaccionar al tacto/clic, funcionando igual en ratón y pantalla táctil (con touch-action: none).
- matchMedia (prefers-reduced-motion): Detecta en JavaScript la preferencia de accesibilidad del usuario para degradar las animaciones de forma elegante, en coordinación con la media query equivalente en CSS.
- Atributos data-* (data-mood): El estado emocional se publica en el atributo data-mood del SVG, lo que permite que el CSS active los acentos correctos sin lógica adicional en JavaScript.
- Capa visual emocional para un asistente conversacional de IA: el rostro cambia de estado según el tono o la intención detectada por el modelo, dando presencia y empatía a la interacción.
- Kioscos y pantallas de atención en recepción, tiendas o ferias, donde un avatar que sigue al visitante con la mirada y muestra estados de ánimo capta la atención y humaniza la máquina.
- Robots de compañía o productos de hardware (juguetes, dispositivos de escritorio, asistentes domésticos) que necesitan una cara expresiva ligera renderizable en una pantalla embebida sin GPU potente.
- Interfaces de voz y chatbots web que ganan feedback no verbal: el avatar parpadea, mira y sonríe mientras escucha o responde, reforzando la sensación de conversación.
- Mascota de marca interactiva en una web corporativa o landing, como elemento diferenciador de bajo coste técnico y alto impacto visual.
- Demostración de producto o herramienta de diseño para iterar el lenguaje expresivo de un avatar antes de integrarlo con voz, NLP o un backend real.
- Dominio de animación procedural en SVG: construir un rostro creíble dibujando geometría por fotograma en lugar de usar sprites o vídeo.
- Diseño de un sistema de animación basado en parámetros y transiciones interpoladas, separando el 'qué' (datos de cada emoción) del 'cómo' (motor de render).
- Sensibilidad por el detalle de la animación: easing con rebote, micro-saccades, parpadeos aleatorios y flotación de reposo para evitar el efecto robótico-estático.
- Capacidad de resolver problemas visuales con técnicas ingeniosas y ligeras (párpados del color del fondo para esculpir formas, sin clip-paths).
- Buenas prácticas de front-end: cero dependencias, código autocontenido en una IIFE, accesibilidad (reduce-motion, aria) y soporte táctil/ratón unificado con Pointer Events.
- Pensamiento de integración: una API interna limpia (setEmotion, blink, wink, lookAround) lista para enchufarse a la salida de un modelo de IA o un sistema de voz.
EVA — agente de IA con memoria y estado afectivo
Un cerebro que envuelve a un modelo de lenguaje con memoria episódica y semántica, estado emocional calculado (modelo PAD), drives de motivación y consolidación. La emoción es estado, no atrezo de prompt.
Ver prototipo →
Asistente de voz con IA local
Interfaz de voz que escucha, piensa y responde con baja latencia usando Whisper (transcripción) y voz neural Piper, ambos ejecutándose en local en el navegador.
Ver prototipo →