Como adicionar um mascote Rive no Bolt.new, v0 e Replit

Qual a diferença entre Bolt, v0 e Replit para um mascote Rive?

O código é o mesmo componente React em todos. Os builders diferem na stack padrão e na forma como um arquivo binário entra no projeto:

Os três instalam pacotes npm quando você pede, então @rive-app/react-webgl2 é um pedido de uma linha. Se o seu projeto usa outro framework que não seja React, use diretamente o runtime web do Rive, @rive-app/webgl2.

Como adiciono um arquivo .riv no Bolt.new?

Use a Code view, não o chat. A documentação do Bolt diz que um arquivo anexado na caixa do chat é usado naquela solicitação, mas não é adicionado permanentemente ao projeto, enquanto um arquivo adicionado na Code view fica guardado nos arquivos do projeto.

1. Clique no ícone <> para abrir a Code view.
2. Expanda a pasta Public e arraste mascot.riv para dentro dela.
3. Clique com o botão direito no arquivo e escolha Copy Relative Path.
4. Cole o prompt da última seção, usando /mascot.riv como URL.

A lista de tipos de arquivo aceitos pelo Bolt cita imagens, documentos, código e arquivos de dados, mas não .riv. Se a Code view recusar o arquivo, hospede-o em uma CDN com CORS e passe a URL ao Bolt. Os arquivos podem ter até 10 MB no plano gratuito e 100 MB nos planos pagos.

Se o seu projeto no Bolt for um app mobile feito com Expo, os pacotes web não se aplicam. O runtime React Native do Rive precisa de um development build; veja Rive no Expo.

O que muda no v0, que gera Next.js?

Duas coisas: o v0 aceita o arquivo diretamente, e o projeto é Next.js. A documentação de upload do v0 inclui RIV entre os tipos de anexo aceitos, junto com imagens, vídeo, fontes e modelos 3D. Anexos do chat podem ter até 5 MB no plano gratuito e 20 MB nos planos pagos. Anexe mascot.riv pelo ícone + e diga onde ele deve ficar:

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

Novos chats do v0 começam com um app Next.js usando shadcn/ui e Tailwind, e o v0 cria backends seguindo as convenções do App Router. Por isso, o mascote precisa ser um Client Component com "use client", importado por uma página Server Component, e verificações do navegador como matchMedia devem ficar em effects. Se um build mostrar window is not defined, peça ao v0 para carregar o componente com next/dynamic e ssr: false de dentro de um Client Component. Os detalhes, incluindo como hospedar o rive.wasm na versão certa, estão em Rive no App Router do Next.js.

Como adiciono o .riv no Replit?

A documentação do Replit descreve o upload pelo chat: clique no botão de mais na caixa de prompt e escolha Upload a file, ou arraste o arquivo para a caixa de prompt. Depois diga ao Agent onde ele deve ficar:

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.

Não use o App Storage como host público do mascote. O Replit diz que os buckets do App Storage são sempre privados e que os links para os arquivos são URLs assinadas que expiram, o que serve para uploads de usuários, não para um arquivo que o navegador de todo visitante precisa buscar. O lugar certo é a pasta estática ou uma CDN externa com CORS.

Antes de publicar, abra a aba de rede da prévia e confirme que /mascot.riv retorna 200. Depois confira o app publicado da mesma forma, já que é a pasta estática que vai para produção.

Qual prompt funciona nos três builders?

Passe ao builder os nomes usados no arquivo e as regras que evitam as falhas comuns. Este prompt supõe um arquivo com um view model Character; renomeie as propriedades para combinar com o seu:

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.

Os nomes nesse prompt correspondem a um arquivo do Charmotion, que traz CharacterViewModelMachine com o view model Character, uma CharacterStateMachine clássica com um input mood para código mais antigo e uma intro LaunchStateMachine que não dispara evento de fim (conte cerca de 2,6 segundos). O .riv vem com todos os planos pagos (a partir de US$ 20 por mês).

Para splash screens e intros de carregamento nas mesmas ferramentas, veja Prompts de IA para um mascote animado de splash ou carregamento.

Como confiro o resultado antes de publicar?

Builders com IA costumam gerar código que parece certo e não renderiza nada. Confira nesta ordem, porque cada passo elimina uma causa do passo seguinte:

1. O arquivo carrega. A aba de rede mostra mascot.riv com status 200. Um 404 indica caminho errado (/mascot.riv, não /public/mascot.riv); um erro de CORS indica que o host precisa de Access-Control-Allow-Origin.
2. Os nomes batem. Os nomes da state machine e das propriedades no código são exatamente iguais aos do arquivo, incluindo maiúsculas e minúsculas.
3. A caixa tem tamanho. O wrapper tem largura e altura explícitas.
4. Os valores são definidos em effects. Nenhuma chamada ao Rive roda durante a renderização.
5. Movimento reduzido. Com a configuração do sistema ativada, a página mostra o poster no lugar.
6. As versões estão fixadas. O package.json lista uma versão exata do Rive, não latest.

Adicione um mascote Rive no Bolt.new, v0 ou Replit

1. Instale o runtime. Peça ao builder para instalar @rive-app/react-webgl2 e fixar a versão exata.
2. Adicione o .riv. Bolt: arraste para Public na Code view. v0: anexe e peça para salvar como public/mascot.riv. Replit: envie pelo chat e peça ao Agent para salvar na pasta estática.
3. Cole o prompt. Informe os nomes da state machine, do view model e das propriedades, um wrapper de tamanho fixo, movimento reduzido e renderização só no cliente.
4. Aplique as regras do framework. No v0 ou em qualquer projeto Next.js, mantenha o mascote em um componente "use client" e as verificações do navegador em effects.
5. Confira o resultado. Confirme que o .riv retorna 200, que os nomes batem, que o wrapper tem tamanho e que as versões estão fixadas.

Perguntas frequentes

Posso enviar um arquivo .riv para o v0?

Sim. A documentação de upload do v0 inclui RIV entre os tipos de anexo aceitos. Anexe pelo ícone + ou arraste para o chat e peça ao v0 para salvar como public/mascot.riv. Os anexos podem ter até 5 MB no plano gratuito e 20 MB nos planos pagos.

Por que o Bolt não guarda o arquivo que anexei no chat?

A documentação do Bolt diz que os anexos da caixa do chat são usados naquela solicitação, mas não são adicionados permanentemente aos arquivos do projeto. Para manter um arquivo, adicione-o na Code view, por exemplo arrastando-o para a pasta Public, e depois cite o caminho dele no prompt.

Posso hospedar o arquivo do mascote no Replit App Storage?

Não é a melhor opção. Segundo o Replit, os buckets do App Storage são sempre privados, e os links para os arquivos são URLs assinadas que expiram. Um mascote que todo visitante carrega deve ficar na pasta estática do app ou em uma CDN que envie cabeçalhos CORS.

Respostas rápidas deste guia

• O v0 e o Bolt conseguem usar um arquivo .riv enviado?

Fontes

• 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