Avatar de chatbot animado

Um avatar de chatbot animado que reage ao seu agente.

Q: Como um avatar de chatbot deve lidar com movimento reduzido?

Verifique prefers-reduced-motion: reduce e, quando estiver ativo, mantenha o avatar em idle ou pause-o. Nunca deixe o estado depender só do movimento: mostre um texto como "Pensando…" em um elemento role="status" para que leitores de tela também o ouçam.

Envie seu mascote ou logo e receba um avatar para seu chatbot de IA ou agente de voz com os estados de que uma conversa precisa: loops idle, listening, thinking, loading e talking, além das reações success, error, yes e no. Seu código define um único número de mood e dispara triggers conforme os eventos do agente chegam, e o personagem inteiro é entregue como um único .riv leve.

Veja no seu app Ver planos

Entrada: Seu mascote, logo ou uma descrição
Estados: listening, thinking, talking e mais 14
Arquivo: .riv, cerca de 40 KB para arte plana
Plano: Starter, US$ 20/mês

Gummo, um personagem de demonstração do Charmotion

Arquivo Rive ao vivo

Em loop

Toca uma vez

Este é o .riv real que nosso motor entrega, rodando no seu navegador. É a mesma state machine que você controla no seu app com um input numérico e um trigger para cada reação única.

Eventos do agente mapeados para os estados do avatar

Evento do agente	Estado do avatar	Entrada
O chat abre, a sessão conecta	enter, depois idle	trigger, depois mood 0
O usuário começa a falar ou digitar	listening	mood 6
O usuário para, o modelo está processando	thinking	mood 3
Chamada de ferramenta ou busca em andamento	loading	mood 5
A resposta chega em streaming ou o áudio toca	talking	mood 7
Tarefa concluída	success	trigger
A requisição falhou	error	trigger
Confirmar ou recusar	yes, no	trigger
Ninguém digita há um tempo	sleeping	mood 8
A sessão termina	exit	trigger

Um número e alguns 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());

O código web e React entregue configura a instância do Rive; você conecta os eventos do seu agente. Os guias de OpenAI Realtime e ElevenLabs listam os nomes exatos dos eventos.

O que você recebe

Um .riv com o view model Character (número mood de 0 a 9 e um trigger por reação), o mesmo grafo como inputs clássicos, uma intro de abertura, WebM e MOV com fundo transparente de cada estado e código web, React e SwiftUI. Com arte plana, são cerca de 40 KB para todas as 17 animações.

O que isto não é

Sem lip-sync: talking é um loop que você ativa enquanto o áudio toca, não formatos de boca para cada som.
Sem avatares humanos fotorrealistas nem apresentadores em vídeo.
Sem widget de chat hospedado: o avatar vai na sua própria interface ou launcher.

Resultado real

Arquivos entregues, exatamente como você os baixaria.

MP4 Todo conjunto

1080 × 1080 a 60 fps. Aqui: o wave do Gummo, de um conjunto entregue.

WebM & MOV transparentes Todo conjunto

Canal alfa incluído, por isso o quadriculado aparece por trás. O MOV é HEVC com alfa para apps e editores da Apple.

Kiko em thinking, saída em GIF — GIF Todo conjunto
Prévias leves para documentação, e-mail e chat. O loop “thinking” do Kiko.

Vídeo de abertura 9:16 Todo conjunto

1080 × 1920 para stories e splash screens. A intro de abertura do 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, toca uma vez

State machine do Rive Todo conjunto

Um único arquivo pequeno no lugar de 17 vídeos. É ele que faz funcionar a demo no topo desta 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 pronto para colar Todo conjunto

Componentes para web, React e SwiftUI com o nome do seu personagem.

Formatos incluídos em cada plano
Formato	Especificações	Ideal para	Starter & All in one
MP4	1080 × 1080, 60 fps, todas as 17 animações	Apps, redes sociais, apresentações, vídeos de produto	Incluído
Vídeo de abertura 9:16	MP4 1080 × 1920	Stories, Reels, splash screens	Incluído
GIF	Prévias de 480 px, fundo sólido	Documentação, e-mail, chat, README	Incluído
Rive (.riv)	Vetorial; view model com Data Binding + inputs legados: mood para os loops, triggers para as reações únicas e uma state machine para a intro de abertura	Apps e sites interativos (web, iOS, Android, Flutter)	Incluído
WebM com fundo transparente	VP9 com canal alfa, 1080 × 1080	Sobreposições na web sobre qualquer fundo	Incluído
MOV com fundo transparente	HEVC com canal alfa	Final Cut, Keynote, iOS, Safari	Incluído
Código	Componentes para web (HTML), React e SwiftUI	Cole e publique	Incluído
Baixar tudo (.zip)	Arquivo Rive, código, README e pôsteres em um só arquivo	Entrega para o seu time	Incluído
Exportação de vídeo	MP4, GIF, WebM e MOV transparentes, 9:16: escolha formatos e animações na página do conjunto, prontos em cerca de um minuto	Só os vídeos de que você precisa	Incluído
Assistentes de IA (MCP)	Claude, Cursor, VS Code e Codex	Crie, anime e receba links de download no chat	Incluído

Planos

Comece grátis. Faça upgrade quando precisar de mais.

Alternar estados ao vivo exige o .riv e o código, que estão em todos os planos pagos, a partir do Starter (US$ 20/mês). Todo conjunto também tem clipes MP4 e GIF de cada estado, o suficiente para um vídeo de demonstração ou uma página de ajuda estática. Preços em USD; os impostos são calculados no checkout pela Creem.

Free

$0para sempre

Experimente com o seu próprio logo e personagem.

Comece grátis

Ideias de animação de logo (3 conceitos)
Prévia do personagem em apps
Sem cartão
2 Designs com IA (logos ou personagens)
Funciona no Claude, Cursor, Codex
Suporte por e-mail

Mais popular

Starter

US$ 20/mês

Para um app ou site.

Assinar Starter

3 animações de logo por mês
3 conjuntos de personagem por mês
Rive, vídeo transparente e código
12 designs com IA por mês
1 refinamento por animação de logo
Chamados de suporte

All in one

US$ 100/mês

Para times e várias marcas.

Assinar All in one

15 animações de logo por mês
10 conjuntos de personagem por mês
Vídeo 3D cinematográfico incluído
40 designs com IA por mês
3 refinamentos por animação de logo
Builds e suporte prioritários

FAQ

Antes de começar.

Veja mais nas perguntas frequentes.

O avatar de chatbot animado faz lip-sync com a voz?

Não. O estado talking é um loop que você reproduz enquanto o áudio toca, e dá para ligá-lo e desligá-lo conforme o nível da voz para um efeito natural. Formatos de boca por fonema (visemas) não fazem parte do conjunto. Nosso guia sobre lip-sync vs amplitude explica quando isso basta.

Como troco os estados do avatar a partir de eventos do OpenAI Realtime, ElevenLabs ou Vapi?

Escute os eventos do SDK e defina o número de mood. No OpenAI Realtime, input_audio_buffer.speech_started significa listening e speech_stopped significa thinking; o onModeChange do ElevenLabs informa speaking ou listening; o SDK web do Vapi emite speech-start e speech-end. Dispare success ou error como triggers quando uma tarefa terminar.

Posso colocar o avatar no Intercom, no Crisp ou no meu próprio launcher de chat?

No seu próprio launcher ou interface de chat, sim: o avatar é um elemento canvas ou de vídeo que você controla. O Intercom e o Crisp desenham o messenger deles em um frame próprio, então o avatar não consegue se animar dentro da lista de mensagens. O que funciona é ocultar o launcher padrão deles e abrir o messenger a partir do seu próprio botão, que contém o avatar animado.

Um avatar animado de chatbot deixa meu site mais lento?

O .riv para arte plana tem cerca de 40 KB para todos os 17 estados; arte 3D no modo Motion mantém os pixels e fica maior (cerca de 1 MB na nossa demo Aegis). O custo maior é o runtime web do Rive, cerca de 373 KB com brotli no build canvas-lite, então carregue-o quando o chat abrir, e não junto com a página.

Por que usar um mascote em vez de um avatar humano para um agente de IA?

Ninguém confunde um personagem desenhado com uma pessoa, então ele cria expectativas honestas. Ele fica idêntico em todos os estados, leva sua marca para o chat e roda a partir de um arquivo pequeno, em vez de vídeo em streaming. Cabeças falantes fotorrealistas são outro produto, e o Charmotion não trabalha com isso.

Como um avatar de chatbot deve lidar com movimento reduzido?

Verifique prefers-reduced-motion: reduce e, quando estiver ativo, mantenha o avatar em idle ou pause-o. Nunca deixe o estado depender só do movimento: mostre um texto como "Pensando…" em um elemento role="status" para que leitores de tela também o ouçam.

Saiba mais

Guias para este trabalho.

Veja primeiro com o seu personagem.

Grátis, no seu navegador. A sua imagem fica no seu dispositivo, a menos que você peça o clipe animado curto.

Prévia grátis

Outras formas de usar o Charmotion

PNG para Rive Animador de mascote com IA Imagem para animação de personagem Para apps iOS Serviço de animação Rive Criador de logo animado Animação de splash screen Animação de carregamento com logo Mascote para site Animação de logo com fundo transparente Mascote para apps mobile Gerador de mascote com IA Folha de expressões do mascote