Rive vs Lottie com Claude Code: animação com state machine (com case Razorpay Sprint26)

Animação vetorial quebra em dois pontos opostos. Um loop bonito precisa reagir ao cursor e só conhece play. Uma interação com estados recebe um JSON linear e pede lógica improvisada no código para simular o que o formato não guarda.

A saída está na pergunta sobre inputs. Há algum valor que muda durante o uso e altera o que a animação mostra em seguida. Se existe, o trabalho pede Rive com state machine. Se só existe reprodução do início ao fim, o trabalho pede Lottie com dotLottie. Para o mapa geral das bibliotecas, volte ao guia completo de motion.

Este tutorial compara os dois modelos com fatos datados, tabela direta por trabalho, integração curta com runtime em React e na web, prompts para gerar a integração com Claude Code e leitura do case Razorpay Sprint26.

Rive cuida de animação que responde durante o uso. O arquivo guarda states, transições entre states e inputs que disparam cada transição. O código não redesenha quadros. Ele só atualiza inputs e deixa o runtime resolver qual state entra em cena.

O modelo fica claro em botões. Um botão tem idle, hover, pressed e disabled. No Rive, cada visual é um state e o gesto alterna inputs booleanos ou numéricos. A lógica de animação permanece no asset, o que mantém o componente React curto e legível. Essa descrição de states com transições e inputs, com exemplo de botões que dispensam lógica de animação no código, aparece em youngju.dev de 16/mai/2026, em snigdha de 18/jun/2026 e em wikivibe de 12/jun/2026.

A adoção citada sustenta o recorte interativo. Spotify Wrapped e Duolingo usam Rive em superfícies com interação contínua, com base citada de 2B de usuários, segundo as mesmas três referências. O número descreve alcance do runtime, não garantia de resultado para um site novo.

A curva de aprendizado pesa para quem só precisa de loop decorativo. Editor com states exige disciplina de naming e de transições, com custo inicial maior que exportar um JSON linear.

Lottie cuida de reprodução simples. O designer anima no After Effects, exporta com Bodymovin em JSON e o player executa no site. O formato nasceu no Airbnb com esse pipeline de After Effects para produto, o que explica a força em ilustrações, onboarding, empty states e ícones animados.

O limite aparece no controle. Lottie expõe play, pause, speed, troca de segmento e salto para frame. Não há state machine com inputs nomeados no sentido do Rive. Para loop, entrada curta e ilustração que acompanha scroll, esse controle basta. Para resposta contínua a gesto com vários estados, ele vira adaptação frágil. Essa caracterização de JSON com Bodymovin e do limite a play, pause e speed aparece em cssauthor de 02/mar/2026 e em snigdha de 18/jun/2026.

O peso decide a troca de JSON por dotLottie. O formato .lottie empacota a animação em contêiner compacto, com redução citada em faixa de 60 a 90 por cento ante JSON, segundo cssauthor de 02/mar/2026, youngju.dev de 16/mai/2026, snigdha de 18/jun/2026 e wikivibe de 12/jun/2026. A mesma análise do cssauthor destaca scroll-sync nativo para scrub de vetor pela posição da viewport.

A biblioteca ajuda no ponto de partida, com mais de 800K animações gratuitas e premium citadas pelo LottieFiles, que centraliza busca, preview e importação sem sair do editor.

A comparação honesta passa por modelo, não por preferência de ferramenta. Rive guarda lógica de estados. Lottie guarda sequência de quadros vetoriais. Essa diferença muda quem cria o asset, o que o código controla e quando cada formato compensa.

Para gesto simples em componente React sem troca de estado, a resposta pode nem pedir Rive. Gestures com springs, layout com transform e saída com AnimatePresence cobrem hover, press e shared element com menos cerimônia, como mostra o tutorial de micro-interações com Motion. Reserve Rive para quando o gesto precisa alterar um state nomeado dentro do asset.

Razorpay Sprint26 mostra o teto interativo do Rive em página de marketing. O site condensa mais de 100 lançamentos de produto em uma jornada contínua, com triggers de scroll e clique espalhados pela página em vez de um hero animado isolado. O destaque saiu em 31/ago/2026 no Awwwards, com ficha de SOTD na mesma premiação.

O número citado com mais frequência é direto: mais de 100 triggers de scroll e clique, todos construídos no Rive. A análise do case descreve as animações como state machines que respondem a comportamento, não como loops decorativos presos à posição do scroll. A camada espacial ficou com Three.js e WebGL, com figura em caminhada, calçado em destaque e transições dimensionais entre seções. Os assets 3D foram construídos e iterados no Blender Studio antes da portabilidade para o navegador.

O padrão útil para replicar está na contenção ao redor do movimento. O case mantém áreas calmas para que cada animação Rive chame atenção quando entra. Triggers demais sem hierarquia viram ruído e derrubam leitura. Triggers com motivo transformam scroll em painel que responde, com cada seção pedindo um gesto e devolvendo uma mudança visível de estado.

A integração pede dois arquivos e dois runtimes. O designer entrega button.riv com state machine nomeada ou hero.lottie com loop fechado. O código conecta o player, expõe inputs ou controles e trata visibilidade. Nenhum dos blocos abaixo cria arte. Eles conectam arte pronta ao comportamento da página.

O bloco Rive usa o pacote para React com hook de state machine. O ponto central é o nome da state machine e o nome do input, que precisam repetir exatamente o que o designer definiu no editor.

import { useRive, useStateMachineInput } from "@rive-app/react-canvas";

export function RiveButton() {
  const { rive, RiveComponent } = useRive({
    src: "/button.riv",
    stateMachines: "Button",
    autoplay: true,
  });
  const hover = useStateMachineInput(rive, "Button", "hover");
  return (
    <RiveComponent
      onMouseEnter={() => (hover.value = true)}
      onMouseLeave={() => (hover.value = false)}
    />
  );
}

O bloco dotLottie usa o runtime moderno para web com canvas. O ponto central é pausar fora da viewport e controlar reprodução por API, sem carregar player legado para JSON simples.

import { DotLottie } from "@lottiefiles/dotlottie-web";

const player = new DotLottie({
  canvas: document.querySelector("#hero"),
  src: "/hero.lottie",
  loop: true,
  autoplay: true,
});

player.play();
player.pause();
player.setSpeed(1.5);

Para scroll-sync, a regra é pausar autoplay e mapear progresso a frame. O padrão aparece na skill lottie-animation do repositório iart-ai: autoplay desligado, leitura de totalFrames após load e chamada de setFrame com progresso multiplicado pelo total. Para hover com play, clique com toggle e cursor com direção, o pacote de interatividade declarativa evita fiação manual por evento.

Geração boa separa asset, padrão e conferência. O asset vem do designer ou da biblioteca. O padrão vem da skill. A conferência vem da doc atual do runtime. Sem essa separação, o modelo inventa nomes de inputs e paths que não existem no arquivo.

O ponto de partida é o repositório iart-ai web-animation-skills no GitHub. Ele inclui as skills lottie-animation e svg-animation, além de micro-interaction, 60fps-animation e accessible-animation. A skill lottie-animation orienta integração, controle, temas e exportação de Lottie e dotLottie na web, iOS, Android e React Native. A skill svg-animation orienta draw-on por stroke, morph de path e movimento ao longo de path para logos e ícones.

O prompt funciona melhor com nomes explícitos. Para SVG, o exemplo direto do repositório é: "Animate this SVG logo to draw itself on." Depois complete com ids dos paths, duração por stroke, easing e comportamento com movimento reduzido. Para Lottie, descreva arquivo, canvas alvo, loop, autoplay, segmentos e onde entram play, pause e speed. Para Rive, descreva arquivo .riv, nome da state machine, lista de inputs com tipos e qual evento atualiza cada input.

O toolkit frontend para Claude Code organiza o restante do fluxo, com padrão de design, auditoria no navegador via Playwright e Chrome DevTools, docs via Context7 e handoff via Figma. A decisão final permanece simples. Rive precisa de inputs mapeados com nomes e tipos. Lottie precisa do arquivo do designer ou de um item da biblioteca com licença verificada. O limite honesto evita retrabalho: IA integra runtime com qualidade, mas não cria o asset vetorial com intenção de design.

Vetor interativo também consome orçamento. Cada player Rive ativo mantém runtime e listeners. Cada canvas dotLottie soma decodificação e repaint. Em página com dezenas de animações, a conta fecha com pausa fora da viewport, lazy load por seção e limite de triggers simultâneos.

A regra prática usa três checagens. O vetor aparece acima da dobra em mobile. Ele responde a gesto com mudança de estado ou só reproduz em loop. Ele mantém sentido com movimento reduzido por prefers-reduced-motion. Se a resposta mostra loop fora da dobra sem gesto, troque autoplay por play na entrada com IntersectionObserver. Se mostra Rive concorrente em toda a página, reduza para os triggers com motivo e congele o restante no state inicial. Se mostra conteúdo essencial preso à animação, ofereça equivalente estático legível sem perda de informação.

motion performático 60fps e acessibilidade

Rive substitui Lottie em todo site?

Não. Rive vence onde há inputs que mudam estado durante o uso, como botões com hover, pressed e disabled e painéis com toggles, segundo youngju.dev de 16/mai/2026, snigdha de 18/jun/2026 e wikivibe de 12/jun/2026. Lottie vence onde há reprodução simples de vetor do After Effects, com dotLottie em faixa de 60 a 90 por cento mais leve, segundo cssauthor de 02/mar/2026. Em muitos sites, os dois convivem com fronteira por inputs.

Claude Code cria o arquivo .riv ou .lottie do zero?

Não com intenção de design. O fluxo esperado é o designer entregar o .riv com states e inputs nomeados ou o .lottie exportado do After Effects, ou a equipe escolher um item na biblioteca do LottieFiles com mais de 800K opções. O Claude Code integra os runtimes @rive-app/react-canvas e @lottiefiles/dotlottie-web, conecta inputs e controles e trata visibilidade, com padrão das skills do iart-ai web-animation-skills.

Qual prompt envio ao Claude Code para um logo SVG com draw-on?

Comece pelo exemplo do repositório: "Animate this SVG logo to draw itself on." Depois complete com estrutura: ids dos paths, ordem dos strokes, duração e easing por traço, suporte a prefers-reduced-motion e fallback estático. As skills lottie-animation e svg-animation do mesmo repositório detalham draw-on, morph e movimento ao longo de path sem improviso de API.

Quando dotLottie vale a troca ante JSON?

Quando peso limita a página ou quando há vários vetores no mesmo viewport. A faixa citada de 60 a 90 por cento ante JSON sustenta a troca em produção, segundo cssauthor de 02/mar/2026, youngju.dev, snigdha e wikivibe. Prefira .lottie para entrega, com temas nomeados para troca de cor sem reexportar por marca, e reserve .json legível para debug de camadas e shapes.

Rive assume vetor com estados e inputs, com base citada de 2B de usuários e exemplos em Spotify Wrapped e Duolingo. Lottie assume loops com reprodução simples, com dotLottie bem mais leve e biblioteca ampla. Razorpay Sprint26 mostra a escala possível com mais de 100 triggers Rive ao lado de Three.js e Blender, com destaque em 31/ago/2026. Claude Code rende mais com skills lottie-animation e svg-animation, prompt com nomes de asset e inputs e conferência de API antes de gerar orquestração longa.

O próximo passo depende do gargalo. Para gesto simples em React sem state machine, aprofunde micro-interações com Motion. Para publicar sem travar e com alternativa estática, avance para performance a 60fps e acessibilidade.

• YoungJu Dev sobre animação web (panorama com Rive, Lottie e dotLottie, 16/mai/2026)
• Snigdha sobre libs de animação (tabela React e Next.js com Rive e dotLottie, 18/jun/2026)
• Wikivibe sobre Rive e Lottie (state machine e base de 2B usuários, 12/jun/2026)
• Cssauthor sobre scroll e scrollytelling (dotLottie com 60 a 90 por cento e scroll-sync, 02/mar/2026)
• Docs da biblioteca LottieFiles (acervo com mais de 800K animações, 2026)
• Awwwards, Razorpay Sprint26 (100+ triggers Rive com Three.js e Blender, 31/ago/2026)
• iart-ai web-animation-skills no GitHub (skills lottie-animation e svg-animation com prompts exemplo, 2026)
• iart-ai web-animation-skills, skill lottie-animation (runtime dotLottie-web, segmentos e temas, 2026)
• Toolkit frontend para Claude Code (fluxo com auditoria e docs, 2026)