Rive vs Spline: 2D interativo vs cenas 3D

O Spline é um Rive em 3D?

Não exatamente. Os dois são ferramentas de design no navegador que produzem conteúdo interativo para sites e apps, por isso são comparados. Por baixo, resolvem problemas diferentes.

O Spline cria cenas 3D em tempo real: malhas, materiais, luzes e câmeras que o espectador pode girar e com as quais pode interagir. O Rive cria animação vetorial 2D: formas, bones e timelines, conectados a uma state machine controlada pelo seu código.

Se a sua arte precisa ser vista girando em volta, iluminada ou de qualquer ângulo, você precisa de 3D. Se é um personagem ou controle visto de frente, o 2D é mais leve e mais fácil de controlar pelo código.

O que cada um exporta?

O Spline documenta exportação de código para Vanilla JS, Three.js, React, Next.js e react-three-fiber. A documentação traz um limite importante: animações e eventos só ficam ativos ao exportar para Vanilla JS e React. Os outros destinos entregam a cena para que o seu próprio código Three.js a anime. O FAQ do Spline também descreve embeds nativos em Swift (Apple) e Kotlin (Android), exportações em ZIP para hospedagem própria e exportação de vídeo em WebM, MP4 ou sequência de imagens. Conseguimos verificar diretamente a página de exportação de código; trate os detalhes sobre nativo e vídeo como descrição do próprio Spline e confira na documentação atual antes de planejar com base neles.

O caminho para React usa o pacote @splinetool/react-spline do Spline, que carrega a URL de uma cena em um canvas e expõe o objeto da aplicação carregada para que o código encontre objetos e emita eventos.

O Rive exporta um arquivo .riv. Runtimes oficiais o reproduzem na web, no React, em plataformas Apple, no Android, no Flutter e no React Native. Os runtimes têm licença MIT; o plano gratuito do editor exporta arquivos que exibem uma splash screen do Rive. As exportações próprias de vídeo e imagem do Rive (H.264, GIF, sequências PNG e SVG, WebM) só estão disponíveis nos planos pagos.

A diferença prática: a saída do Spline depende de um carregador de cenas 3D em cada plataforma, enquanto a do Rive é um único arquivo pequeno reproduzido por um runtime 2D dedicado.

Qual é mais leve no celular?

Não existe benchmark neutro comparando os dois, então desconfie de quem cita um número único. O que dá para afirmar com fontes:

• O Rive publica o tamanho dos seus runtimes. No iOS, ele adiciona cerca de 1,67 MB ao tamanho do download e 4,66 MB instalado; no Android arm64, cerca de 2,40 MB no download e 7,03 MB instalado. Na web, os pacotes têm de 222 a 648 KB com compressão brotli. Esses números são do fabricante. Os arquivos .riv em si costumam ser pequenos para arte plana.
• O Spline não publica uma tabela comparável de tamanho de runtime que tenhamos encontrado. O custo de uma cena 3D depende muito da quantidade de malhas, do tamanho das texturas, da iluminação e do pós-processamento, e tudo isso você controla no editor.

Como regra geral, renderizar uma cena 3D iluminada exige mais da GPU do que desenhar formas vetoriais planas, mas uma cena 3D enxuta pode superar um arquivo 2D inchado. Teste em um Android intermediário, não só em um iPhone recente, e observe a taxa de frames, a memória e a bateria durante alguns minutos de interação.

Seja qual for a escolha, evite iniciar qualquer um dos runtimes em páginas que não mostram o asset e pause a renderização quando ele sair da tela com a rolagem.

Qual tem uma state machine de verdade?

O Rive tem, como parte central do formato. Uma state machine do Rive reúne os loops e as reações únicas de um personagem, as transições e mesclas entre eles e listeners de ponteiro em partes da arte. O seu app altera propriedades e o arquivo decide o que tocar. A documentação do Rive agora recomenda Data Binding com view models para esse controle e chama os inputs da state machine de legados, embora eles continuem funcionando. O Data Binding sincroniza valores nos dois sentidos entre o app e o arquivo.

O Spline lida com interatividade por meio de estados de objetos e eventos: um objeto pode mudar de estado em resposta a eventos como hover, clique ou teclas pressionadas. No código exportado, o runtime permite buscar objetos pelo nome e emitir eventos neles, o que basta para muitas cenas hero e configuradores de produto. A organização é em torno de objetos em uma cena, e não de uma única state machine nomeada que o código do app controla por propriedades tipadas.

Então a questão é o que você está construindo. Um personagem que precisa refletir o estado do app, como loading, success e error, se encaixa diretamente em uma state machine do Rive. Um objeto 3D que reage ao cursor se encaixa naturalmente nos eventos do Spline.

Um mascote 2D consegue simular profundidade no Rive?

Muitas vezes, bem o suficiente. Os bones (ossos) e a deformação de malha do Rive permitem que um animador comprima, estique, dobre e gire levemente a arte, então um personagem pode inclinar a cabeça, se aproximar ou quicar com uma sensação convincente de volume. Partes em camadas que se movem em velocidades diferentes adicionam efeito parallax. O que o 2D não consegue é revelar lados de um objeto que nunca foram desenhados: um giro completo exige muitos desenhos ou 3D de verdade.

Um meio-termo prático é renderizar uma única vez um personagem ou logo com aparência 3D, como imagem, e animar essa imagem em 2D. O volume e a iluminação vêm da renderização; o movimento vem do rig.

É assim que o modo Motion do Charmotion funciona com logos renderizados em 3D: os pixels originais nunca são redesenhados, apenas animados como estão, com squash, stretch, inclinação, pulinhos e piscadas dentro de um arquivo Rive. Você envia um personagem, mascote ou logo e recebe 17 animações em poucos minutos, em um único .riv, além de MP4, GIF e WebM e MOV com fundo transparente. Não substitui o Spline quando o usuário precisa girar o objeto ao redor; é uma opção mais leve quando você só precisa que uma arte com aparência 3D reaja ao estado do app.

Quando escolher vídeo?

Quando a animação não precisa reagir a nada. Um produto girando na seção hero, uma revelação de lançamento ou uma cena de marca em loop ficam iguais sendo calculados ao vivo ou reproduzidos. Renderizados como vídeo, não precisam de runtime 3D, se comportam de forma previsível em qualquer dispositivo e podem ser otimizados como qualquer outro arquivo de mídia.

As duas ferramentas podem gerar vídeo: as Perguntas frequentes do Spline citam exportação em WebM, MP4 e sequência de imagens, e os planos pagos do Rive exportam H.264, GIF, WebM e sequências de imagens. Para uma sobreposição com fundo transparente em um site, você precisa de dois arquivos: um .mov HEVC com canal alfa para o Safari e um WebM VP9 para os outros navegadores; o guia Vídeo com fundo transparente em sites traz o código e as configurações.

Mantenha a versão ao vivo quando o usuário precisa interagir: arrastar para girar, configurar cores ou ver um personagem mudar de estado. Fora isso, o vídeo costuma ser a opção mais barata e robusta. GIF vs WebM vs MP4 vs Lottie vs Rive compara os formatos de arquivo diretamente.

Rive ou Spline: qual escolher?

Escolha o Rive se:

• você está animando um personagem, mascote, ícone ou controle interativo em 2D;
• ele tem vários estados que o código do app alterna;
• ele precisa rodar nativamente em apps iOS, Android, Flutter ou React Native a partir de um único arquivo;
• o tamanho do arquivo e a previsibilidade do runtime importam mais do que a profundidade real.

Escolha o Spline se:

• o conteúdo é realmente 3D: produtos, ambientes, objetos que o usuário gira;
• você quer iluminação, materiais e movimentos de câmera que o 2D não consegue imitar;
• seu alvo principal é a web, de preferência com a exportação Vanilla JS ou React, para que animações e eventos sejam preservados;
• o asset é de responsabilidade de um designer 3D.

Escolha vídeo se a animação só precisa tocar. Alguns times combinam os três: um hero em Spline na landing page, um mascote em Rive no app e vídeo para as redes sociais.

Perguntas frequentes

O Spline exporta para React?

Sim. A documentação do Spline lista exportação de código para React, Next.js, react-three-fiber, Three.js e Vanilla JS. Animações e eventos só ficam ativos nas exportações Vanilla JS e React, então escolha uma delas se a cena precisar continuar interativa. O pacote React carrega a cena em um componente canvas.

O Rive faz 3D?

O Rive é uma ferramenta vetorial 2D. Bones, deformação de malha e parallax em camadas podem dar aos personagens uma sensação convincente de volume, e você pode animar uma imagem renderizada em 3D, mas um arquivo Rive não consegue mostrar lados de um objeto que nunca foram desenhados. Para cenas 3D de verdade, use uma ferramenta 3D como o Spline.

O Spline funciona em apps mobile nativos?

As Perguntas frequentes do Spline descrevem embeds nativos para plataformas Apple em Swift e para Android em Kotlin, além da exportação de código para web. Consulte a documentação atual para ver os recursos suportados em cada plataforma antes de decidir, e teste a performance em aparelhos Android intermediários, já que o custo de GPU das cenas 3D varia muito.

Rive ou Spline: qual é melhor para a seção hero de um site?

Use o Spline quando o hero for um objeto 3D que os visitantes podem girar ou explorar. Use o Rive para um mascote 2D ou uma cena ilustrada que reage ao cursor ou ao estado da página. Se o hero só precisa tocar, um vídeo renderizado costuma ser mais leve e confiável do que qualquer um dos runtimes.

Respostas rápidas deste guia

• Devo usar Rive ou Spline?

Fontes

• Exporting as code, Spline
• FAQ, Spline
• react-spline, Spline on GitHub
• Runtime sizes, Rive
• Data binding overview, Rive
• State machine inputs (legacy), Rive
• Exporting for video and static design, Rive
• Pricing, Rive