Veja no seu app.
Nossos personagens da casa, ao vivo em telas reais de app e momentos de produto. Escolha uma tela para ver o que toca e quando.
Abertura: uma intro, depois idle
A intro de abertura toca uma vez enquanto o app abre, cerca de 2,6 segundos, e termina na pose de repouso. Depois o personagem fica em idle até a primeira tela estar pronta.
O que toca
Intro de abertura, depois idle (mood 0)
Guia de animação de splash screen
Boas-vindas a bordo
Vamos configurar tudo juntos.
Onboarding: um aceno de olá
O loop de aceno recebe as pessoas novas nas primeiras telas. Quando elas concluem uma etapa, mude para happy para que o progresso pareça uma pequena vitória.
O que toca
Wave (mood 2), happy (mood 1) após cada etapa
Mascotes no onboarding
Sincronizando seus dados…
Carregamento: a espera parece viva
O loop de carregamento roda enquanto os dados sincronizam, para que uma espera nunca pareça travada. Para esperas de menos de um segundo, não mostre nada.
O que toca
Loading (mood 5), success quando terminar
Guia de animação de carregamento
Hero do site: um rosto ao lado do seu título
O personagem acena enquanto as pessoas leem o seu título e pode reagir à página: happy quando alguém se cadastra, thinking na tabela de preços.
O que toca
Wave (mood 2), success no cadastro
Mascote animado para site
Nenhuma mensagem ainda
Quando alguém escrever para você, a mensagem aparece aqui.
Estado vazio: nada aqui ainda
Uma caixa de entrada ou lista vazia ganha um loop sad ou sleeping e um próximo passo claro. Transmite calma, não parece um erro.
O que toca
Sad (mood 4) ou sleeping (mood 8)
Mascotes em estados vaziosVPN segura
Conectando…
Londres · Reino Unido
Uma VPN conectando
Loading enquanto conecta, depois a reação success toca uma vez e um loop happy permanece enquanto você está protegido.
O que toca
Loading (mood 5), success, depois happy (mood 1)
Mascotes para apps de segurança
Buscando…
Uma busca terminando
Thinking enquanto os resultados carregam, depois a reação success quando eles chegam. Um número e um trigger vindos do seu código.
O que toca
Thinking (mood 3), depois success
Estados de animação do mascote$250.00
para Alex Morgan
Enviando…
Uma transferência que falha
Loading enquanto o dinheiro é transferido. Se falhar, a reação error toca uma vez e um loop sad permanece até a pessoa tentar de novo.
O que toca
Loading (mood 5), error, depois sad (mood 4)
Mascotes para apps de fintech
Ouvindo…
Um assistente de IA respondendo
Listening enquanto a pessoa digita, thinking enquanto o modelo trabalha, talking enquanto a resposta é transmitida, depois um aceno de yes quando termina.
O que toca
Listening (6), thinking (3), talking (7), depois yes
Avatares de assistentes de IALogos que se movem.
Arquivos ao vivo, não vídeos: passe o ponteiro sobre eles ou toque em um. Cada um é construído a partir das partes do seu próprio logo.
Crie o seu.
Como funciona- 01
Adicione seu personagem ou logo
Envie um PNG, JPEG ou WebP (SVG para logos) ou crie um com IA no app.
- 02
Nós o animamos
O motor encontra as partes e cria cada animação a partir da sua própria arte, sem redesenhar.
- 03
Cole no seu app
Receba o arquivo Rive, código para a sua plataforma e vídeos. Conecte os moods às suas telas, como nos exemplos acima.
Perguntas
As respostas curtas. FAQ completo
Estas animações são reais?
Sim. Cada tela reproduz o arquivo Rive incluído em um conjunto de personagem, controlado pelos mesmos números de mood e triggers que o seu próprio código usaria. Nada é um vídeo simulado.
Quem são esses personagens?
Kiko, Sizzle, Pebble e Gummo são personagens da casa do Charmotion. Eles foram animados pelo mesmo motor que anima os seus, cada um a partir de uma imagem.
Como faço isso com o meu próprio personagem?
Envie seu desenho no app ou crie um personagem com IA (2 designs com IA são grátis). Os conjuntos de personagem começam no Starter e cada um tem todas as 17 animações.
Quais arquivos eu recebo?
Um arquivo .riv com todas as animações e uma state machine, código para web, React e SwiftUI, e vídeos MP4, GIF e WebM ou MOV com fundo transparente exportados quando você precisar.
Coloque em movimento.
Designs com IA e ideias de logo são grátis. Sem cartão.