Um arquivo de mascote para todas as plataformas em que seu app roda.
Envie seu mascote e receba um .riv com um contrato documentado: um número mood de 0 a 9 para os estados em loop e triggers para success, error, yes, no, enter e exit. O mesmo arquivo controla o mesmo personagem no Flutter, React Native, Android, iOS e na web, então sequências, respostas de quiz e telas vazias ficam iguais em todo lugar.
Este é o .riv real que nosso motor entrega, rodando no seu navegador. É a mesma state machine que você controla no seu app com um input numérico e um trigger para cada reação única.
O mesmo contrato em todos os runtimes
Com o que seu código conversa
CharacterViewModelMachine com o view model Character: número mood (0 idle, 1 happy, 2 wave, 3 thinking, 4 sad, 5 loading, 6 listening, 7 talking, 8 sleeping, 9 attention) e triggers success · error · yes · no · enter · exit.
CharacterStateMachine expõe o mesmo grafo como inputs clássicos, e LaunchStateMachine toca a intro.
Por plataforma
iOS: views SwiftUI para os dois runtimes da Apple, incluídas.
Web e React: embed e componente, incluídos.
Flutter: o pacote rive.
Android: app.rive:rive-android.
React Native: @rive-app/react-native; use o view model, já que as APIs de input foram removidas no Nitro v0.6.
É o estilo Duolingo de feedback com mascote: reações curtas que seu código dispara, entre loops tranquilos. Não incluído: arquivos Lottie e cenas personalizadas além das 17 animações.
Resultado real
Arquivos entregues, exatamente como você os baixaria.
MP4 Todo conjunto
1080 × 1080 a 60 fps. Aqui: o wave do Gummo, de um conjunto entregue.
WebM & MOV transparentes Todo conjunto
Canal alfa incluído, por isso o quadriculado aparece por trás. O MOV é HEVC com alfa para apps e editores da Apple.
GIF Todo conjunto
Prévias leves para documentação, e-mail e chat. O loop “thinking” do Kiko.
Vídeo de abertura 9:16 Todo conjunto
1080 × 1920 para stories e splash screens. A intro de abertura do Sizzle.
kiko.riv · 150 KB
CharacterStateMachine
input numérico mood 0 a 9: idle, happy, wave, thinking, sad, loading, listening, talking, sleeping, attention triggers: success · error · yes · no · enter · exit
LaunchStateMachine
launch → idle, toca uma vez
State machine do Rive Todo conjunto
Um único arquivo pequeno no lugar de 17 vídeos. É ele que faz funcionar a demo no topo desta página.
Componentes para web, React e SwiftUI com o nome do seu personagem.
Formatos incluídos em cada plano
Formato
Especificações
Ideal para
Starter & All in one
MP4
1080 × 1080, 60 fps, todas as 17 animações
Apps, redes sociais, apresentações, vídeos de produto
Incluído
Vídeo de abertura 9:16
MP4 1080 × 1920
Stories, Reels, splash screens
Incluído
GIF
Prévias de 480 px, fundo sólido
Documentação, e-mail, chat, README
Incluído
Rive (.riv)
Vetorial; view model com Data Binding + inputs legados: mood para os loops, triggers para as reações únicas e uma state machine para a intro de abertura
Apps e sites interativos (web, iOS, Android, Flutter)
Incluído
WebM com fundo transparente
VP9 com canal alfa, 1080 × 1080
Sobreposições na web sobre qualquer fundo
Incluído
MOV com fundo transparente
HEVC com canal alfa
Final Cut, Keynote, iOS, Safari
Incluído
Código
Componentes para web (HTML), React e SwiftUI
Cole e publique
Incluído
Baixar tudo (.zip)
Arquivo Rive, código, README e pôsteres em um só arquivo
Entrega para o seu time
Incluído
Exportação de vídeo
MP4, GIF, WebM e MOV transparentes, 9:16: escolha formatos e animações na página do conjunto, prontos em cerca de um minuto
Comece grátis. Faça upgrade quando precisar de mais.
O .riv e o código estão em todos os planos pagos, a partir do Starter (US$ 20/mês). Todo conjunto também tem MP4 e GIF de cada animação, que servem para vídeos de onboarding e capturas de tela da loja, mas não reagem ao seu app. Preços em USD; os impostos são calculados no checkout pela Creem.
O mesmo arquivo de mascote funciona no Flutter e no React Native?
Sim. O Flutter toca o arquivo com o pacote rive e o React Native com @rive-app/react-native. Para essas plataformas, incluímos um README com os nomes das state machines, os valores de mood e os nomes dos triggers, em vez de código. No runtime Nitro do React Native, use a CharacterViewModelMachine com Data Binding, já que as APIs de input foram removidas na v0.6.
O mascote pode comemorar sequências como a coruja do Duolingo?
Da mesma forma, sim: o Duolingo anima seus personagens com state machines do Rive controladas pelo código do app. Dispare success quando a sequência for mantida ou a resposta estiver certa, error ou no quando estiver errada, e defina o humor como happy ou sad entre um momento e outro. O conjunto tem 17 animações fixas; cenas sob medida precisam de um animador.
Quanto um mascote animado aumenta o tamanho do meu app?
O .riv para arte plana tem cerca de 35 a 45 KB para todas as 17 animações; arte 3D ou detalhada no modo Motion fica em torno de 1 MB. O runtime do Rive se soma ao seu binário, então confira o tamanho dele na sua plataforma se o espaço for limitado. Os arquivos MP4 e MOV HEVC funcionam sem nenhum runtime.
Por que Rive em vez de Lottie para o mascote de um app?
Um mascote troca de estado enquanto o app está rodando. Uma state machine do Rive faz isso em um único arquivo e cria transições suaves entre os estados; com Lottie, seu código precisa alternar entre animações lineares separadas. Entregamos Rive e vídeo, não JSON do Lottie.
O mascote do app funciona offline?
Sim. Inclua o .riv no pacote do seu app e ele toca sem conexão; nada é transmitido dos nossos servidores. Os arquivos MP4, MOV e WebM também funcionam offline.
Arquivo Rive ao vivo
