O que é o Rive? Animação interativa explicada

O que é o Rive?

Rive é uma plataforma de animação feita para gráficos interativos. Ela tem duas partes. O editor do Rive é onde designers desenham formas, fazem o rig de personagens com bones (ossos), criam animações com keyframes e as conectam entre si. Os runtimes do Rive são bibliotecas que carregam o arquivo exportado dentro do seu produto e o renderizam em tempo real.

A diferença em relação a um vídeo ou GIF é que uma animação Rive não é uma sequência fixa de frames. O runtime desenha formas vetoriais a cada frame, e uma state machine (máquina de estados) dentro do arquivo decide qual animação toca, como as animações se misturam e como reagem aos valores que o seu código envia. Um mascote pode ficar em idle, trocar para um loop de carregamento enquanto uma requisição roda e tocar uma reação de sucesso quando ela termina, tudo a partir de um único arquivo.

Isso faz do Rive uma boa escolha para interfaces que respondem ao usuário: botões, personagens de onboarding, avatares de assistente, indicadores de progresso e HUDs de jogos. O Duolingo, por exemplo, usa state machines do Rive para sincronizar a fala dos personagens em todos os cursos. Se você só precisa de um clipe linear que nunca muda, um arquivo de vídeo costuma ser mais simples.

O que é um arquivo .riv?

Um arquivo .riv é o formato binário que o editor do Rive exporta e os runtimes leem. É um arquivo de runtime, não um arquivo de projeto: ele contém tudo o que é necessário para reproduzir a animação, mas não é editado à mão.

Um único .riv pode conter:

• Artboards: as telas que contêm a arte. Um arquivo pode ter várias.
• Animações de timeline: clipes com keyframes, como um loop idle ou um aceno.
• State machines: grafos que escolhem quais animações tocam e quando.
• Inputs ou view models: a interface que o seu código usa para controlar a state machine.

Como a arte é armazenada em vetores e o movimento em keyframes, muitas animações podem compartilhar as mesmas formas. Por isso, um único .riv com um conjunto inteiro de estados de personagem pode ser menor do que um vídeo curto do mesmo personagem.

Para controlar um .riv pelo código, você precisa dos nomes da artboard, da state machine e dos inputs ou do view model. A próxima seção mostra como ler essas informações direto do arquivo.

Como abrir ou visualizar um arquivo .riv?

Carregue o arquivo em um visualizador que use um runtime do Rive. O jeito mais rápido é o nosso Rive File Inspector gratuito: arraste o arquivo e ele lista as artboards, animações, state machines, inputs e view models de Data Binding, e permite reproduzir cada item e ajustar os inputs em tempo real. Ele roda no navegador, e nada é enviado.

Para quem desenvolve, algumas linhas com o runtime web fazem o mesmo: crie uma instância Rive com src apontando para o arquivo e registre rive.contents no log depois que ele carregar, o que descreve as artboards e as state machines de cada uma.

Visualizar não é editar. A documentação da comunidade do Rive explica que os arquivos .riv de runtime removem dados de que o editor precisa (por exemplo, a posição de cada estado no grafo da state machine), e que a exportação "For backup" do editor, um arquivo .rev, mantém tudo e pode ser arrastada de volta para o editor. Se você precisa alterar um .riv que alguém fez para você, peça o projeto ou o .rev, não apenas o .riv.

Como transformar um .riv em MP4 ou GIF?

Renderize pelo editor do Rive. No modo Animate, adicione um Render Preset à artboard, escolha H.264, GIF, WebM, uma sequência PNG ou uma sequência SVG, defina a animação, o FPS, a duração, a taxa de bits e o tamanho, depois execute pela Render Queue e baixe na aba Completed do Cloud Renderer. A documentação do Rive afirma que "exportar vídeo e imagens está disponível nos planos pagos."

Para isso, é preciso ter o projeto de origem aberto no editor. Com apenas um .riv, a opção prática é gravar o arquivo enquanto ele toca em um navegador ou app. Se você precisa de versões em vídeo de um conjunto de personagem inteiro, peça a quem faz o .riv que as renderize ao mesmo tempo. Para outras conversões, veja como converter GIF, vídeo ou PNG para Rive ou Lottie.

O Rive é gratuito para uso comercial?

Os runtimes são gratuitos. O Rive informa que todos os seus runtimes oficiais são de código aberto sob a Licença MIT e podem ser usados em aplicações pessoais e comerciais. Distribuir um .riv dentro do seu app não exige uma conta no Rive nem um plano pago da sua parte.

O editor é um produto separado, com planos próprios. Em outubro de 2026, a página de preços do Rive (com cobrança anual exibida por padrão) lista:

Alguns recursos do editor são exclusivos dos planos pagos. Exportar vídeo e sequências de imagens (H.264, GIF, WebM, sequências PNG ou SVG) pelo editor exige um plano pago. Preços e limites dos planos mudam, então confira a página de preços antes de definir o orçamento.

Os runtimes do Rive são de código aberto?

Sim, os runtimes são open source; o editor, não. O código-fonte dos runtimes fica no GitHub, na organização rive-app, por exemplo rive-wasm para os pacotes web e rive-react para React. Você pode ler o código, abrir issues e fixar versões como em qualquer outra dependência.

A licença MIT permite usar os runtimes em produtos comerciais de código fechado. Sua obrigação é a de sempre com código MIT: manter o aviso de licença junto com a biblioteca.

O editor é um aplicativo comercial hospedado. Você pode usá-lo no plano Free, mas o código-fonte dele não é publicado. O licenciamento do editor é definido pelos planos do Rive, não pela licença MIT. Na prática, essa divisão pouco importa para desenvolvedores: designers usam o editor, e a engenharia só lida com o runtime open source e com o arquivo exportado.

Quais plataformas reproduzem um arquivo .riv?

O Rive mantém runtimes oficiais para as principais plataformas de app e web:

Na web, o Rive agora recomenda @rive-app/webgl2 para a maioria dos casos. Ele usa o Rive Renderer e oferece recursos como vector feathering, que o @rive-app/canvas, baseado em Canvas2D, ainda não suporta. Os dois expõem a mesma API.

O mesmo arquivo .riv roda em todos os runtimes, então uma única exportação pode atender seu site, seu app iOS e seu app Android. O que muda é o código que você escreve para carregá-lo e controlar a state machine, e quais APIs de controle cada runtime ainda suporta.

Guias por plataforma: React e Next.js, SwiftUI e Android, Flutter e React Native.

Qual é o tamanho do runtime do Rive?

O runtime adiciona um custo fixo ao seu app ou página, separado do tamanho dos seus arquivos .riv. O Rive publica estes números (última atualização em janeiro de 2026). Para comparação, medimos o runtime web canvas-lite 2.44.0 em cerca de 373 KB com brotli em 25 de outubro de 2026, baixado uma vez por site:

O runtime é baixado uma vez por app ou site. Cada arquivo .riv adicional costuma ser pequeno, então a relação custo-benefício melhora conforme você adiciona mais animações. Se uma página mostra só um loop decorativo, um vídeo curto pode sair mais leve no total; se mostra um personagem interativo com vários estados, o Rive tende a vencer.

Na web, carregue o runtime com lazy loading (carregamento sob demanda, só nas páginas que precisam dele) para não bloquear a primeira renderização. Os navegadores também limitam a quantidade de contextos WebGL por página; se você renderiza muitas instâncias do Rive com webgl2, defina useOffscreenRenderer: true para que elas compartilhem um único contexto.

Preciso do editor do Rive para usar um arquivo do Charmotion?

Não. Em todos os planos pagos, o Charmotion entrega um .riv finalizado, então você só precisa do runtime gratuito da sua plataforma. O plano gratuito não tem conjuntos de personagem. Você envia a imagem de um personagem, mascote ou logo, e o Charmotion devolve um conjunto de 17 animações em um único arquivo .riv (um personagem plano que medimos tem 40 KB para as 17; um logo 3D que medimos tem cerca de 1,0 MB), além de versões em MP4, GIF e WebM/MOV transparentes e código para web, React e SwiftUI pronto para colar.

O arquivo contém uma state machine chamada CharacterStateMachine. Um input numérico chamado mood seleciona um de 10 loops, e triggers como success e error tocam reações únicas. Uma segunda state machine, LaunchStateMachine, toca uma intro de abertura uma vez e depois fica em loop idle. O guia de state machine explica as conexões em detalhes.

Os arquivos do Charmotion suportam os dois sistemas de controle. A CharacterViewModelMachine é controlada por um view model Character (Data Binding: um número mood mais um trigger por reação), que é o que o novo runtime da Apple e o React Native Nitro v0.6+ exigem. A CharacterStateMachine, padrão, expõe os mesmos estados como inputs legados para web, React, Android, Flutter e os runtimes legados da Apple.

Perguntas frequentes

O Rive é melhor que GIF ou vídeo?

O Rive é melhor quando a animação precisa reagir a estados ou interações, porque um único arquivo reúne várias animações controladas por código. O vídeo é mais simples para um clipe fixo que nunca muda e não precisa de runtime. O GIF é a opção mais fraca em qualidade e tamanho; use-o só onde vídeo e Rive não rodam.

Posso abrir um arquivo .riv sem o editor?

Sim, qualquer runtime oficial do Rive carrega e reproduz um arquivo .riv. Para editar a arte ou a state machine, você precisa do editor do Rive. Para controlar a reprodução por código, basta saber os nomes do artboard, da state machine e dos inputs ou propriedades do view model dentro do arquivo.

O Rive funciona offline?

Sim, desde que o próprio runtime esteja disponível. Os runtimes renderizam localmente, então um .riv incluído em um app nativo roda sem nenhuma conexão com o Rive. Na web, o runtime carrega o arquivo WASM de uma CDN por padrão; por isso, hospede-o você mesmo com setWasmUrl se a página precisar funcionar offline ou evitar requisições de terceiros.

O que são inputs de state machine e Data Binding no Rive?

São as duas formas de o código controlar um arquivo Rive. Inputs são números, booleanos e triggers em uma state machine; o Rive agora os marca como obsoletos, mas os arquivos existentes continuam funcionando. O Data Binding usa view models com tipos de propriedade mais ricos e é o que o Rive recomenda para projetos novos.

Respostas rápidas deste guia

• O que é o Rive?
• O Rive é grátis?

Fontes

• Runtimes: Getting started, Rive
• Canvas vs WebGL2, Rive
• Runtime sizes, Rive
• Rive pricing, Rive
• Exporting for video and static design, Rive
• Feature support, Rive
• Data binding migration guide, Rive
• How Duolingo animates world characters, Duolingo
• Exporting (community docs: .rev backup files), Rive Community