Una mascota de marca que reacciona a lo que pasa en tu sitio web.
Sube tu mascota e insértala como un canvas de Rive cuyo estado de ánimo define tu página al hacer hover, al hacer scroll, al enfocar un campo de formulario o al completar un pago. Si solo necesitas movimiento, el WebM transparente con un MOV HEVC como alternativa se reproduce sobre tu página en Chrome, Firefox, Edge y Safari.
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 de la página, asignados a la mascota
Evento de la página
Mascota
Entrada
La página carga
enter, luego idle
trigger, mood 0
Hover sobre un llamado a la acción
wave o happy
mood 2 o 1
La sección de precios entra en pantalla
attention
mood 9
Un campo del formulario recibe el foco
listening
mood 6
El formulario se está enviando
loading
mood 5
Sesión iniciada, mensaje enviado
success
trigger
Contraseña incorrecta
error o no
trigger
Sin resultados de búsqueda
sad o sleeping
mood 4 o 8
Conéctala a tu página
const vm = r.viewModelInstance; // after onLoad
const mood = (n) => (vm.number("mood").value = n);
cta.addEventListener("mouseenter", () => mood(2)); // wave
cta.addEventListener("mouseleave", () => mood(0)); // idle
email.addEventListener("focus", () => mood(6)); // listening
form.addEventListener("submit", () => mood(5)); // loading
// when your API answers:
vm.trigger(ok ? "success" : "no").trigger();
El embed web y el componente de React que entregamos (con una prop mood y play()) configuran la instancia de Rive.
Dónde funciona
Webflow tiene un elemento nativo de Rive y Framer un plugin oficial de Rive. WordPress y Shopify aceptan el .riv mediante un embed, o el video con fondo transparente en un bloque de video. Consulta cómo agregar animación a un sitio web.
Límites honestos
Los ojos no siguen el cursor: la mascota alterna entre sus 17 animaciones.
No cruza la página caminando: enter y exit se reproducen en el mismo lugar.
Las expresiones faciales y los saludos con el brazo requieren arte plano; las mascotas 3D se mueven como un todo.
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.
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.
Diseña, anima y obtén enlaces de descarga en el chat
Incluido
Planes
Empieza gratis. Mejora tu plan cuando necesites más.
El .riv interactivo, el video transparente y el código web están en todos los planes de pago, desde Starter ($20/mes). El MP4 y el GIF tienen fondo sólido, que solo se integra si la página tiene el mismo color. Precios en USD; Creem calcula los impuestos al pagar.
¿Puedo agregar la mascota a Webflow, WordPress, Framer o Shopify?
Sí. El elemento de Rive de Webflow y el plugin de Rive de Framer pueden controlar inputs desde interacciones. WordPress necesita un plugin de Rive o un bloque HTML personalizado. Shopify no tiene una sección de Rive, así que sube el archivo e insértalo con Custom Liquid, o usa el video con fondo transparente en una sección de video del tema.
¿El video transparente de la mascota funciona en Safari?
Sí, si incluyes ambos archivos. Safari ignora el alfa de VP9, así que pon primero el MOV HEVC con alfa con type='video/quicktime; codecs="hvc1.1.6.H120.b0"' y después el WebM. Safari elige el MOV; Chrome, Firefox y Edge usan el WebM. El .riv es transparente en todos los navegadores.
¿Una mascota de marca en mi sitio web hará más lenta mi página?
No, siempre que se cargue después del contenido principal. El .riv con arte plano pesa unos 40 KB, pero el runtime web de Rive agrega unos 373 KB con brotli (canvas-lite), así que usa carga diferida cuando la mascota entre en pantalla. Dale al canvas un ancho y un alto fijos para que nada se desplace mientras carga.
¿La mascota puede reaccionar a un formulario de inicio de sesión o al scroll?
Sí. Define el estado de ánimo cuando un campo recibe el foco, mientras se envía el formulario y a medida que las secciones entran en pantalla (un IntersectionObserver funciona bien), y luego dispara success, error, yes o no según el resultado. La guía de mascota para formularios de inicio de sesión explica la conexión paso a paso.
¿Los ojos de la mascota pueden seguir el cursor?
No. El set no tiene input de mirada ni de puntero, así que la mascota alterna entre sus 17 animaciones en lugar de seguir el puntero. El seguimiento de la mirada requiere un rig de Rive personalizado hecho por un animador. Aun así, cambiar el estado de ánimo al hacer hover hace que la mascota se sienta receptiva.
¿Cómo respeto el movimiento reducido con una mascota en mi sitio web?
Comprueba matchMedia('(prefers-reduced-motion: reduce)'); si coincide, deja la mascota en reposo (idle) o pausa la instancia de Rive, y no reproduzcas automáticamente los loops de video. Según WCAG 2.2, el movimiento en loop que dura más de cinco segundos junto a otro contenido también necesita un control para pausarlo.
Archivo de Rive en vivo
