Ir al contenido
charmotion
Empieza ahora
Avatar de chatbot animado

Un avatar de chatbot animado que reacciona a tu agente.

Sube tu mascota de marca o tu logo y obtén un avatar para tu chatbot de IA o agente de voz con los estados que necesita una conversación: loops idle, listening, thinking, loading y talking, además de las reacciones success, error, yes y no. Tu código define un número de mood y dispara triggers a medida que llegan los eventos del agente, y todo el personaje se entrega como un solo .riv liviano.

Míralo en tu app Ver planes
Entrada
Tu mascota, tu logo o una descripción
Estados
listening, thinking, talking + 14 más
Archivo
.riv, unos 40 KB para arte plano
Plan
Starter, $20/mes
Gummo, un personaje de demostración de Charmotion Archivo de Rive en vivo
En loop
Una vez

Este es el .riv real que entrega nuestro motor, reproduciéndose en tu navegador. Es la misma máquina de estados que controlas desde tu app con un input numérico y un trigger por cada reacción puntual.

Eventos del agente asignados a estados del avatar

Evento del agenteEstado del avatarEntrada
Se abre el chat, se conecta la sesiónenter, luego idletrigger, luego mood 0
El usuario empieza a hablar o a escribirlisteningmood 6
El usuario se detiene, el modelo está procesandothinkingmood 3
Llamada a herramienta o recuperación en cursoloadingmood 5
Se transmite la respuesta o se reproduce el audiotalkingmood 7
Tarea completadasuccesstrigger
La solicitud fallóerrortrigger
Confirmar o rechazaryes, notrigger
Nadie ha escrito en un ratosleepingmood 8
Termina la sesiónexittrigger

Un número y algunos triggers

// One Character view model: number "mood" + triggers
const MOOD = { idle: 0, thinking: 3, loading: 5, listening: 6, talking: 7 };
const vm = r.viewModelInstance;
const mood = (m) => (vm.number("mood").value = MOOD[m]);

// Event names are examples: use your SDK's own.
agent.on("user_speech_started", () => mood("listening"));
agent.on("user_speech_stopped", () => mood("thinking"));
agent.on("tool_call_started",   () => mood("loading"));
agent.on("audio_started",       () => mood("talking"));
agent.on("audio_finished",      () => mood("idle"));
agent.on("task_done",  () => vm.trigger("success").trigger());
agent.on("error",      () => vm.trigger("error").trigger());

El código web y React incluido configura la instancia de Rive; tú conectas los eventos de tu agente. Las guías de OpenAI Realtime y ElevenLabs indican los nombres exactos de los eventos.

Lo que obtienes

Un .riv con el view model Character (número mood de 0 a 9 y un trigger por reacción), el mismo grafo como inputs clásicos, una intro de inicio, WebM y MOV transparentes de cada estado, y código para web, React y SwiftUI. Con arte plano, las 17 animaciones pesan unos 40 KB.

Lo que no es

  • Sin lip-sync: talking es un loop que activas mientras suena el audio, no formas de boca para cada sonido.
  • Sin avatares humanos fotorrealistas ni presentadores en video.
  • Sin widget de chat alojado: el avatar va en tu propia interfaz o launcher.
Resultados reales

Archivos entregados, tal como los descargarías.

MP4 Cada set

1080 × 1080 a 60 cuadros por segundo. Aquí: el saludo de Gummo, de un set entregado.

WebM y MOV transparentes Cada set

Incluye canal alfa, por eso se ve el fondo de cuadros. El MOV es HEVC con alfa para apps y editores de Apple.

Kiko pensando, resultado en GIF

GIF Cada set

Vistas previas ligeras para documentación, correo y chat. El loop “thinking” de Kiko.

Video de inicio en 9:16 Cada set

1080 × 1920 para historias y splash screens. La intro de inicio de Sizzle.

kiko.riv · 150 KB

CharacterStateMachine
input numérico mood
0 a 9: idle, happy, wave, thinking, sad, loading, listening, talking, sleeping, attention
triggers: success · error · yes · no · enter · exit
LaunchStateMachine
launch → idle, se reproduce una vez

Máquina de estados (state machine) de Rive Cada set

Un solo archivo pequeño en lugar de 17 videos. Es lo que hace funcionar la demo de la parte superior de esta página.

import { useRive, useStateMachineInput } from "@rive-app/react-canvas";

export function Kiko({ mood = 0 }) {
  const { rive, RiveComponent } = useRive({
    src: "/kiko.riv",
    stateMachine: "CharacterStateMachine",
    autoplay: true,
  });
  const input = useStateMachineInput(rive, "CharacterStateMachine", "mood");
  if (input) input.value = mood; // 0 idle · 1 happy · 2 wave · 3 thinking · 4 sad · 5 loading …
  return <RiveComponent style={{ width: 320, height: 320 }} />;
}

Código listo para pegar Cada set

Componentes para web, React y SwiftUI con el nombre de tu personaje.

Formatos incluidos en cada plan
FormatoEspecificacionesStarter y Todo en uno
MP41080 × 1080, 60 fps, las 17 animacionesIncluido
Video de inicio en 9:16MP4 de 1080 × 1920Incluido
GIFVistas previas de 480 px, fondo sólidoIncluido
Rive (.riv)Vectorial; view model de Data Binding + inputs heredados: mood para los loops, triggers para las reacciones puntuales, máquina de estados launchIncluido
WebM con fondo transparenteVP9 con canal alfa, 1080 × 1080Incluido
MOV con fondo transparenteHEVC con canal alfaIncluido
CódigoComponentes web (HTML), React y SwiftUIIncluido
Descargar todo (.zip)Archivo Rive, código, README y pósters en un solo archivoIncluido
Exportación de videoMP4, GIF, WebM y MOV transparentes, 9:16: elige formatos y animaciones en la página del set, listos en alrededor de un minutoIncluido
Asistentes de IA (MCP)Claude, Cursor, VS Code y CodexIncluido
Planes

Empieza gratis. Mejora tu plan cuando necesites más.

Cambiar de estado en vivo requiere el .riv y el código, que están en todos los planes de pago, desde Starter ($20/mes). Cada set también incluye clips MP4 y GIF de cada estado, suficientes para un video de demostración o una página de ayuda estática. Precios en USD; Creem calcula los impuestos al pagar.

Free

$0para siempre

Pruébalo con tu propio logo y personaje.

Empieza gratis
  • Ideas de animación de logo (3 conceptos)
  • Vista previa en pantallas de app
  • Sin tarjeta
  • 2 diseños con IA (logos o personajes)
  • Funciona desde Claude, Cursor, Codex
  • Soporte por email
Más popular

Starter

20 US$/mes

Para una app o un sitio web.

Elige Starter
  • 3 animaciones de logo al mes
  • 3 sets de personaje al mes
  • Rive, video transparente y código
  • 12 diseños con IA al mes
  • 1 ajuste por animación de logo
  • Tickets de soporte

Todo en uno

100 US$/mes

Para equipos y varias marcas.

Elige Todo en uno
  • 15 animaciones de logo al mes
  • 10 sets de personaje al mes
  • Video 3D cinematográfico incluido
  • 40 diseños con IA al mes
  • 3 ajustes por animación de logo
  • Generación y soporte prioritarios
Preguntas frecuentes

Antes de empezar.

Más en las preguntas frecuentes completas.

¿El avatar de chatbot animado sincroniza los labios con la voz?

No. El estado talking es un loop que reproduces mientras suena el audio, y puedes activarlo y desactivarlo según el nivel de voz para que se vea natural. Las formas de boca por fonema (visemas) no forman parte del set. Nuestra guía sobre lip-sync vs amplitud explica cuándo eso es suficiente.

¿Cómo cambio los estados del avatar con eventos de OpenAI Realtime, ElevenLabs o Vapi?

Escucha los eventos del SDK y asigna el número de mood. Con OpenAI Realtime, input_audio_buffer.speech_started significa listening y speech_stopped significa thinking; onModeChange de ElevenLabs informa si está hablando o escuchando; el SDK web de Vapi emite speech-start y speech-end. Dispara success o error como triggers cuando termine una tarea.

¿Puedo poner el avatar en Intercom, Crisp o en mi propio launcher de chat?

En tu propio launcher o interfaz de chat, sí: el avatar es un elemento canvas o de video que tú controlas. Intercom y Crisp dibujan su messenger en su propio frame, así que no puede animarse dentro de su lista de mensajes. Lo que funciona es ocultar su launcher predeterminado y abrir el messenger desde tu propio botón, que contiene el avatar animado.

¿Un avatar de chatbot animado hará más lento mi sitio?

El .riv con arte plano pesa unos 40 KB para los 17 estados; el arte 3D en modo Motion conserva sus píxeles y pesa más (alrededor de 1 MB en nuestra demo Aegis). El costo mayor es el runtime web de Rive, unos 373 KB con brotli en la compilación canvas-lite, así que cárgalo cuando se abra el chat y no junto con la página.

¿Por qué usar una mascota de marca en lugar de un avatar humano para un agente de IA?

Nadie confunde un personaje dibujado con una persona, así que genera expectativas honestas. Se ve idéntico en cada estado, lleva tu marca al chat y se reproduce desde un archivo liviano en lugar de video en streaming. Las cabezas parlantes fotorrealistas son otro producto, y Charmotion no las crea.

¿Cómo debe manejar un avatar de chatbot el movimiento reducido?

Comprueba prefers-reduced-motion: reduce y, si está activo, deja el avatar en idle o pausado. Nunca hagas que el estado dependa solo del movimiento: muestra un texto como "Pensando…" en un elemento role="status" para que los lectores de pantalla también lo anuncien.

Más información

Guías para este trabajo.

Míralo primero con tu personaje.

Gratis, en tu navegador. Tu imagen se queda en tu dispositivo, a menos que pidas el clip animado corto.

Vista previa gratis

Otras formas de usar Charmotion

PNG a RiveAnimador de mascotas con IADe imagen a animación de personajePara apps de iOSServicio de animación en RiveCreador de logos animadosAnimación de splash screenAnimación de carga con logoMascota de marca para sitio webAnimación de logo con fondo transparenteMascota de marca para apps móvilesGenerador de mascotas de marca con IAHoja de expresiones de mascota