Agrega una mascota Rive a una app de Lovable

¿Lovable puede instalar el runtime de Rive?

Sí. La documentación de Lovable indica que nombres el paquete en el chat del proyecto, o describas la función, y Lovable lo instala y lo integra; no necesitas usar la terminal ni editar package.json. Instala los paquetes con Bun.

Install @rive-app/react-webgl2 and pin the exact version.

Rive publica tres paquetes de React con la misma API. @rive-app/react-webgl2 es el que instala la guía de React de Rive y admite todas las funciones. Elige @rive-app/react-canvas si una página va a mostrar muchas animaciones a la vez, ya que los navegadores limitan los contextos WebGL por página.

Lovable advierte que no puede garantizar paquetes de terceros, así que revisa lo que instaló: los paquetes de Rive los publica Rive bajo el scope @rive-app. Si más adelante ejecutas el proyecto fuera de Lovable, instala con Bun para que las versiones se mantengan sincronizadas con bun.lock.

¿Cómo agrego el archivo .riv al proyecto?

El .riv debe servirse como un archivo estático que el navegador pueda descargar. La documentación de Lovable describe tres formas de agregar archivos multimedia, y hay una opción más de almacenamiento:

Con la sincronización con GitHub, Lovable indica que lo que subes a la rama activa, normalmente main, se sincroniza de vuelta en el proyecto. Los archivos de public/ se sirven desde la raíz, así que el componente carga /mascot.riv, no /public/mascot.riv.

El peso rara vez es un problema para un .riv, pero Lovable no puede guardar archivos de más de 10 MB en un proyecto, y GitHub rechaza archivos de más de 100 MB.

¿Qué prompt agrega el componente de la mascota?

Las peticiones genéricas como "agrega una mascota animada" acaban en nombres inventados y una animación CSS hecha a mano. Dale a Lovable los datos del archivo. Este prompt supone un archivo con un view model Character; cambia los nombres de las propiedades para que coincidan con los tuyos:

Add an animated mascot component.

- Install @rive-app/react-webgl2 (pin the exact version you install).
- The file is /mascot.riv (in public/). State machine: "CharacterViewModelMachine".
  Use useRive with autoplay: true and autoBind: true.
- View model "Character": number "mood" (0 idle, 1 happy, 2 wave, 3 thinking,
  4 sad, 5 loading, 6 listening, 7 talking, 8 sleeping, 9 attention) and triggers
  "success", "error", "yes", "no", "enter", "exit".
- Create components/Mascot.tsx with props mood: number and celebrateKey: number.
  Set mood with useViewModelInstanceNumber("mood", rive?.viewModelInstance) in a
  useEffect; fire useViewModelInstanceTrigger("success", ...) when celebrateKey
  increases.
- Wrap RiveComponent in a div with a fixed 240 x 240 px size (no layout shift).
- If prefers-reduced-motion is reduce, render /mascot-poster.webp instead.
- Render it only in the browser (client-only), never during server rendering.
- Do not add Lottie or any other animation library.

Las dos últimas reglas son las más importantes. Sin un contenedor de tamaño fijo, el canvas toma el tamaño de un elemento padre sin altura y no muestra nada. Sin renderizado solo en el cliente, un proyecto nuevo de Lovable puede fallar durante el renderizado en el servidor (siguiente sección).

Para una splash screen o una intro de carga en lugar de una mascota, usa los prompts de Prompts de IA para una splash screen o mascota de carga animada; cubren Lovable junto con Cursor, Claude Code, Bolt y v0.

¿Cómo conecto el estado de ánimo con los eventos de la app?

Define la asignación una sola vez y mantenla en un solo lugar, como un pequeño context o store, para que todas las páginas coincidan en lo que hace el personaje:

Después pídele a Lovable que lo conecte:

Create a MascotContext with setMood(n) and celebrate().
Show the Mascot in the dashboard header.
- While any data query is loading: mood 5.
- When a save succeeds: celebrate() and mood 1.
- When a save fails or validation fails: mood 4.
- When the project list is empty: mood 8.
Do not change any other behavior.

La última línea mantiene el cambio acotado. Revisa el resultado en la vista de código: el estado de ánimo debe definirse en efectos o manejadores de eventos, nunca durante el renderizado.

¿Por qué la mascota aparece en blanco o falla en un proyecto nuevo de Lovable?

Lovable hizo de TanStack Start la opción predeterminada para proyectos nuevos el 13 de mayo de 2026. TanStack Start primero renderiza cada página a HTML en el servidor, y la propia documentación de Lovable advierte que algunas bibliotecas que solo funcionan en el navegador pueden romper el renderizado en el servidor. Rive dibuja con un canvas y WebAssembly en el navegador, así que renderiza la mascota solo en el cliente. El componente ClientOnly de TanStack Router hace eso, con un contenido alternativo mientras carga el cliente:

import { ClientOnly } from "@tanstack/react-router";

<ClientOnly fallback={<img src="/mascot-poster.webp" alt="" width={240} height={240} />}>
  <Mascot mood={mood} celebrateKey={cheer} />
</ClientOnly>

Los proyectos creados antes con la plantilla de React y Vite de Lovable se renderizan solo en el navegador y no necesitan el contenedor. Si la mascota sigue en blanco, revisa en este orden:

1. La pestaña de red muestra que /mascot.riv carga con estado 200, no 404.
2. El nombre de la máquina de estados coincide exactamente con el del archivo, incluidas mayúsculas y minúsculas.
3. El contenedor tiene un ancho y una altura explícitos.
4. La consola del navegador no muestra errores de CORS para un .riv alojado.

¿Dónde consigo un archivo de mascota con estos estados?

Puedes crear los estados tú mismo en el editor de Rive o contratar a un animador; en cualquier caso, pide un número de estado de ánimo y triggers con nombre, ya que eso es lo que esperan los prompts anteriores.

Charmotion genera el set a partir de una imagen de tu personaje o logo: 17 animaciones como un solo .riv con CharacterViewModelMachine y el view model Character usado en esta página, una CharacterStateMachine clásica con un input mood y una intro LaunchStateMachine, además de MP4, GIF, WebM y MOV transparentes y código React. El .riv y el WebM y MOV transparentes están en todos los planes de pago (desde $20 al mes), junto con MP4, GIF y el video de inicio 9:16 con fondo sólido.

Agrega una mascota de Rive a una app de Lovable

1. Instala el runtime. Pide en el chat: instala @rive-app/react-webgl2 y fija la versión exacta.
2. Agrega el .riv. Sube public/mascot.riv a la rama de GitHub sincronizada, o alójalo en un CDN con CORS y dale la URL a Lovable.
3. Pide el componente. Pega un prompt con los nombres de la máquina de estados, el view model y las propiedades, un contenedor de tamaño fijo, movimiento reducido y renderizado solo en el cliente.
4. Envuélvela para el renderizado en el servidor. En proyectos de TanStack Start, renderiza la mascota dentro de ClientOnly con un póster como respaldo.
5. Asigna eventos a estados de ánimo. Pide un MascotContext y asigna los estados de carga, éxito, error y vacío a estados de ánimo y triggers.
6. Verifica. Comprueba que el .riv carga con estado 200, que los nombres coinciden y que no se asigna nada durante el render.

Preguntas frecuentes

¿Por qué Lovable dice que no encuentra mascot.riv?

Normalmente es la ruta. Los archivos de public/ se sirven desde la raíz del sitio, así que el componente debe cargar /mascot.riv. Confirma también que el archivo llegó al proyecto: si lo subiste a GitHub, tiene que estar en la rama que Lovable sincroniza en ese momento; si no, no aparecerá.

¿Puedo usar un archivo Lottie en Lovable?

Sí, pidiéndole a Lovable que instale un reproductor de Lottie como @lottiefiles/dotlottie-react. Pero un archivo Lottie reproduce una sola secuencia, así que una mascota con estados de ánimo y reacciones necesita un archivo por estado y código para alternarlos. Un único archivo de Rive con una máquina de estados evita eso.

¿La mascota de Rive hará más lenta mi app de Lovable?

Agrega el runtime de Rive, un módulo WASM de varios cientos de kilobytes comprimido, más el .riv. Cárgalo solo en las páginas que muestran la mascota, renderiza primero un póster estático pequeño y omite el canvas por completo cuando el visitante prefiere movimiento reducido.

Respuestas rápidas de esta guía

• ¿Lovable puede instalar el runtime de Rive?
• ¿Cómo agrego un archivo .riv a un proyecto de Lovable?

Fuentes

• Use npm packages, Lovable Docs
• Using images, Lovable Docs
• Sync your Lovable project with GitHub, Lovable Docs
• Upgrade a project to TanStack Start, Lovable Docs
• Storage, Lovable Docs
• ClientOnly component, TanStack Router
• React runtime, Rive
• React runtime: Data binding, Rive
• Runtime sizes, Rive