Cómo agregar una mascota de Rive en Bolt.new, v0 y Replit

¿En qué se diferencian Bolt, v0 y Replit para una mascota de Rive?

El código es el mismo componente de React en todos. Los builders se diferencian en su stack predeterminado y en cómo llega un archivo binario al proyecto:

Los tres instalan paquetes npm cuando lo pides, así que @rive-app/react-webgl2 es una petición de una línea. Si tu proyecto usa un framework distinto de React, usa directamente el runtime web de Rive, @rive-app/webgl2.

¿Cómo agrego un archivo .riv en Bolt.new?

Usa la vista Code, no el chat. La documentación de Bolt indica que un archivo adjunto en el chat se usa para esa solicitud, pero no se agrega de forma permanente al proyecto, mientras que un archivo agregado en la vista Code se guarda en los archivos del proyecto.

1. Haz clic en el ícono <> para abrir la vista Code.
2. Expande la carpeta Public y arrastra mascot.riv dentro.
3. Haz clic derecho en el archivo y elige Copy Relative Path.
4. Pega el prompt de la última sección y usa /mascot.riv como URL.

La lista de tipos de archivo compatibles de Bolt menciona imágenes, documentos, código y archivos de datos, pero no .riv. Si la vista Code rechaza el archivo, alójalo en un CDN con CORS y dale a Bolt la URL. Los archivos pueden pesar hasta 10 MB en el plan gratis y 100 MB en los planes de pago.

Si tu proyecto de Bolt es una app móvil creada con Expo, los paquetes web no sirven. El runtime de React Native de Rive necesita un development build; consulta Rive en Expo.

¿Qué cambia en v0, que crea proyectos con Next.js?

Dos cosas: v0 acepta el archivo directamente y el proyecto es de Next.js. La documentación de carga de v0 incluye RIV entre los tipos de adjunto compatibles, junto con imágenes, video, fuentes y modelos 3D. Los adjuntos del chat pueden pesar hasta 5 MB en el plan gratis y 20 MB en los planes de pago. Adjunta mascot.riv con el ícono + e indica dónde va:

Save the attached mascot.riv as public/mascot.riv and load it from /mascot.riv.

Los chats nuevos de v0 empiezan con una app de Next.js que usa shadcn/ui y Tailwind, y v0 crea los backends con las convenciones del App Router. Por eso la mascota debe ser un Client Component con "use client", importado por una página Server Component, y las comprobaciones del navegador como matchMedia van en effects. Si un build muestra window is not defined, pide a v0 que cargue el componente con next/dynamic y ssr: false desde dentro de un Client Component. Los detalles, incluido cómo alojar tú mismo rive.wasm en la versión correcta, están en Rive en el App Router de Next.js.

¿Cómo agrego el .riv en Replit?

La documentación de Replit describe la carga a través del chat: haz clic en el botón de más del cuadro del prompt y elige Upload a file, o arrastra el archivo al cuadro del prompt. Luego dile al Agent dónde va:

Save the attached mascot.riv into the front end's static assets folder
(public/ for Vite or Next.js) so it is served at /mascot.riv in the
published app. Then confirm the path.

No uses App Storage como host público para la mascota. Replit indica que los buckets de App Storage siempre son privados y que los enlaces a sus archivos son URL firmadas que caducan, algo adecuado para archivos que suben los usuarios, no para un archivo que descarga el navegador de cada visitante. El lugar correcto es la carpeta estática o un CDN externo con CORS.

Antes de publicar, abre la pestaña de red de la vista previa y confirma que /mascot.riv devuelve 200. Después revisa la app publicada de la misma forma, ya que lo que se publica es la carpeta estática.

¿Qué prompt funciona en los tres builders?

Dale al builder los nombres del archivo y las reglas que evitan los fallos habituales. 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.

Los nombres de ese prompt coinciden con un archivo de Charmotion, que incluye CharacterViewModelMachine con el view model Character, una CharacterStateMachine clásica con un input mood para código más antiguo y una intro LaunchStateMachine que no dispara ningún evento final (calcula unos 2.6 segundos). El .riv viene con todos los planes de pago (desde $20 al mes).

Para splash screens e intros de carga en estas mismas herramientas, consulta Prompts de IA para una mascota animada de splash o de carga.

¿Cómo reviso el resultado antes de publicar?

Los builders con IA suelen generar código que parece correcto y no renderiza nada. Revisa en este orden, porque cada paso descarta una causa del siguiente:

1. El archivo carga. La pestaña de red muestra mascot.riv con estado 200. Un 404 significa que la ruta es incorrecta (/mascot.riv, no /public/mascot.riv); un error de CORS significa que el host necesita Access-Control-Allow-Origin.
2. Los nombres coinciden. Los nombres de la máquina de estados y de las propiedades en el código coinciden exactamente con los del archivo, incluidas mayúsculas y minúsculas.
3. El contenedor tiene tamaño. El wrapper tiene un ancho y un alto explícitos.
4. Los valores se asignan en effects. No se ejecuta ninguna llamada a Rive durante el render.
5. Movimiento reducido. Con la opción del sistema activada, la página muestra el póster.
6. Las versiones están fijadas. package.json indica una versión exacta de Rive, no latest.

Agrega una mascota de marca con Rive en Bolt.new, v0 o Replit

1. Instala el runtime. Pide al builder que instale @rive-app/react-webgl2 y fije la versión exacta.
2. Agrega el .riv. Bolt: arrástralo a Public en la vista Code. v0: adjúntalo y pide que lo guarde como public/mascot.riv. Replit: súbelo en el chat y pide al Agent que lo guarde en la carpeta estática.
3. Pega el prompt. Indica los nombres de la máquina de estados, del view model y de las propiedades, un wrapper de tamaño fijo, movimiento reducido y renderizado solo en cliente.
4. Aplica las reglas del framework. En v0 o en cualquier proyecto de Next.js, mantén la mascota en un componente "use client" y las comprobaciones del navegador en effects.
5. Revisa el resultado. Confirma que el .riv devuelve 200, que los nombres coinciden, que el wrapper tiene tamaño y que las versiones están fijadas.

Preguntas frecuentes

¿Puedo subir un archivo .riv a v0?

Sí. La documentación de carga de v0 incluye RIV entre los tipos de adjunto compatibles. Adjúntalo con el ícono + o arrástralo al chat y luego pide a v0 que lo guarde como public/mascot.riv. Los adjuntos pueden pesar hasta 5 MB en el plan gratis y 20 MB en los planes de pago.

¿Por qué Bolt no conserva el archivo que adjunté en el chat?

La documentación de Bolt indica que los adjuntos del chat se usan para esa solicitud, pero no se agregan de forma permanente a los archivos del proyecto. Para conservar un archivo, agrégalo en la vista Code, por ejemplo arrastrándolo a la carpeta Public, y luego indica su ruta en tu prompt.

¿Puedo alojar el archivo de la mascota en Replit App Storage?

No es una buena opción. Replit indica que los buckets de App Storage son siempre privados y que los enlaces a sus archivos son URL firmadas que caducan. Una mascota de marca que carga cada visitante debe ir en la carpeta estática de la app o en un CDN que envíe encabezados CORS.

Respuestas rápidas de esta guía

• ¿Pueden v0 y Bolt usar un archivo .riv subido?

Fuentes

• Attach files to your project, Bolt Support
• bolt.new README, StackBlitz on GitHub
• Expo for mobile apps, Bolt Support
• Images, videos, and file uploads, v0 Docs
• Full-stack apps, v0 Docs
• Upload and use files, Replit Docs
• App Storage, Replit Docs
• React runtime, Rive
• React runtime: Data binding, Rive