Cómo agregar una mascota de marca al onboarding y a los estados vacíos

¿Dónde ayuda una mascota y dónde molesta?

Una mascota ayuda en momentos que de otro modo se sienten vacíos o inciertos: la primera pantalla del onboarding, un formulario que espera datos, una lista que todavía está vacía, la confirmación después de un primer éxito. Molesta cuando estorba en la tarea.

Buenos usos:

• Una pantalla de bienvenida donde el personaje saluda al usuario una vez.
• Un formulario de registro o configuración donde "escucha" mientras el usuario escribe.
• El momento en que un paso se completa o falla, como una reacción breve.
• Listas, bandejas de entrada y resultados de búsqueda vacíos, como un loop tranquilo junto a una acción siguiente clara.

Malos usos:

• Bloquear el botón de siguiente hasta que termine una animación.
• Tapar campos de formulario o mensajes de error.
• Reemplazar las instrucciones con las expresiones del personaje. El texto sigue teniendo que explicar qué hacer.
• Movimiento recargado en todas las pantallas. Úsalo en unos pocos momentos de alto valor.

Las pautas de Apple sobre el inicio de apps plantean algo parecido: si quieres un momento de bienvenida con tu marca, ponlo al principio del onboarding y no en la pantalla de inicio (Apple HIG). Eso convierte la primera pantalla del onboarding en el lugar natural para un saludo.

¿Qué reacción de la mascota corresponde a cada paso del onboarding?

Piensa en cada paso como una condición (un loop que se reproduce mientras se cumple) o un evento (una reacción puntual que se reproduce y vuelve). Esta asignación cubre la mayoría de los flujos de onboarding:

Mantén las reacciones cortas para que terminen antes de que el usuario avance, y nunca esperes a que una reacción termine para avanzar. Para ver el catálogo completo de estados y tiempos, consulta estados de animación de una mascota.

Charmotion las genera a partir de una sola mascota subida: diez loops seleccionados con un número mood (0 idle, 1 happy, 2 wave, 3 thinking, 4 sad, 5 loading, 6 listening, 7 talking, 8 sleeping, 9 attention) y seis triggers (success, error, yes, no, enter, exit), todo en un solo .riv con código web, React y SwiftUI en todos los planes de pago.

¿Cómo muestras una mascota en un estado vacío?

Un estado vacío tiene tres partes: qué falta, por qué y qué hacer a continuación. La mascota va arriba o al lado de esas partes, nunca en su lugar.

<section class="empty">
  <canvas id="mascot" width="160" height="160" aria-hidden="true"></canvas>
  <h2>No projects yet</h2>
  <p>Projects you create or are invited to will show up here.</p>
  <button>Create a project</button>
</section>

Elige un loop tranquilo: sleeping o idle encajan con "todavía no hay nada aquí", mientras que attention encaja con "hay algo nuevo esperando". Distintos estados vacíos pueden usar distintos estados de ánimo con el mismo archivo, por ejemplo sleeping para una bandeja de entrada vacía y thinking para una búsqueda sin resultados.

Como el estado vacío puede quedarse mucho tiempo en pantalla, ten en cuenta la regla de accesibilidad sobre el movimiento prolongado. El criterio 2.2.2 de WCAG 2.2 exige una forma de pausar, detener u ocultar el movimiento automático que dure más de cinco segundos junto a otro contenido (W3C). Opciones prácticas: reproducir el loop unas pocas veces y luego pausarlo en un fotograma fijo, agregar un pequeño botón de pausa, o mantener el loop muy sutil y detenerlo por completo con movimiento reducido.

¿Cómo disparas reacciones de éxito y error desde el código de la app?

Define el estado de ánimo cuando empieza una condición y dispara un trigger cuando ocurre un evento. El código de la mascota debe escuchar el estado de tu app, no ser su dueño. En React con Data Binding de Rive, un componente puede recibir el paso y el último resultado como props:

import { useEffect } from "react";
import { useRive, useViewModelInstanceNumber, useViewModelInstanceTrigger } from "@rive-app/react-webgl2";

export function Mascot({ mood, result }: { mood: number; result: { kind: "success" | "error"; id: number } | null }) {
  const { rive, RiveComponent } = useRive({
    src: "/character.riv",
    stateMachine: "CharacterViewModelMachine",
    autoplay: true,
    autoBind: true,
  });
  const vmi = rive?.viewModelInstance;
  const { setValue: setMood } = useViewModelInstanceNumber("mood", vmi);
  const { trigger: success } = useViewModelInstanceTrigger("success", vmi);
  const { trigger: error } = useViewModelInstanceTrigger("error", vmi);

  useEffect(() => { setMood(mood); }, [mood, setMood]);
  useEffect(() => {
    if (result?.kind === "success") success();
    if (result?.kind === "error") error();
  }, [result?.id]);

  return <RiveComponent aria-hidden="true" style={{ width: 160, height: 160 }} />;
}

Pasar un resultado con un id incremental permite que la misma reacción se dispare dos veces seguidas, por ejemplo en dos intentos fallidos. Los nombres de los hooks vienen del runtime de React de Rive (Rive); en web sin framework, el equivalente es r.viewModelInstance.number("mood").value = 6 y .trigger("success").trigger().

¿Cómo lo conectas en SwiftUI, Compose y Flutter?

El patrón es idéntico en todas las plataformas: mantén una instancia de Rive por pantalla y define el estado de ánimo o dispara un trigger desde los eventos de tu view model. Con la API de inputs heredada:

SwiftUI (runtime heredado de Apple, RiveViewModel):

@StateObject private var mascot = RiveViewModel(fileName: "character",
                                                stateMachineName: "CharacterStateMachine")

mascot.view().frame(width: 160, height: 160).accessibilityHidden(true)

// on focus
mascot.setInput("mood", value: 6.0)
// on success
mascot.triggerInput("success")

Android (RiveAnimationView heredado, que también puedes usar desde Compose mediante AndroidView):

riveView.setNumberState("CharacterStateMachine", "mood", 6f)
riveView.fireState("CharacterStateMachine", "success")

Flutter:

final sm = controller.stateMachine;
sm.number("mood")?.value = 6;
sm.trigger("success")?.fire();

Estas llamadas provienen de la documentación heredada de inputs de Rive para Apple, Android y Flutter. Ahora Rive recomienda Data Binding para proyectos nuevos; el nuevo runtime de Apple solo admite Data Binding. Para el movimiento reducido, lee accessibilityReduceMotion en SwiftUI y el ajuste del sistema equivalente en las demás plataformas, y muestra una imagen fija en lugar de la animación.

¿Cómo saber si la mascota está ayudando?

Trata la mascota como cualquier otro cambio en el onboarding y mídela. Señales útiles:

• Tasa de finalización de cada paso del onboarding, antes y después.
• Tiempo por paso. Si aumenta, puede que una animación esté frenando a las personas o distrayendo la atención del formulario.
• Conversión en estados vacíos: con qué frecuencia los usuarios hacen clic en la acción principal de una pantalla vacía.
• Comentarios cualitativos de algunas sesiones de usabilidad, observando si las personas se quedan esperando al personaje.

Mantén la mascota como opcional en el código: si el archivo no carga o el movimiento reducido está activado, la pantalla debe seguir leyéndose y funcionando perfectamente con una imagen estática o sin imagen. Esa alternativa también mantiene rápido el primer inicio en conexiones lentas.

Para la transición del splash screen al onboarding, consulta la guía de animaciones de inicio y splash screen.

Cómo agregar una mascota de marca al onboarding y a los estados vacíos

1. Enumera los momentos. Anota cada paso del onboarding, cada pantalla vacía y los eventos intermedios: foco, envío, éxito, error, omitir.
2. Asigna estados. Asigna a cada condición un estado de ánimo en loop y a cada evento un trigger, por ejemplo listening al enfocar un campo y success al completar un paso.
3. Agrega una instancia por pantalla. Coloca el canvas o la vista de la mascota junto al contenido, oculto para los lectores de pantalla y con dimensiones fijas.
4. Conecta tus eventos. Define el estado de ánimo y dispara triggers a partir del estado existente del view model o del componente, sin bloquear nunca la navegación por una animación.
5. Respeta los ajustes de movimiento. Pausa los loops largos de los estados vacíos tras unos cuantos ciclos u ofrece un control de pausa, y muestra una pose fija con movimiento reducido.
6. Mide. Compara la finalización de pasos, el tiempo por paso y los clics en estados vacíos, antes y después.

Preguntas frecuentes

¿La mascota del onboarding debería hablar?

Solo si la voz aporta algo que el texto no puede. Un loop de habla (talking) es útil en flujos de voz o de asistente. En un onboarding típico, un texto breve más una reacción es más claro, funciona con lectores de pantalla y evita el trabajo de sincronización labial. En cualquier caso, mantén todas las instrucciones en texto real.

¿Qué estado de ánimo conviene para un estado vacío?

Uno tranquilo. Sleeping o idle encajan con "todavía no hay nada aquí"; attention encaja con "hay algo nuevo esperándote". Combínalo con un título, una explicación de una línea y un botón principal, y pausa el loop tras unos cuantos ciclos para que no se repita indefinidamente.

¿Necesito un archivo distinto para cada paso del onboarding?

No. Una máquina de estados (state machine) de Rive contiene todos los estados en un solo archivo, y pasas de uno a otro con un número para los loops y con triggers para las reacciones. Así la descarga es pequeña, el personaje se mantiene coherente entre pantallas y las transiciones entre estados son fluidas porque están en el mismo archivo.

¿Qué pasa si la mascota no carga?

La pantalla debe seguir funcionando. Reserva el espacio, muestra una imagen estática o nada, y mantén cada instrucción y acción en texto y botones normales. Trata la animación como una mejora, nunca como una dependencia, y prueba la pantalla una vez con el archivo bloqueado para confirmarlo.

Respuestas rápidas de esta guía

• ¿Una mascota puede estar en loop para siempre en un estado vacío?

Fuentes

• Launching, Apple Human Interface Guidelines
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• React runtime, Rive
• Data binding (web runtime), Rive
• Inputs (Apple runtime, legacy), Rive
• Inputs (Android runtime, legacy), Rive
• Inputs (Flutter runtime, legacy), Rive
• accessibilityReduceMotion, Apple Developer Documentation