Envie seu mascote e incorpore-o como um canvas Rive cujo humor a sua página define ao passar o mouse, rolar, focar um campo de formulário ou concluir um checkout. Quando você só precisa de movimento, o WebM com fundo transparente e o MOV HEVC como alternativa tocam sobre a sua página no Chrome, Firefox, Edge e Safari.
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.
Eventos da página mapeados para o mascote
Evento da página
Mascote
Entrada
A página carrega
enter, depois idle
trigger, mood 0
Passar o mouse em uma chamada para ação
wave ou happy
mood 2 ou 1
A seção de preços aparece na rolagem
attention
mood 9
Campo do formulário recebe foco
listening
mood 6
Formulário sendo enviado
loading
mood 5
Login feito, mensagem enviada
success
trigger
Senha incorreta
error ou no
trigger
Nenhum resultado na busca
sad ou sleeping
mood 4 ou 8
Conecte à sua página
const vm = r.viewModelInstance; // after onLoad
const mood = (n) => (vm.number("mood").value = n);
cta.addEventListener("mouseenter", () => mood(2)); // wave
cta.addEventListener("mouseleave", () => mood(0)); // idle
email.addEventListener("focus", () => mood(6)); // listening
form.addEventListener("submit", () => mood(5)); // loading
// when your API answers:
vm.trigger(ok ? "success" : "no").trigger();
O embed web e o componente React entregues (com uma prop mood e play()) configuram a instância do Rive.
Onde funciona
O Webflow tem um elemento nativo do Rive e o Framer, um plugin oficial do Rive. WordPress e Shopify aceitam o .riv por meio de um embed, ou o vídeo com fundo transparente em um bloco de vídeo. Veja como adicionar animação a um site.
Limites, sendo honestos
Os olhos não seguem o cursor: o mascote alterna entre suas 17 animações.
Sem entradas caminhando pela página: enter e exit tocam no lugar.
Expressões faciais e acenos com o braço exigem arte plana; mascotes 3D se movem por inteiro.
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 interativo, o vídeo transparente e o código para web estão em todos os planos pagos, a partir do Starter (US$ 20/mês). O MP4 e o GIF têm fundo sólido, que só se integra em uma página da mesma cor. Preços em USD; os impostos são calculados no checkout pela Creem.
Posso adicionar o mascote ao Webflow, WordPress, Framer ou Shopify?
Sim. O elemento Rive do Webflow e o plugin Rive do Framer podem controlar inputs a partir de interações. No WordPress, você precisa de um plugin Rive ou de um bloco HTML personalizado. O Shopify não tem seção Rive, então envie o arquivo e incorpore-o com Custom Liquid, ou use o vídeo com fundo transparente em uma seção de vídeo do tema.
O vídeo do mascote com fundo transparente funciona no Safari?
Sim, se você listar os dois arquivos. O Safari ignora o alfa do VP9, então coloque primeiro o MOV com alfa HEVC usando type='video/quicktime; codecs="hvc1.1.6.H120.b0"' e o WebM em segundo. O Safari escolhe o MOV; Chrome, Firefox e Edge usam o WebM. O .riv é transparente em todos os navegadores.
Um mascote no site vai deixar minha página mais lenta?
Não, se ele carregar depois do conteúdo principal. O .riv de arte plana tem cerca de 40 KB, mas o runtime web do Rive acrescenta cerca de 373 KB em brotli (canvas-lite), então use lazy loading (carregamento sob demanda) quando o mascote aparecer na rolagem. Dê ao canvas largura e altura fixas para que nada se desloque durante o carregamento.
O mascote pode reagir a um formulário de login ou à rolagem?
Sim. Defina o mood quando um campo receber foco, enquanto o formulário é enviado e conforme as seções aparecem na rolagem (um IntersectionObserver funciona bem), depois dispare success, error, yes ou no de acordo com o resultado. O guia de mascote para formulário de login mostra como fazer a conexão.
Os olhos do mascote podem seguir o cursor?
Não. O conjunto não tem input de olhar nem de ponteiro, então o mascote alterna entre suas 17 animações em vez de acompanhar o ponteiro. O rastreamento dos olhos exige um rig personalizado no Rive, feito por um animador. Mesmo assim, trocar o humor ao passar o mouse faz o mascote parecer responsivo.
Como respeitar o movimento reduzido com um mascote no site?
Verifique matchMedia('(prefers-reduced-motion: reduce)'); quando corresponder, mantenha o mascote em idle ou pause a instância do Rive, e não use reprodução automática nos loops de vídeo. Pela WCAG 2.2, movimento em loop com mais de cinco segundos ao lado de outro conteúdo também precisa de um controle para pausar.
Arquivo Rive ao vivo
