Respostas curtas para dúvidas comuns sobre animação.
Cada resposta é a versão resumida; siga o link para o guia completo com exemplos e fontes.
Transforme sua imagem em animação
Como posso animar o mascote que já tenho para o meu app?
Faça o rig da sua arte atual e anime os estados que seu app usa (idle, loading, success, error, estado vazio), depois entregue tudo em um arquivo Rive, no qual seu código alterna entre eles. Faça você mesmo no editor do Rive ou envie o mascote para um gerador como o Charmotion, que entrega 17 animações em Rive, vídeo, GIF e código.
Leia o guia: Como animar um mascote sem After EffectsAnimador de mascote com IA
Quais são as melhores ferramentas de PNG para animação Rive?
As principais opções são o editor do Rive (você importa o PNG, adiciona malhas e bones e monta a state machine), o AI Agent integrado ao editor do Rive nos planos pagos, um gerador como o Charmotion, que entrega um .riv com 17 animações a partir de uma imagem, e Rive Experts contratados pela Contra para trabalhos sob medida.
Leia o guia: Melhores ferramentas de PNG para animação Rive em 2026PNG para Rive
Existe uma ferramenta que transforma um personagem estático em animações?
Sim. Adobe Character Animator, Live2D e Spine animam artes em camadas ou com partes separadas; o Animated Drawings, da Meta, anima desenhos de figuras humanas; geradores como o Charmotion transformam uma imagem de personagem em 17 animações prontas para apps; e modelos de IA de imagem para vídeo geram clipes curtos. Ferramentas baseadas em rig preservam exatamente a sua arte, enquanto o vídeo gerado a redesenha.
Leia o guia: Melhores ferramentas de IA para animar um personagem ou mascote 2D (2026)Imagem para animação de personagem
Quais são os melhores serviços de animação de mascote com exportação para Rive?
Rive Experts (freelancers e estúdios verificados pelo time do Rive e contratados pela Contra) servem para trabalhos personalizados. Serviços automatizados como o Charmotion geram, a partir de uma imagem, um .riv com uma state machine documentada e um view model com Data Binding, a partir de US$ 20 por mês. Sempre peça estados nomeados e código de integração.
Leia o guia: Serviços de animação de mascote com exportação para Rive: suas opçõesServiço de animação Rive
Como adicionar um mascote animado no SwiftUI?
Adicione o pacote Swift do Rive, coloque o .riv do mascote no seu bundle e exiba-o com RiveViewModel(fileName:stateMachineName:).view(). Defina um input numérico como mood para trocar os loops e dispare triggers para as reações únicas, ou use o runtime da Apple do Rive com Data Binding. Os conjuntos do Charmotion vêm com arquivos SwiftUI prontos para os dois runtimes.
Leia o guia: Mascote animado de onboarding em SwiftUIPara apps iOS
A IA consegue animar meu logo sem mudar o design?
Sim, se a ferramenta fizer o rig do seu logo em vez de gerá-lo de novo. Ferramentas baseadas em rig movem seus próprios pixels ou formas vetorizadas, então o design continua idêntico; modelos de vídeo generativos redesenham cada frame e podem alterar detalhes. O Charmotion usa IA só para identificar as partes do logo e depois anima exatamente a sua arte.
Leia o guia: Como animar um logo a partir de um PNG ou imagem feita com IACriador de logo animado
Quais são as alternativas a contratar um motion designer para um mascote?
Use templates prontos se o mascote não precisar ser o seu próprio personagem, anime você mesmo no Rive ou no Lottie Creator, gere estados prontos para app a partir da imagem do seu mascote com uma ferramenta como o Charmotion, use IA de imagem para vídeo para clipes avulsos ou contrate um freelancer para um escopo pequeno e fechado.
Leia o guia: Alternativas a contratar um motion designer para o seu mascoteAnimador de mascote com IA
Como transformar um PNG em uma animação do Rive?
Importe o PNG no editor do Rive, adicione uma malha para que os pixels possam se deformar, vincule-a a bones (ossos), crie os keyframes de cada animação e conecte-as em uma state machine; depois, exporte o .riv. Dividir antes o personagem em imagens separadas por parte gera um movimento muito mais natural do que deformar uma única imagem plana.
Leia o guia: PNG para animação Rive: como transformar uma imagem em um arquivo .rivVeja no seu app
Como animar um mascote sem After Effects?
Use o editor do Rive para personagens interativos em apps, o Lottie Creator da LottieFiles, que roda no navegador, para loops elaborados, CSS ou SVG para um balanço ou piscar simples, ou um gerador que cria um conjunto completo de estados a partir de uma imagem do seu mascote. Nenhum deles exige After Effects.
Leia o guia: Como animar um mascote sem After EffectsVeja no seu app
Posso importar um SVG no Rive?
Sim. O Rive converte um SVG importado em objetos vetoriais nativos e editáveis, em vez de mantê-lo como arquivo incorporado. Agrupe as formas por parte do corpo e nomeie as camadas na sua ferramenta de design antes de exportar, porque essa estrutura vira o seu rig.
Dá para animar um personagem a partir de uma única imagem?
Sim. Uma ferramenta de rigging separa a imagem em partes ou a cobre com uma malha deformável, adiciona um esqueleto e cria os keyframes, mantendo sua arte exatamente como ela é. Um modelo de vídeo generativo também consegue animar a partir de uma imagem, mas redesenha o personagem a cada frame, então os detalhes podem mudar entre quadros.
Leia o guia: Imagem para animação de personagem: o que funciona e o que esperarVeja no seu app
Que tipo de imagem anima melhor?
Um personagem plano, de frente, com cores sólidas, bordas limpas, cabeça, corpo e membros bem separados, e fundo liso ou transparente. Fotos, arte com aspecto de pintura e vistas de perfil ou de três quartos são difíceis para qualquer rig; arte 3D detalhada ainda pode receber squash, stretch e piscadas.
Leia o guia: Imagem para animação de personagem: o que funciona e o que esperar
O que devo receber ao encomendar a animação de um mascote?
Um conjunto de estados, e não um único clipe: no mínimo idle, saudação, carregamento, sucesso, erro e um estado vazio, entregues como arquivo Rive interativo, além de WebM e MOV com fundo transparente, MP4 e GIF, com direitos comerciais que continuam valendo após o fim de qualquer assinatura e um número combinado de revisões.
Leia o guia: Serviço de animação de mascote: o que pedir e o que você deve receberVeja no seu app
Quanto tempo leva para animar um mascote?
À mão, fazer o rig de um personagem e criar os keyframes de um conjunto completo de estados de app é um trabalho considerável, que depende do número de estados e do estilo; por isso, peça a um animador um cronograma por estado. O Charmotion produz 17 animações a partir de uma imagem, geralmente em poucos minutos.
Leia o guia: Serviço de animação de mascote: o que pedir e o que você deve receberVeja no seu app
Quanto custa animar um mascote com o Charmotion?
O Free inclui dois designs com IA (logos ou personagens) e três conceitos de animação de logo, mas nenhum conjunto de personagem nem build de animação de logo. O Starter custa US$ 20 por mês por 3 conjuntos de personagem e 3 animações de logo em todos os formatos, e adiciona o arquivo Rive com state machines, WebM e MOV transparentes e código React e SwiftUI. O All in one custa US$ 100 por mês por 10 conjuntos e 15 animações de logo, com builds e suporte prioritários.
Leia o guia: Serviço de animação de mascote: o que pedir e o que você deve receberVeja no seu app
Posso transformar meu logo em um personagem animado?
Sim, se o logo tiver um rosto ou formato de personagem. Logos planos são vetorizados em partes e recebem rig; logos detalhados ou 3D mantêm seus pixels e ganham squash, stretch, inclinação e piscadas. Logotipos só de texto combinam mais com uma revelação de logo do que com estados de personagem.
Leia o guia: Como animar um logo a partir de um PNG ou imagem feita com IAVeja no seu app
O Charmotion redesenha meu personagem com IA?
Não. A sua arte enviada nunca é redesenhada. O motor usa verificações assistidas por IA para encontrar partes como a cabeça e os braços, depois faz o rig e os keyframes dos seus próprios pixels ou formas traçadas no Rive. A IA generativa só é usada pelo designer de IA opcional (Criar com IA), para quem ainda não tem um personagem ou logo.
Leia o guia: Imagem para animação de personagem: o que funciona e o que esperarVeja no seu app
Posso animar meu personagem de graça?
Em parte. Entre as opções grátis estão a demo Animated Drawings da Meta para desenhos parecidos com humanos, o modo Starter do Adobe Character Animator e a versão FREE do Live2D. A prévia grátis do Charmotion mostra a sua imagem em telas reais de app com um clipe animado com marca d'água, além de ferramentas grátis de planejamento e de arquivos. O plano gratuito dele inclui dois designs com IA (logos ou personagens) e conceitos grátis de animação de logo; os conjuntos de personagem completos começam em US$ 20 por mês.
Leia o guia: IA para animação de personagens 2D: o que funciona para mascotes, personagens de marca e jogosImagem para animação de personagem
A IA consegue fazer meu personagem falar a partir de um arquivo de áudio?
Sim, mas não com o Charmotion. O Adobe Character Animator faz sincronização labial automática em um puppet em camadas, o Reallusion Cartoon Animator gera lip-sync a partir de áudio, o Adobe Express anima seus próprios personagens predefinidos com uma gravação em WAV ou MP3, e SDKs como o Mascotbot sincronizam os lábios de avatares em tempo real para agentes de voz. O loop talking do Charmotion não é sincronizado com áudio.
A IA consegue fazer um ciclo de caminhada ou uma sprite sheet do meu personagem?
Sim, com ferramentas focadas em jogos. O Charios separa automaticamente as camadas de uma imagem de personagem, faz o retarget de captura de movimento humanoide, como andar, correr e pular, e exporta para engines como Unity; o Spine oferece controle esquelético completo para jogos 2D. Ferramentas de estados de mascote, incluindo o Charmotion, não fazem ciclos de caminhada nem sprite sheets.
A IA consegue animar uma imagem estática de um personagem de desenho?
Sim. Ferramentas baseadas em rig identificam as partes de uma imagem cartoon e movem seus próprios pixels ou formas vetorizadas, gerando loops perfeitos que mantêm o design exato do personagem. Modelos de imagem para vídeo, como Runway ou Kling, também animam uma imagem estática, com movimento mais livre, mas geram frames novos, então os detalhes podem mudar. Arte de frente com membros separados funciona melhor.
Leia o guia: Como animar o seu próprio personagem com IA: escolha o método pelo objetivoImagem para animação de personagem
A IA vai mudar o design do meu personagem ao animá-lo?
Depende do método. Modelos de imagem para vídeo e de transferência de movimento geram cada frame, então rostos, roupas, cores e acessórios podem mudar. Ferramentas baseadas em rig movem a sua arte original com bones e malhas, então o design fica idêntico. O Charmotion nunca redesenha o personagem: arte plana com partes separadas recebe um rig vetorial, enquanto renders 3D, gradientes e imagens feitas com IA são animados como estão, com squash, stretch, inclinação, pulinhos e piscadas.
Leia o guia: Por que a animação com IA muda o seu personagem (e como evitar isso)Imagem para animação de personagem
Posso enviar meu próprio personagem para o Adobe Express?
Não no recurso Animate characters do Adobe Express. Ele anima personagens da própria biblioteca da Adobe com o áudio que você grava ou envia, e um gerente de comunidade da Adobe já disse que personagens personalizados estão entre os recursos mais pedidos. Para animar o seu próprio personagem, use o Adobe Character Animator com um puppet em camadas, ou uma ferramenta que parte de uma única imagem.
Leia o guia: Dá para enviar seu próprio personagem no Animate Characters do Adobe Express?
O Meta Animated Drawings ainda está disponível?
Sim, mas ele não recebe mais manutenção. A demo no navegador em sketch.metademolab.com ainda carregava em outubro de 2026, e o código com licença MIT está no GitHub, mas o repositório foi atualizado pela última vez em 3 de setembro de 2025 e está arquivado. Funciona melhor com desenhos de figuras humanas com dois braços e duas pernas.
Leia o guia: Alternativas ao Meta Animated Drawings (e ele ainda é mantido?)
Qual é a melhor ferramenta de IA para animar um personagem 2D?
Depende do trabalho. Para performance ao vivo e lip-sync, Adobe Character Animator ou Cartoon Animator; para clipes de dança ou cinematográficos, Viggle, Runway ou Kling; para desenhos de crianças, a demo Animated Drawings da Meta; para personagens de jogos, Charios ou Spine; para estados de mascote em apps e sites a partir de uma imagem, uma ferramenta de conjuntos de estados como o Charmotion.
Leia o guia: Melhores ferramentas de IA para animar um personagem ou mascote 2D (2026)Animador de mascote com IA
Como animar o desenho do meu filho com IA?
Fotografe o desenho reto, com luz uniforme, recorte para deixar só uma figura sobre um fundo liso e envie para a demo no navegador Animated Drawings, da Meta, ou para o app AniMagic para iOS. Os dois foram feitos para desenhos infantis de figuras humanas e adicionam movimentos prontos, como dançar. Envie só o desenho, nunca uma foto da criança.
Leia o guia: Como animar um desenho com IA: rabiscos de criança vs arte de personagem finalizada
Como animar meu OC com IA?
Comece com loops curtos, como idle, wave, sleeping e algumas reações, feitos com uma ferramenta baseada em rig para que o seu OC mantenha o design exato em emojis do Discord, stickers e perfis. Use ferramentas de transferência de movimento, como Viggle ou Runway Act-Two, para danças e edits de luta, aceitando alguma perda de consistência do personagem, e o Live2D se quiser fazer streams como o seu OC.
Leia o guia: Como animar seu OC: loops, reações, danças e modelos de VTuberVeja no seu app
Qual é uma boa alternativa ao Adobe Character Animator?
O Reallusion Cartoon Animator é a alternativa mais próxima, com animação de puppet e lip-sync a partir de áudio; o Live2D é indicado para modelos de VTuber. Para um conjunto fixo de loops para app ou site a partir de uma imagem, uma ferramenta de conjuntos de estados como o Charmotion é mais rápida. Para transmissão ao vivo e lip-sync, Character Animator e Cartoon Animator continuam sendo as melhores ferramentas.
A IA consegue transformar meu personagem em um modelo de VTuber?
Não em um clique. Um modelo de VTuber normalmente é um rig do Live2D feito a partir de uma ilustração desenhada em camadas separadas (olhos, boca, cabelo, corpo), depois recebe rig no Live2D Cubism e controlado por rastreamento facial. Ferramentas de animação a partir de uma única imagem, incluindo o Charmotion, fazem loops e reações, não um modelo de VTuber rastreável.
Leia o guia: Como animar seu OC: loops, reações, danças e modelos de VTuber
Quanto custa um mascote interativo em Rive?
Um mascote Rive interativo sob medida costuma custar de US$ 1.500 a US$ 6.000. A Mascot Engine, uma fornecedora, cobra de US$ 2.500 a US$ 6.000 ou mais por um mascote com state machines, e os pacotes de um Rive Expert no Contra vão de US$ 1.600 por 3 estados sobre a sua arte até US$ 4.000 ou mais por 10 estados com design original e lip-sync. Sistemas completos de produto custam mais.
Quanto um animador Rive cobra por hora?
O Contra indica de US$ 25 a US$ 150 por hora para animadores Rive: cerca de US$ 25 a US$ 45 no nível iniciante e de US$ 75 a US$ 150 para especialistas experientes. A mediana do Upwork para animadores em geral fica em torno de US$ 20 a US$ 38. Para um mascote, um preço fechado por uma lista de estados combinada costuma ser mais fácil de comparar do que orçamentos por hora.
Leia o guia: Como contratar um animador Rive: plataformas, valores e avaliação
O lip-sync está incluído nos preços de animação de mascote?
Normalmente não. O lip-sync exige um conjunto de formatos de boca e uma lógica para alterná-los no ritmo da fala, por isso é cobrado como adicional ou como o pacote mais alto. O anúncio de um Rive Expert no Contra inclui lip-sync em tempo real apenas no pacote de US$ 4.000 ou mais. O Duolingo conta que usa mais de 20 formatos de boca para os seus personagens.
Quanto custa desenhar um mascote antes de animá-lo?
Reserve um orçamento separado para o design: a Pixune, um estúdio, lista design de mascote 2D por US$ 500 a US$ 1.500 e design de mascote 3D por US$ 2.000 a US$ 10.000. Muitos anúncios de animação não incluem o design; um serviço de Rive/Lottie no Dribbble diz que o preço base de US$ 300 normalmente cobre só a animação, com a ilustração orçada à parte.
Devo contratar um animador ou usar IA para o meu mascote?
Use uma ferramenta automatizada quando você já tem a arte e precisa de estados padrão de app, como idle, loading, success e error. Contrate um animador para lip-sync, atuação personalizada, design de personagem novo, ciclos de caminhada ou interações sob medida. Use vídeo com IA de transferência de movimento para clipes de dança e memes.
Leia o guia: Quanto custa animar um mascote em 2026?Veja no seu app
O Viggle é bom para mascotes de marca?
O Viggle é bom para colocar um mascote em clipes de dança, memes e trends, porque copia o movimento de um vídeo de referência. Ele se encaixa pior em estados de marca: os frames são gerados, então os detalhes podem mudar, os clipes não fazem loop de forma limpa e não há state machine para um app. Em outubro de 2026, os planos começam em US$ 7,99 por mês.
Leia o guia: Alternativas ao Viggle para mascotes de marca (não para memes de dança)
O Viggle exporta vídeo com fundo transparente?
Pela API, sim, em dois arquivos: o modo transparente do Viggle retorna um vídeo principal e uma máscara alfa separada para composição em um editor. Ele também sugere um fundo verde puro para chroma key. Isso não é um único arquivo com canal alfa, como WebM (VP9) ou MOV HEVC, que você coloca direto em uma página web.
Leia o guia: Alternativas ao Viggle para mascotes de marca (não para memes de dança)
O que é o Animation AI Pro?
"Animation AI Pro" geralmente se refere ao AnimateAI, em animateai.pro, uma ferramenta web que transforma uma história ou roteiro em vídeos animados gerados por IA com personagens reutilizáveis. Em outubro de 2026, o plano Standard custa US$ 39,99 por mês após uma semana de teste de US$ 5,99, e o Pro custa US$ 99,99. Ele faz vídeos narrativos, não estados interativos para apps.
Leia o guia: Melhores ferramentas de IA para animar um personagem ou mascote 2D (2026)
Devo pedir a um animador Rive inputs ou Data Binding?
Peça Data Binding em projetos novos. A documentação do Rive considera os inputs de state machine obsoletos e recomenda Data Binding para trabalhos novos, embora os inputs existentes continuem funcionando. Peça ao animador para documentar o view model e cada propriedade que o seu código define, além dos nomes das state machines.
Leia o guia: Como contratar um animador Rive: plataformas, valores e avaliação
Já tem um personagem? Veja seu personagem em telas reais de app (grátis, no seu navegador) ou veja os planos.
Adicione animação ao seu app ou site
Como adiciono animação a um app SwiftUI?
Envolva uma mudança de estado em withAnimation ou adicione .animation(_:value:) a uma view, e o SwiftUI interpola a diferença. Para movimentos em várias etapas, use PhaseAnimator ou KeyframeAnimator, disponíveis a partir do iOS 17. Para personagens criados por designers, adicione o runtime do Lottie ou do Rive pelo Swift Package Manager.
Leia o guia: Como adicionar animação a um app iOS (SwiftUI e UIKit)
Como adiciono Lottie a um app iOS?
Adicione o pacote https://github.com/airbnb/lottie-spm.git no Xcode em File > Add Package Dependencies. A Airbnb recomenda esse wrapper porque ele tem menos de 500 KB, enquanto o repositório principal passa de 300 MB. Desde a versão 4.3.0, uma LottieView em SwiftUI reproduz animações diretamente e oferece suporte a movimento reduzido.
Leia o guia: Como adicionar animação a um app iOS (SwiftUI e UIKit)
Como adiciono uma animação Rive a um app iOS?
Adicione https://github.com/rive-app/rive-ios com o Swift Package Manager, ou pod 'RiveRuntime' com o CocoaPods; depois, use import RiveRuntime e renderize RiveViewModel(fileName: "name").view() no SwiftUI. O runtime é compatível com iOS 14 ou posterior, além de tvOS 16, macOS 13.1, Mac Catalyst 14 e visionOS 1. Os runtimes novos e legados para Apple vêm no mesmo pacote.
Leia o guia: Como adicionar animação a um app iOS (SwiftUI e UIKit)
Como animo SF Symbols?
Use o modificador .symbolEffect, disponível a partir do iOS 17 e do macOS Sonoma. Os efeitos nativos incluem bounce, pulse, variable color, scale, appear, disappear e replace, e também funcionam com símbolos personalizados. É uma forma rápida de animar ícones sem adicionar nenhuma biblioteca de animação de terceiros.
Leia o guia: Como adicionar animação a um app iOS (SwiftUI e UIKit)
Qual API de animação devo usar no Jetpack Compose?
Escolha conforme o caso: animate*AsState para um único valor com um alvo, AnimatedVisibility para mostrar e ocultar, AnimatedContent ou Crossfade para trocar conteúdo, updateTransition para várias propriedades ao mesmo tempo e rememberInfiniteTransition para loops. Para animações ilustradas complexas, o Google indica uma biblioteca de terceiros, como o Lottie.
Leia o guia: Como adicionar animação a um app Android (Compose)
Ainda devo usar MotionLayout no Android?
Só para telas baseadas em View. A página do MotionLayout no Google agora abre com o aviso "Try the Compose way", que recomenda o Jetpack Compose e suas APIs de animação para novas interfaces. O MotionLayout faz parte do sistema de Views, então layouts existentes baseados em View podem continuar usando-o, enquanto novas telas criadas em Compose devem usar as animações do Compose.
Leia o guia: Como adicionar animação a um app Android (Compose)
Como adicionar Rive a um app Jetpack Compose?
Adicione app.rive:rive-android (confira a documentação atual para saber a versão mais recente) junto com androidx.startup. A API de Compose do Rive, marcada como beta, usa rememberRiveWorker(), rememberRiveFile() e o composable Rive. A antiga RiveAnimationView, baseada em View, é chamada de legada, mas continua com suporte para apps existentes, e as duas abordagens carregam o mesmo arquivo .riv.
Leia o guia: Como adicionar animação a um app Android (Compose)
Qual a diferença entre animações implícitas e explícitas no Flutter?
Animações implícitas, como AnimatedContainer, animam automaticamente do valor antigo para o novo quando você reconstrói o widget. Animações explícitas são controladas por um AnimationController, que gera valores de 0,0 a 1,0 ao longo de uma duração e precisa de um ticker de vsync. Use animações explícitas quando precisar iniciar, parar, repetir ou inverter.
Como adicionar Lottie ou Rive a um app Flutter?
Para Lottie, adicione o pacote lottie, escrito em Dart puro, e chame Lottie.asset() ou Lottie.network(); arquivos dotLottie funcionam por meio de um loader personalizado. Para Rive, adicione o pacote rive (0.14.x), que depende de rive_native e oferece os renderizadores do Rive e do Flutter em todas as plataformas.
Devo usar Animated ou Reanimated no React Native?
O Animated nativo funciona bem para animações simples baseadas em tempo; defina useNativeDriver: true para que elas rodem na thread de UI em vez de atravessar a bridge a cada frame. Escolha o Reanimated para movimentos complexos ou controlados por gestos. O Reanimated 4 funciona apenas na New Architecture e exige react-native-worklets.
O Framer Motion agora se chama Motion?
Sim. A biblioteca agora é publicada como Motion. Para atualizar um projeto React, desinstale framer-motion, rode npm install motion e altere os imports para import { motion } from "motion/react". O guia de atualização trata isso como uma simples renomeação de pacote para quem usa React, então o código dos componentes existentes continua funcionando quase sem mudanças.
Leia o guia: Como adicionar animação a um app React ou Next.js
Como adicionar uma animação Lottie a um site?
Use os players dotLottie da LottieFiles. O jeito mais rápido é o web component: carregue @lottiefiles/dotlottie-wc e escreva <dotlottie-wc src="anim.lottie" autoplay loop>. Com um bundler, use @lottiefiles/dotlottie-web em um canvas, ou os pacotes para React, Vue, Svelte ou Solid. Arquivos .json e .lottie são reproduzidos.
Leia o guia: Como adicionar animação a um site (HTML, CSS, JS)
Como adicionar uma animação Rive a uma página HTML simples?
Adicione um <canvas> e o script @rive-app/webgl2 via unpkg ou npm, e depois crie new rive.Rive({ src, canvas, autoplay: true, stateMachine }). Chame resizeDrawingSurfaceToCanvas() em onLoad para que a renderização fique nítida, e chame cleanup() quando remover a animação da página para liberar a memória.
Leia o guia: Como adicionar animação a um site (HTML, CSS, JS)
Quais propriedades CSS devo animar para ter uma performance fluida?
Anime transform e opacity sempre que puder. O web.dev explica que essas propriedades ficam na etapa de composição, enquanto propriedades como top, left, width ou margin disparam trabalho de layout ou de pintura. Use will-change com moderação, só onde você mediu um problema real.
Leia o guia: Como adicionar animação a um site (HTML, CSS, JS)
O Webflow tem suporte nativo ao Rive?
Sim. Desde 18 de setembro de 2024, o Webflow trata o Rive como formato nativo: envie o arquivo .riv para Assets, arraste o elemento Rive de Add > Media para a página e escolha o artboard, a state machine, o ajuste (fit) e a reprodução automática. Elementos Rive também podem ser conectados às interações do Webflow.
Leia o guia: Como adicionar animações Rive, Lottie e vídeo ao Webflow
O Framer é compatível com Rive e Lottie?
Sim. O plugin oficial do Rive para Framer permite inserir um arquivo .riv e controlar os inputs da state machine por meio de variantes. Segundo a LottieFiles, componentes Lottie e dotLottie estão disponíveis em Insert > Media. Para clipes simples, o componente Video do Framer reproduz arquivos MP4 enviados ou hospedados, mas não os comprime.
Leia o guia: Como adicionar animações Rive e Lottie ao Framer
Como adicionar animação a um site WordPress?
Para vídeo, o bloco Video nativo tem as opções Autoplay, Loop, Muted, Play inline, Preload e Poster. Para Lottie, instale o plugin de bloco oficial da LottieFiles. Para Rive, use um plugin de bloco de terceiros ou cole o snippet do runtime web do Rive em um bloco Custom HTML.
Leia o guia: Como adicionar animações Lottie, Rive e vídeo ao WordPress
Dá para adicionar Lottie ou Rive a uma loja Shopify?
Não nativamente, mas você pode colar o código do player em uma seção Custom Liquid, se o seu tema oferecer uma, ou usar um app. Para vídeo simples, o Shopify aceita uploads de MP4 e MOV de até 1 GB e 10 minutos como mídia de produto, e muitos temas incluem seções de vídeo.
Como tornar uma animação de carregamento acessível?
Coloque um texto curto como "Carregando…" em um elemento com role="status" para que leitores de tela o anunciem, e esconda o spinner decorativo com aria-hidden="true". Defina aria-busy na região que está sendo atualizada, e desacelere ou substitua o movimento quando prefers-reduced-motion: reduce for verdadeiro.
Leia o guia: Como adicionar uma animação de carregamento a um app ou site
Como faço a animação do logo no cabeçalho tocar uma vez?
Use um <video> mudo e inline sem o atributo loop, para que ele pare no último frame, e faça desse frame o seu logo em repouso. Inicie com play() apenas quando o movimento reduzido não estiver ativado, e defina o logo estático como poster para que, mesmo com a reprodução automática bloqueada, o cabeçalho apareça corretamente.
Leia o guia: Como adicionar um logo animado ao cabeçalho do seu site
Como impedir que uma sobreposição de animação bloqueie os cliques?
Defina pointer-events: none no canvas ou vídeo da sobreposição para que cliques e toques passem para o conteúdo abaixo; no SwiftUI, use .allowsHitTesting(false). Para vídeo com fundo transparente, liste um .mov HEVC com alfa antes do WebM VP9 para que o Safari também mostre a transparência em vez de uma caixa opaca.
Leia o guia: Como colocar uma animação com fundo transparente sobre o conteúdo
Um mascote pode ficar em loop para sempre em um estado vazio?
Não deveria rodar indefinidamente sem um controle. O critério 2.2.2 da WCAG 2.2 exige uma forma de pausar, parar ou ocultar movimentos automáticos que durem mais de cinco segundos ao lado de outros conteúdos. Reproduza o loop algumas vezes e depois pare em um frame estático, ou adicione um botão de pausa, e mostre uma pose estática quando o movimento reduzido estiver ativado.
Leia o guia: Como adicionar um mascote ao onboarding e aos estados vazios
É possível animar ícones de apps no Android?
Não pelo seu app. Ícones adaptativos são camadas estáticas de primeiro plano e de fundo de 108 dp, e o Google diz que efeitos animados como parallax são gerados pelos launchers compatíveis. O único movimento de ícone que você controla é a splash screen do Android 12+, em que o ícone centralizado pode ser um AnimatedVectorDrawable. Qualquer coisa mais elaborada deve ficar dentro do app.
Leia o guia: Dá para animar o ícone do app? O que o iOS e o Android realmente permitem
Posso trocar o ícone do app pelo código?
Sim, entre ícones que você inclui no app. No iOS, verifique supportsAlternateIcons e chame setAlternateIconName com um conjunto de ícones declarado no build, ou nil para o ícone principal. O Android não tem uma API própria para ícones; os apps costumam ativar e desativar entradas activity-alias, cada uma com o seu próprio ícone. Não é possível baixar ícones novos em runtime.
Leia o guia: Ícones alternativos do app no iOS, Android, Expo e Flutter
Quanto tempo pode durar a animação do ícone da splash no Android?
O Google recomenda no máximo 1.000 ms em celulares, com atraso de início de até 166 ms, e uma animação em loop se a inicialização demorar mais. No Android 12, em apps voltados para a API 31 ou 32, defina windowSplashScreenAnimationDuration; o Android 13 lê a duração do AnimatedVectorDrawable. Nenhum dos dois altera quanto tempo a splash screen fica visível.
Leia o guia: Ícone animado na splash screen do Android: especificações, XML e transição
Qual o tamanho de um ícone animado de splash no Android?
Um ícone animado de splash screen é um AnimatedVectorDrawable em um canvas de 432 dp, quatro vezes o de um ícone adaptativo, e só os dois terços internos, 288 dp, ficam visíveis. Mantenha a sua arte dentro dessa área, senão ela é cortada pela máscara. Ícones estáticos de splash têm 288×288 dp dentro de um círculo de 192 dp, ou 240×240 dp dentro de 160 dp quando há fundo de ícone.
Leia o guia: Ícone animado na splash screen do Android: especificações, XML e transição
Um ícone animado de splash funciona antes do Android 12?
Não. A biblioteca androidx core-splashscreen recria a splash screen do Android 12 a partir da API 23, mas a referência dela aponta uma exceção: o suporte a AnimatedVectorDrawable. Aparelhos mais antigos mostram um ícone estático. Coloque o drawable animado em res/drawable-v31 e uma versão estática em res/drawable para que cada aparelho receba a versão certa.
Leia o guia: Ícone animado na splash screen do Android: especificações, XML e transição
Ferramentas de programação com IA conseguem adicionar uma splash screen animada?
Sim, se o prompt fornecer os fatos que eles costumam errar: a launch screen do sistema continua estática, a intro toca na primeira tela, o nome exato da state machine, um timer quando o arquivo não dispara nenhum evento de fim, uma única cor de fundo compartilhada e um fallback para movimento reduzido. Mantenha essas regras no CLAUDE.md, no AGENTS.md ou nas Cursor rules.
Leia o guia: Prompts de IA para adicionar uma splash screen ou um mascote de carregamento animado
O Wix aceita animações Rive?
Sim, no Wix Studio. O Editor do Studio tem um elemento Rive em Adicionar elementos, Mídia, Rive: envie um .riv para o Gerenciador de Mídia e depois escolha o artboard, a state machine, o ajuste e a reprodução automática em Configurações. Ele não expõe inputs ao código da página, e a Wix o documenta só para o Studio, então no Editor Wix clássico use um elemento Embed HTML.
O Wix Velo consegue mudar o estado de uma animação Rive?
Não pelo elemento Rive: a referência $w do Velo não lista nenhum elemento Rive, então não há forma documentada de definir os inputs ou o view model dele. Em vez disso, rode o runtime web do Rive dentro de um elemento HTML iFrame e envie a ele um número de mood ou o nome de um trigger a partir do código da página com postMessage, tratado por um listener de message no embed.
Posso adicionar JavaScript personalizado no plano Basic do Squarespace?
Não. A Squarespace informa que adicionar JavaScript ou um iframe em um Code Block exige o plano Core, Plus ou Advanced, e a Code Injection está disponível nesses planos e em alguns planos legados. No Basic, use um MP4 sem som, com reprodução automática e em loop, em um Video Block, ou um GIF animado, em vez de um player Rive ou Lottie.
Leia o guia: Como adicionar um mascote animado ao Squarespace
Qual plano do Carrd permite embeds?
Pro Standard ou superior. A documentação do Carrd diz que o elemento Embed, que aceita seu próprio código, incluindo tags script, exige o Pro Standard, listado a US$ 19 por ano em outubro de 2026. O Pro Lite (US$ 9 por ano) adiciona upload de vídeos, mas não embeds, então um player Rive ou Lottie exige o Standard, enquanto um MP4 H.264 funciona no Pro Lite e superiores.
Por que o Rive diz que window is not defined no Next.js?
Porque um código exclusivo do navegador rodou durante o pré-render no servidor. Os Client Components do App Router continuam sendo pré-renderizados em HTML, então ler window ou matchMedia durante o render, ou criar uma instância do Rive no escopo do módulo, gera falha. Mova esse trabalho para useEffect, mantenha useRive em um componente "use client" e use next/dynamic com ssr: false dentro de um Client Component só se alguma dependência exigir.
Leia o guia: Rive no App Router do Next.js: Client Components, SSR e WASM
Qual versão do rive.wasm devo hospedar com o pacote React do Rive?
A versão do pacote de runtime dentro de node_modules, não a do pacote React. O @rive-app/react-webgl2 fixa exatamente a versão do @rive-app/webgl2 (por exemplo, a 4.37.1 fixa a 2.45.1), e o Rive diz que o WASM e o runtime precisam corresponder. Copie node_modules/@rive-app/webgl2/rive.wasm com essa versão no nome e passe a mesma URL para setWasmUrl e para o preload.
Leia o guia: Rive no App Router do Next.js: Client Components, SSR e WASM
O Lovable consegue instalar o runtime do Rive?
Sim. O Lovable instala pacotes npm quando você os cita no chat do projeto, sem passar pelo terminal, então peça para ele instalar @rive-app/react-webgl2 e fixar a versão. Depois, informe o caminho do .riv, o nome da state machine e os nomes das propriedades do view model, e peça um componente de tamanho fixo que seja renderizado só no navegador.
Leia o guia: Como adicionar um mascote Rive a um app no Lovable
Como coloco um arquivo .riv em um projeto Lovable?
A forma mais confiável é a sincronização com o GitHub: faça commit do arquivo como public/mascot.riv, faça push para a branch que o Lovable sincroniza e carregue-o a partir de /mascot.riv. Você também pode hospedar o .riv em uma CDN que envie cabeçalhos CORS e colar a URL no chat. O Lovable não consegue salvar arquivos com mais de 10 MB em um projeto.
Leia o guia: Como adicionar um mascote Rive a um app no Lovable
O v0 e o Bolt conseguem usar um arquivo .riv enviado?
Sim, com passos diferentes. O v0 lista RIV entre os anexos de chat compatíveis, então anexe o arquivo e peça ao v0 para salvá-lo como public/mascot.riv. No Bolt, os anexos do chat não são mantidos, então arraste o arquivo para a pasta Public na visualização Code. Nos dois casos, carregue-o a partir de /mascot.riv com o runtime React do Rive.
Leia o guia: Como adicionar um mascote Rive no Bolt.new, v0 e Replit
Um ícone de página do Notion pode ser animado?
Você pode enviar um GIF animado como ícone de página: a aba Upload do Notion aceita sua própria imagem ou a URL de uma imagem, GIF é um tipo de arquivo compatível e o Notion sugere 280×280 px. O Notion não documenta como a animação se comporta em todos os lugares onde o ícone aparece, então confira a barra lateral, as menções e o celular. No plano Free, os arquivos precisam ter menos de 5 MB.
Leia o guia: Ícones, capas e mascotes animados em páginas do Notion
Posso incorporar uma animação Rive no Notion?
Só como link hospedado. A opção Embed link do Rive foi pensada para plataformas como o Notion, que exibe embeds pelo bloco /embed. Gerar URLs de embed exige um plano Rive Voyager ou Enterprise, cada link é um snapshot do arquivo e os embeds não expõem a API do runtime, então nada no Notion consegue mudar o estado da animação.
Leia o guia: Ícones, capas e mascotes animados em páginas do Notion
Por que o Rive não carrega na minha extensão do Chrome?
Porque o runtime web baixa o rive.wasm do unpkg por padrão, e o Manifest V3 proíbe código hospedado remotamente, incluindo WASM. A CSP padrão das extensões também desativa o WebAssembly. Copie os arquivos WASM para o pacote, chame RuntimeLoader.setWasmUrl(chrome.runtime.getURL("vendor/rive.wasm")) antes de tudo e defina script-src 'self' 'wasm-unsafe-eval'; object-src 'self';.
Leia o guia: Rive em uma extensão do Chrome (Manifest V3): empacote o WASM
Posso personalizar a tela de carregamento de uma Telegram Mini App?
Sim, com limites. No @BotFather (Bot Settings, Configure Mini App), você pode definir um ícone SVG de placeholder e as cores de fundo e de cabeçalho para os temas claro e escuro. O Telegram não documenta nenhuma opção animada. O placeholder desaparece quando seu app chama Telegram.WebApp.ready(), então uma intro animada precisa tocar dentro do app depois disso.
Leia o guia: Mascote em Telegram Mini App: tela de carregamento, temas e vibração
Por que minha animação Rive não aparece no editor do Bubble?
O Bubble executa tags script dentro de um elemento HTML só no modo de execução, nunca no editor, então o canvas fica vazio enquanto você cria. Abra a página no modo de prévia para vê-la. Se ainda estiver em branco, verifique no console do navegador se há uma requisição do .riv com falha, um erro de CORS ou um script que rodou antes de o runtime carregar.
Leia o guia: Como adicionar uma animação Rive ao Bubble sem o plugin antigo
Como disparar uma animação Rive a partir de um workflow do Bubble?
Guarde a instância do Rive em window quando ela carregar em um elemento HTML (com Display as an iFrame desativado) e depois adicione ao workflow a ação Run javascript do plugin Toolbox. Um passo como window.mascot.viewModelInstance.number("mood").value = 5 define um humor, e .trigger("success").trigger() dispara uma reação única.
Leia o guia: Como adicionar uma animação Rive ao Bubble sem o plugin antigo
Já tem um personagem? Veja seu personagem em telas reais de app (grátis, no seu navegador) ou veja os planos.
iOS e Swift
Como definir uma propriedade numérica do Rive com o novo runtime da Apple?
Crie uma instância de view model com file.createViewModelInstance, vincule-a por meio de artboard.createStateMachine(name, binding: instance) e depois chame instance.setValue(of: NumberProperty(path: "mood"), to: Float(2)). O tipo do valor é Float. Mantenha uma referência forte à instância, faça as chamadas a partir do main actor e renderize com RiveUIViewRepresentable(rive:).
Leia o guia: Data Binding do Rive em SwiftUI (novo runtime da Apple)
Como disparar um trigger do Rive em Swift?
No novo runtime da Apple, chame instance.fire(trigger: TriggerProperty(path: "success")) na instância de view model que você vinculou à state machine. Triggers não carregam valor. Para reagir quando o próprio arquivo dispara um trigger, itere instance.stream(of:). No runtime legado, a chamada equivalente é riveViewModel.triggerInput("success").
Leia o guia: Data Binding do Rive em SwiftUI (novo runtime da Apple)
O que é o novo runtime do Rive para Apple?
É uma API pensada primeiro para Swift, lançada no rive-ios 6.24.0, construída sobre Swift Concurrency com um Worker em segundo plano, além dos objetos File, Artboard e Rive. Ela substitui o RiveViewModel em projetos novos. Não tem inputs de state machine, event listeners nem animações lineares; os arquivos são controlados por Data Binding. O runtime legado continua sendo distribuído junto com ela.
Leia o guia: Data Binding do Rive em SwiftUI (novo runtime da Apple)
Como exibir um arquivo Rive no UIKit com o novo runtime?
Adicione uma RiveUIView(rive: nil) ao seu view controller com Auto Layout e depois carregue o arquivo em uma Task: crie um Worker, um File, um artboard e uma state machine vinculada, e atribua riveView.rive = try await Rive(file:artboard:stateMachine:). Pause com isPaused e limite os frames com frameRate = .fps(30).
PhaseAnimator vs KeyframeAnimator: qual usar?
Use PhaseAnimator quando uma animação passa por alguns estados distintos, como repouso, subida e aterrissagem, cada um com sua própria curva. Use KeyframeAnimator quando escala, rotação e deslocamento precisam de trilhas de tempo independentes. Os dois exigem iOS 17, macOS 14, tvOS 17, watchOS 10 ou visionOS 1, e os dois podem rodar em loop ou tocar a partir de um gatilho.
Como fazer loop ou tocar um LottieView uma única vez no SwiftUI?
Encadeie um modificador de reprodução: LottieView(animation: .named("idle")).looping() roda em loop para sempre, e .playing(loopMode: .playOnce) toca uma vez e para no último frame. Para intervalos ou marcadores, use .playbackMode(.playing(.fromProgress(0, toProgress: 1, loopMode: .loop))). Adicione .animationDidFinish para executar código quando uma animação que toca uma vez terminar, e .resizable() para que ela se ajuste ao frame.
Leia o guia: Lottie no SwiftUI: LottieView, reprodução e loop
Live Activities ou a Dynamic Island podem reproduzir uma animação em loop?
Não, pelo menos não uma animação contínua. Desde o iOS 17, widgets e Live Activities animam mudanças de dados com transições e animações do SwiftUI, cada uma limitada a dois segundos, e nada é animado no modo Always-On. Um engenheiro do Apple DTS afirmou que animações contínuas não são suportadas e chamou o truque da fonte de timer de gambiarra sem suporte. Em vez disso, alterne entre poses estáticas.
Leia o guia: Limites de animação em Live Activity, Dynamic Island e widgets
Qual é o limite de tamanho de dados de uma Live Activity?
4 KB. Os dados estáticos e dinâmicos de uma Live Activity, incluindo atualizações do ActivityKit e payloads de push, não podem passar de 4 KB somados. Uma Live Activity pode ficar ativa por até oito horas e depois permanecer na tela bloqueada por até mais quatro, 12 horas no total. Envie valores pequenos, não imagens.
Leia o guia: Limites de animação em Live Activity, Dynamic Island e widgets
Rive ou Lottie funcionam no watchOS?
Oficialmente, nenhum dos dois. O pacote rive-ios declara iOS 14, visionOS 1, tvOS 16, macOS 13.1 e Mac Catalyst 14, e o lottie-spm declara iOS, macOS, tvOS e visionOS, sem watchOS em nenhum deles. No Apple Watch, use PhaseAnimator ou KeyframeAnimator do SwiftUI (watchOS 10+) ou reproduza frames pré-renderizados.
Como detectar mudanças no Reduzir Movimento no UIKit?
Leia UIAccessibility.isReduceMotionEnabled para obter o valor atual e observe UIAccessibility.reduceMotionStatusDidChangeNotification para saber quando o usuário muda a configuração com a sua tela aberta. No handler, pause as views em loop, por exemplo riveView.isPaused = true, e troque por uma pose estática para que a informação de estado não se perca.
Leia o guia: Movimento reduzido (Reduce Motion) no SwiftUI e UIKit
Quais são as especificações de vídeo da App Preview na App Store?
As App Previews duram de 15 a 30 segundos e podem ter no máximo 500 MB. Use .mov, .m4v ou .mp4 com H.264 a 10 a 12 Mbps e até 30 fps, ou ProRes 422 HQ, com áudio AAC estéreo a 44,1 ou 48 kHz. iPhones com Face ID usam 886×1920 na vertical. Envie até três por tamanho de dispositivo e idioma.
Leia o guia: App Preview da App Store: especificações de vídeo (2026)
Uma App Preview pode mostrar animações que não são imagens do app?
Só como sobreposição. A diretriz 2.3.4 diz que as prévias só podem usar gravações de tela do próprio app, embora narração e sobreposições de vídeo ou texto possam explicar o que aparece. A Apple também pede para não filmar mãos nem dispositivos. Um mascote animado funciona bem dentro da interface do app gravada ou como uma sobreposição breve.
Leia o guia: App Preview da App Store: especificações de vídeo (2026)
É possível animar ícones de apps no iPhone?
Não. O iOS não tem API pública para um ícone animado na tela inicial. setAlternateIconName só alterna entre conjuntos de ícones estáticos declarados no seu app, e os reflexos do Liquid Glass nos ícones são aplicados pelo sistema. Só o Relógio e o Calendário da Apple se atualizam ao vivo. Para fazer o seu ícone ganhar movimento, toque uma intro de abertura na primeira tela, depois de uma launch screen (tela de inicialização) estática.
Leia o guia: Dá para animar o ícone do app? O que o iOS e o Android realmente permitem
Como o Relógio e o Calendário têm ícones ao vivo?
Eles são apps nativos da Apple. Ao ser perguntado se um app de terceiros poderia animar o ícone como o Relógio, um engenheiro do DTS da Apple respondeu que o Relógio e o Calendário são apps nativos e podem usar recursos fora do SDK do iOS. Nenhuma API pública oferece o mesmo, e um truque de 2024 para alternar ícones dependia de um método privado que, provavelmente, seria rejeitado pela App Review.
Leia o guia: Dá para animar o ícone do app? O que o iOS e o Android realmente permitem
Avatares de assistentes de IA
Quais são os valores de status do useChat no Vercel AI SDK?
O status do useChat pode ser 'submitted', 'streaming', 'ready' ou 'error'. Submitted significa que a requisição foi enviada, streaming que a resposta está chegando, ready que está ocioso e error que a requisição falhou. Para um avatar, mapeie submitted para thinking, streaming para talking, ready para idle e error para uma reação de erro.
Leia o guia: Anime um avatar de chat a partir de eventos de streaming
Como definir um número de view model do Rive com JavaScript puro?
Carregue o arquivo com autoBind: true e depois escreva rive.viewModelInstance.number("mood").value = 3. Dispare uma propriedade trigger com rive.viewModelInstance.trigger("success").trigger(). Ambos retornam null se o nome da propriedade não existir, então proteja essas chamadas. Isso funciona a partir de qualquer event listener, como uma mudança de status do chat ou um evento da Realtime API.
Leia o guia: Anime um avatar de chat a partir de eventos de streaming
Qual evento do OpenAI Realtime indica que o usuário começou a falar?
input_audio_buffer.speech_started, enviado no modo server VAD quando o servidor detecta fala no buffer de entrada. A OpenAI sugere usá-lo para interromper a reprodução ou dar feedback visual, então ele é o trigger natural para um estado listening. input_audio_buffer.speech_stopped vem em seguida quando o usuário para de falar, um bom momento para mudar para thinking.
Leia o guia: Avatar de agente de voz: mapeamento de eventos do OpenAI Realtime
Como saber quando uma voz do OpenAI Realtime termina de falar?
Via WebRTC ou SIP, escute output_audio_buffer.stopped, que dispara quando o buffer de saída do servidor esvazia por completo depois de response.done. Via WebSocket não existe evento de buffer de saída, então acompanhe quando a sua própria fila de reprodução termina. Relatos da comunidade dizem que o evento stopped pode chegar atrasado, ou só depois que uma tool call pendente for respondida.
Leia o guia: Avatar de agente de voz: mapeamento de eventos do OpenAI Realtime
Qual é o nome atual do evento de delta de áudio do Realtime?
A referência atual da OpenAI Realtime chama esse evento de response.output_audio.delta. Ele traz áudio codificado em Base64 e é seguido por response.output_audio.done. Tutoriais da fase beta usavam response.audio.delta, então atualize listeners copiados de exemplos antigos. Via WebSocket, o primeiro delta de uma resposta é um bom sinal para mudar o avatar para talking.
Leia o guia: Avatar de agente de voz: mapeamento de eventos do OpenAI Realtime
A amplitude basta para animar um avatar falante?
Para mascotes 2D estilizados, geralmente sim. Meça a voz com um AnalyserNode, calcule o RMS a partir de getByteTimeDomainData() e toque um loop talking enquanto o nível ficar acima de um limiar, com histerese para evitar oscilação. Lip-sync de verdade exige o timing de visemas do provedor de TTS, além de um formato de boca desenhado para cada visema.
Quantos visemas o Azure Speech oferece?
O Azure Speech oferece 22 IDs de visema, de 0 para silêncio até 21 para p, b e m. O Speech SDK os entrega pelo evento VisemeReceived, com o offset do áudio em ticks de 100 nanossegundos, então divida por 10.000 para obter milissegundos. O Azure também pode retornar frames de blend shapes com 55 valores a 60 fps e animações de visemas 2D em SVG, disponíveis apenas para vozes en-US.
Como funcionam as speech marks de visemas do Amazon Polly?
Quando você solicita speech marks, o Polly retorna metadados em vez de áudio: um stream JSON delimitado por linha em que cada objeto tem um time em milissegundos desde o início do áudio, um type (sentence, word, viseme ou ssml) e um value, que, no caso dos visemas, é o nome do visema. Busque o áudio separadamente e agende tudo com base no relógio de reprodução dele.
Como detectar se o agente está falando ou ouvindo com o SDK React da ElevenLabs?
O hook useConversation expõe mode, que pode ser 'speaking' ou 'listening', além dos booleanos isSpeaking e isListening e de um callback onModeChange. O status da conexão passa por disconnected, connecting e connected. Para visuais que reagem ao áudio, há getInputVolume() e getOutputByteFrequencyData(), e hooks granulares reduzem re-renders.
Quais estados o componente Persona do AI Elements suporta?
O Persona suporta cinco estados: idle, listening, thinking, speaking e asleep. Ele renderiza com Rive em WebGL2 e vem em seis variantes: Obsidian (o padrão), Mana, Opal, Halo, Glint e Command. As props documentadas são state, variant, className e callbacks de ciclo de vida. A documentação não explica como carregar o seu próprio .riv, então um personagem da sua marca precisa de um componente próprio.
Um avatar Rive deve continuar renderizando quando está fora da tela?
Não. As boas práticas do Rive recomendam chamar a API de pausa quando um gráfico sai da tela pela rolagem e não precisa continuar tocando. Detecte a visibilidade com um IntersectionObserver, trate abas em segundo plano com a Page Visibility API e chame rive.pause() ou rive.play() sempre que um dos dois mudar. Pausar também economiza CPU e bateria enquanto ninguém está vendo o loop idle.
Leia o guia: Animação de avatar de IA acessível e rápida na web
Por que meu avatar Rive reinicia a cada mensagem do chat?
Porque o React está remontando o canvas. O Rive avisa que desmontar ou recriar o canvas pode reiniciar a animação ou fazê-la sumir. Mantenha useRive e RiveComponent em um único componente, renderize-o uma vez fora da lista de mensagens, evite uma key ligada ao id da mensagem e mude o estado pelo view model em vez de trocar componentes.
Leia o guia: Anime um avatar de chat a partir de eventos de streaming
Já tem um personagem? Veja seu personagem em telas reais de app (grátis, no seu navegador) ou veja os planos.
Figurinhas e emoji
Quais são os requisitos das figurinhas de vídeo do Telegram?
As figurinhas de vídeo do Telegram precisam ser arquivos .WEBM codificados em VP9, com um lado de exatamente 512 px e o outro de 512 px ou menos. Elas podem durar no máximo 3 segundos, rodar a até 30 fps, pesar no máximo 256 KB, não ter faixa de áudio e devem ficar em loop. Emojis de vídeo seguem as mesmas regras, com exatamente 100×100 px.
Leia o guia: Figurinhas de vídeo do Telegram a partir de uma animação de personagem
Qual é o tamanho de um emoji personalizado do Telegram?
Um emoji personalizado em vídeo do Telegram precisa ter exatamente 100×100 pixels. Fora isso, ele segue as regras das figurinhas de vídeo: WEBM com VP9, no máximo 3 segundos, até 30 fps, 256 KB no máximo e sem áudio. Passe sticker_type "custom_emoji" para o método createNewStickerSet da Bot API para criar um conjunto de emojis em vez de um conjunto normal de figurinhas.
Leia o guia: Figurinhas de vídeo do Telegram a partir de uma animação de personagem
Quais são os limites das figurinhas animadas .TGS?
As figurinhas animadas .TGS são um subconjunto do Lottie exportado com o plugin Bodymovin-TG do Telegram para After Effects. O canvas precisa ter 512×512, os objetos não podem sair dele, e as animações precisam ficar em loop, rodar a 60 fps, durar no máximo 3 segundos e ficar dentro de 64 KB após a compactação gzip. Expressions, máscaras, imagens, textos e camadas 3D estão entre os recursos proibidos.
Leia o guia: Figurinhas de vídeo do Telegram a partir de uma animação de personagem
Qual deve ser o tamanho das figurinhas animadas do WhatsApp?
As figurinhas animadas do WhatsApp precisam ter exatamente 512×512 pixels e no máximo 500 KB, em formato WebP. Cada frame deve durar pelo menos 8 ms, e a animação inteira, no máximo 10 segundos. Um pacote precisa de 3 a 30 figurinhas, não pode misturar figurinhas estáticas e animadas e precisa de um ícone de bandeja estático de 96×96 com 50 KB ou menos.
Leia o guia: Figurinhas animadas do WhatsApp: especificações e conversão
Por que minha figurinha do WhatsApp congela no primeiro frame?
Isso é intencional: o WhatsApp encerra a animação no primeiro frame depois do loop. O README oficial de figurinhas diz que "o primeiro frame deve dizer tudo". Comece cada clipe em uma pose completa e legível, como a expressão neutra de idle do personagem, e não em um frame de transição, uma piscada de olhos fechados ou um frame vazio.
Leia o guia: Figurinhas animadas do WhatsApp: especificações e conversão
Qual é o tamanho dos stickers do iMessage?
A Apple especifica os tamanhos de stickers do iMessage em pixels @3x: pequeno é 300×300, normal é 408×408 e grande é 618×618. Use um único tamanho para o pacote inteiro, porque a Apple pede para não misturar tamanhos, e mantenha cada arquivo com 500 KB ou menos. Para animação, o APNG mantém transparência de 8 bits, enquanto o GIF só suporta transparência de uma única cor.
Leia o guia: Pacote de stickers animados para iMessage: tamanhos e APNG
Qual o limite de tamanho do arquivo para emoji animado no Discord?
O Discord limita emojis e emojis animados a 256 KiB cada, enviados como JPEG, PNG, GIF, WebP ou AVIF, segundo a documentação da API. A documentação não define um tamanho em pixels; 128×128 é a recomendação mais citada. Stickers têm limites próprios: PNG, APNG, GIF ou Lottie, 320×320 px, no máximo 5 segundos quando animados e 512 KiB.
Leia o guia: Especificações de emoji e stickers animados do Discord
Qualquer servidor do Discord pode enviar stickers Lottie?
Não. Só servidores com o recurso de guild VERIFIED ou PARTNERED podem enviar stickers Lottie, segundo a documentação para desenvolvedores do Discord. Outros servidores podem enviar stickers animados em APNG ou GIF. Esses arquivos precisam ter 320×320 px, durar no máximo 5 segundos e ter no máximo 512 KiB, os mesmos limites que valem para todo sticker enviado.
Leia o guia: Especificações de emoji e stickers animados do Discord
Quais são os requisitos do Slack para emoji personalizado?
O Slack aceita emojis personalizados em arquivos JPG, PNG ou GIF. A central de ajuda diz que imagens quadradas com menos de 128 KB e fundo transparente funcionam melhor, e que GIFs podem ter até 50 frames. O Slack não informa um tamanho obrigatório em pixels; 128×128 é uma convenção comum que também ajuda GIFs animados a ficarem abaixo de 128 KB.
Leia o guia: Emoji personalizado animado no Slack a partir do seu mascote
Por que o ffmpeg perde a transparência do meu WebM?
O decodificador VP9 nativo do ffmpeg ignora o canal alfa armazenado em um WebM. Para manter a transparência, coloque -c:v libvpx-vp9 antes de -i para que o libvpx decodifique o arquivo, e codifique saídas com alfa usando -pix_fmt yuva420p. O ffprobe muitas vezes informa yuv420p mesmo quando há alfa, então procure a tag ALPHA_MODE=1.
Leia o guia: Converta WebM com fundo transparente para todos os formatos de figurinha
Como converter um WebM com fundo transparente em WebP animado para o WhatsApp?
Use o encoder libwebp_anim do ffmpeg: decodifique a entrada com -c:v libvpx-vp9 antes de -i, redimensione e complete para 512×512 com uma cor de preenchimento transparente e depois codifique com -c:v libwebp_anim -quality 60 -loop 0. A opção -loop 0 é importante, porque o muxer WebP do ffmpeg toca só uma vez por padrão. Se passar de 500 KB, reduza a qualidade ou o fps.
Leia o guia: Converta WebM com fundo transparente para todos os formatos de figurinha
Como fazer um GIF com fundo transparente no ffmpeg sem halos?
Gere uma paleta e aplique-a em um único filter graph: divida o stream, rode palettegen=reserve_transparent=1 em um ramo e depois paletteuse=alpha_threshold=128. Partir de um alfa real evita halos de matte embutidos. O GIF só suporta transparência liga/desliga, então as bordas suaves passam por um limiar; use APNG ou WebP quando a plataforma permitir.
Leia o guia: Converta WebM com fundo transparente para todos os formatos de figurinha
Como adicionar um mascote animado ao OBS?
Adicione uma Fonte de mídia (Media Source), escolha um WebM VP9 com fundo transparente como arquivo local e ative Loop para um companheiro em idle. O OBS lê a tag alpha_mode do WebM e o decodifica com libvpx, então o fundo continua transparente. Para um mascote que muda de estado com eventos, carregue uma página web com um arquivo Rive em uma Fonte de navegador (Browser Source).
Leia o guia: Adicione um mascote animado como overlay no OBS
Qual é o tamanho dos emotes animados da Twitch?
Os emotes animados da Twitch são GIFs quadrados. No modo de redimensionamento automático, você envia um GIF de 112×112 a 4096×4096 px, de até 1 MB. No modo manual, você envia três GIFs de 28×28, 56×56 e 112×112 px, de até 512 KB cada. Cada GIF é limitado a 60 frames e não pode piscar mais de 3 vezes por segundo.
Leia o guia: Emotes animados da Twitch a partir de uma animação de mascote
Já tem um personagem? Veja seu personagem em telas reais de app (grátis, no seu navegador) ou veja os planos.
Mais frameworks e ferramentas no-code
Existe um pacote oficial do Rive para Vue?
Não. O Rive não oferece um runtime para Vue, então apps Vue 3 e Nuxt usam diretamente o runtime web @rive-app/canvas: crie a instância em onMounted com autoBind: true, defina as propriedades do view model a partir de um watcher e chame cleanup() em onUnmounted. No Nuxt, renderize o componente apenas no cliente, porque o canvas e o WASM precisam de um navegador.
Leia o guia: Rive no Vue 3 e Nuxt: configuração, Data Binding e SSR
Como usar Rive no SvelteKit?
Instale @rive-app/canvas e crie a instância do Rive dentro de onMount, que nunca é executado durante a renderização no servidor. Assim, o SSR pode continuar ativado. Mantenha o callback síncrono e retorne uma função que chame cleanup(). Coloque o .riv em static/ e carregue-o pelo caminho raiz. O Svelte não tem runtime oficial do Rive.
O ng-rive ainda é mantido?
Não pelo Rive, então considere-o legado. A documentação antiga do Rive para Angular sobre o ng-rive foi marcada como desatualizada, e a documentação atual do Rive lista, em vez dele, o wrapper comunitário Grandgular, que exige Angular 18 ou posterior e tem poucos usuários. Nenhum dos dois é mantido pelo Rive, por isso muitas equipes chamam @rive-app/canvas diretamente em um componente e fazem a limpeza em ngOnDestroy.
Leia o guia: Rive no Angular: wrapper da comunidade vs canvas puro
O Rive funciona no Expo Go?
Não. O pacote React Native do Rive contém código nativo personalizado, então o Expo Go não consegue carregá-lo. Instale expo-dev-client e @rive-app/react-native e depois gere um development build localmente ou com o EAS. O guia de Expo do Rive exige SDK 53 ou posterior e iOS 15.1 ou posterior, e alguns builds Android com SDK 53 precisam de compileSdkVersion 36.
Leia o guia: Rive no Expo: exige development build (não o Expo Go)
Por que meu build Android no Expo SDK 53 falha depois de adicionar o Rive?
O SDK Android do Rive exige compileSdkVersion 36 e Android Gradle Plugin 8.9.1 ou posterior, enquanto o Expo SDK 53 usa versões mais baixas por padrão. Aumente essas versões com os config plugins expo-build-properties e expo-custom-agp no app.json, depois execute npx expo prebuild --clean e gere o development build novamente.
Leia o guia: Rive no Expo: exige development build (não o Expo Go)
O FlutterFlow é compatível com animações Rive?
Sim, para reprodução. O widget RiveAnimation nativo do FlutterFlow carrega um .riv de um asset ou de uma URL, com seletores de artboard e de animação e uma action Rive Animation. A documentação não cobre inputs de state machine nem Data Binding, então trocar o humor ou disparar triggers exige um widget personalizado feito com o pacote Flutter rive.
Leia o guia: Rive e Lottie no FlutterFlow: widgets e limites
Como adicionar Rive a um site Wix?
O Wix Studio tem um elemento Rive nativo: envie o .riv para o Media Manager e escolha o artboard e a state machine. Quando eventos da página precisarem mudar a animação, use o elemento HTML iFrame com o script @rive-app/canvas e um .riv servido por HTTPS. Para Lottie, o elemento Lottie nativo do Wix Studio aceita URLs de JSON do LottieFiles. Em páginas simples, um MP4 ou WebM exportado sem áudio funciona sem nenhum código.
Existe um plugin Rive para o Bubble?
Existe um, mas é antigo. O Rive anunciou um plugin para Bubble em agosto de 2021 e, em 2023, usuários do fórum já perguntavam se ele ainda era mantido. Um caminho mais confiável é o elemento HTML do Bubble rodando o script @rive-app/canvas. Para Lottie, o LottieFiles publica um plugin oficial para Bubble que recebe uma URL de JSON.
Como usar o Rive no Astro?
Você não precisa de um framework de UI: adicione um canvas e um <script> que importe @rive-app/canvas no arquivo .astro. Se você já tem um componente de mascote em React, Vue ou Svelte, renderize-o como uma ilha com client:visible, que faz a hidratação quando ele entra na viewport e mantém o WASM do Rive fora do caminho crítico.
Leia o guia: Rive no Astro: islands, client:visible e WASM sob demanda
O Rive é compatível com Compose Multiplatform?
Só por meio de um wrapper da comunidade. A documentação do Rive lista o RiveCMP, que encapsula rive-android, rive-ios e @rive-app/canvas em uma única API Compose, mas o Rive não é dono dele nem o mantém, e o README o descreve como experimental. No iOS, ele não consegue renderizar fundos transparentes, então teste em dispositivos reais antes de publicar.
Leia o guia: Rive no Compose Multiplatform e Ionic/Capacitor
O Rive funciona offline em apps Ionic ou Capacitor?
Pode. Apps Capacitor executam código web, então @rive-app/canvas funciona, mas por padrão o runtime baixa o rive.wasm de uma CDN. Para abrir o app offline, inclua o rive.wasm nos seus assets e chame RuntimeLoader.setWasmUrl() antes de criar qualquer instância. A versão do wasm precisa corresponder à versão do pacote @rive-app instalado.
Leia o guia: Rive no Compose Multiplatform e Ionic/Capacitor
Como usar Lottie no Vue 3 ou no Svelte?
Use os componentes dotLottie do LottieFiles: @lottiefiles/dotlottie-vue oferece DotLottieVue para Vue 3, e @lottiefiles/dotlottie-svelte oferece DotLottieSvelte. Ambos reproduzem arquivos .lottie e .json. Nenhum deles tem Data Binding com view model no estilo do Rive, então trocar o humor de um personagem significa trocar arquivos ou segmentos por conta própria. Instale qualquer um com npm.
Leia o guia: Rive no Vue 3 e Nuxt: configuração, Data Binding e SSR
Comparativos
O Rive é mais rápido que o Lottie?
Às vezes, mas há poucas evidências independentes. O único comparativo neutro que encontramos é o teste da Callstack de 2023 com React Native em um Xperia Z3 antigo: cerca de 60 FPS para o Rive contra 17 para o Lottie, com o Rive usando mais memória. A documentação do Rive acrescenta que o profiling no iOS engana se você não incluir o processo backboardd da Apple.
Leia o guia: Rive vs Lottie: performance e tamanho do runtime
Os arquivos Rive são menores que os arquivos Lottie?
Muitas vezes, mas os números grandes são alegações do fabricante. O Rive diz que arquivos .riv costumam ser de 10 a 15 vezes menores que o JSON Lottie equivalente, citando um Lottie de 240 KB refeito com 16 KB. De forma independente, a Callstack recriou um Lottie de 24,37 KB como um .riv de 2 KB. Arquivos .lottie comprimidos reduzem a diferença, então compare os arquivos junto com os runtimes.
Leia o guia: Rive vs Lottie: performance e tamanho do runtime
Qual é o tamanho do runtime do Rive?
O Rive informa que seus pacotes web têm 222 KB (canvas-lite), 567 KB (canvas) e 648 KB (webgl2) com compressão brotli. Nós medimos o canvas-lite 2.44.0 em cerca de 373 KB. Em apps nativos, ele adiciona cerca de 1,67 MB ao tamanho de download no iOS e 2,40 MB no Android arm64. Para comparação, o build completo do lottie-web tem cerca de 76 KB com gzip.
Leia o guia: Rive vs Lottie: performance e tamanho do runtime
O Rive importa arquivos Lottie?
Sim, o editor do Rive consegue importar JSON Lottie, mas trate o resultado como ponto de partida. O Rive diz que arquivos importados não são otimizados automaticamente, e modos de mesclagem como Plus, Add e Hard Mix não são suportados. A documentação indica o recurso nos planos Enterprise, enquanto a página de preços mostra os planos pagos, então confirme antes de comprar.
Leia o guia: Converta Lottie para Rive (e Rive para Lottie ou vídeo)
Posso converter um arquivo Rive para Lottie?
Em parte. O LottieFiles oferece um conversor online grátis de Rive para Lottie para arquivos .riv de até 20 MB, mas ele não converte state machines, então você mantém apenas a animação da timeline. O próprio Rive não exporta Lottie: o editor exporta arquivos .riv e, nos planos pagos, formatos de vídeo e imagem.
Leia o guia: Converta Lottie para Rive (e Rive para Lottie ou vídeo)
O plano gratuito do Rive exporta vídeo?
Não. A documentação de exportação do Rive diz que as exportações de vídeo e imagem, incluindo H.264, GIF, WebM e sequências PNG, estão disponíveis apenas nos planos pagos, e as exportações .riv do plano gratuito exibem uma splash screen do Rive. Em outubro de 2026, o plano pago mais barato é o Cadet, a US$ 9 por assento por mês. Os preços podem mudar.
Leia o guia: Editor do Rive vs Lottie Creator vs After Effects: custo
Quanto custa o Lottie Creator?
O Lottie Creator está incluído nos planos pagos do LottieFiles. Em outubro de 2026, a página de preços lista o Individual a US$ 19,99 por mês e o Team a US$ 24,99 por mês, ambos com cobrança anual, e o Team+ e o Enterprise com preço sob consulta. Confira a página para ver os limites atuais do plano gratuito, que não conseguimos verificar.
Leia o guia: Editor do Rive vs Lottie Creator vs After Effects: custo
O que é um arquivo .lottie?
Um arquivo .lottie (dotLottie) é um arquivo ZIP, comprimido com Deflate, que reúne uma ou mais animações Lottie em JSON com suas imagens, temas e state machines. Dentro dele há um manifest.json e pastas para animações, imagens, state machines e temas. Seu tipo MIME é application/zip+dotlottie.
Leia o guia: dotLottie vs Lottie JSON: o que o .lottie acrescenta
O dotLottie é menor que o Lottie JSON?
Geralmente sim, porque é compactado. O LottieFiles afirma que arquivos .lottie são cerca de 80% menores que o JSON, e sua página de preços diz que formatos otimizados reduzem o tamanho em até 80%. As duas afirmações são do próprio fabricante. A economia real depende da animação e de o seu servidor já comprimir o JSON na transferência.
Leia o guia: dotLottie vs Lottie JSON: o que o .lottie acrescenta
O Lottie tem state machines?
Sim, por meio do dotLottie. O Lottie Creator adicionou state machines visuais em setembro de 2025. A especificação suporta inputs numéricos, de texto, booleanos e de evento, interações de ponteiro e de conclusão, guards, transições com interpolação e ações como SetTheme e OpenUrl. Elas rodam em players dotLottie, não em players clássicos só de JSON, como o lottie-web.
O Lottie é menor que um GIF?
Para animações vetoriais planas, geralmente por uma boa margem: o LottieFiles cita o The Washington Post, que transformou um GIF de 2 MB em um JSON Lottie de 385 KB, um exemplo publicado pelo próprio fabricante. GIFs também têm transparência de apenas 1 bit e 256 cores. Mas um Lottie precisa de uma biblioteca de player, enquanto um GIF toca em qualquer lugar que exiba uma imagem.
Leia o guia: Lottie vs GIF: tamanho, qualidade e onde cada um funciona
Dá para usar animações Lottie em e-mail?
Não de forma confiável. Um arquivo Lottie precisa de um player JavaScript ou nativo para ser renderizado, e clientes de e-mail não executam scripts nas mensagens. Para e-mail, use um GIF animado, mantenha-o curto e faça o primeiro frame transmitir a mensagem, porque alguns clientes mostram apenas esse frame.
Leia o guia: Lottie vs GIF: tamanho, qualidade e onde cada um funciona
Devo usar Lottie ou animação CSS?
Use CSS para movimentos de interface, como hover, fades e spinners: não adiciona nenhum download, e o web.dev recomenda animar transform e opacity para uma reprodução suave. Use Lottie quando um designer tiver criado uma ilustração complexa no After Effects ou no Lottie Creator que seria inviável recriar com keyframes CSS.
Leia o guia: Lottie vs SVG e animação CSS: quando cada um vence
O lottie-react-native exige a New Architecture?
Sim. O README atual do lottie-react-native diz que o pacote exige React Native 0.84 ou mais recente e a New Architecture. Ele suporta arquivos .lottie após uma alteração na configuração do Metro e, na web, usa @lottiefiles/dotlottie-react. O runtime Nitro do Rive, em comparação, exige React Native 0.78 ou posterior.
Leia o guia: Lottie vs Rive no React Native e no Flutter (2026)
O pacote lottie para Flutter é oficial?
Não. O popular pacote lottie no pub.dev é uma versão em Dart puro do lottie-android, publicada por xaha.dev. O LottieFiles mantém um plugin separado, dotlottie_flutter, com state machines e temas. O pacote Flutter oficial do Rive é o rive, do publisher verificado rive.app, agora construído sobre o rive_native.
Leia o guia: Lottie vs Rive no React Native e no Flutter (2026)
O Framer Motion é uma alternativa ao Rive?
Na verdade, não: elas fazem trabalhos diferentes. O Motion, antigo Framer Motion e independente desde novembro de 2024, anima o DOM e os componentes React via código. O Rive reproduz assets vetoriais criados por designers, com state machines dentro do próprio arquivo. Muitos sites usam o Motion para layout e transições e o Rive para um mascote ou personagem.
Leia o guia: Rive vs Motion (Framer Motion): funções diferentes
Devo usar Rive ou Spline?
Use o Rive para personagens e UI vetoriais 2D interativos e o Spline para cenas 3D em tempo real. O Spline exporta código para Vanilla JS, Three.js, React, Next.js e react-three-fiber, com animações e eventos apenas em Vanilla JS e React, e o FAQ dele lista exportações nativas e de vídeo. O Rive entrega arquivos .riv compactos.
O Lottie no iOS ainda usa muita CPU?
Menos do que antes. Desde o lottie-ios 4.0, o mecanismo de renderização Core Animation é o padrão para animações compatíveis, então a reprodução não faz mais trabalho a cada frame na main thread. Animações com recursos não compatíveis voltam para o mecanismo antigo, que roda na main thread e que, segundo a InfoQ, podia usar de 5% a 20% de CPU ou mais.
Leia o guia: Rive vs Lottie: performance e tamanho do runtime
O Charmotion exporta Lottie ou AnimatedVectorDrawable?
Não. O Charmotion exporta arquivos .riv do Rive com state machines, MP4 em 1080×1080, um vídeo de abertura 9:16, GIF, WebM com fundo transparente (VP9 com alfa) e MOV (HEVC com alfa), além de código para web, React e SwiftUI. Ele não exporta Lottie JSON, dotLottie nem XML de AnimatedVectorDrawable do Android, então um ícone animado para a splash screen do sistema Android precisa ser desenhado à parte.
Leia o guia: Lottie vs Rive vs vídeo para animação de splash screenVeja no seu app
Quanto um arquivo Rive é menor que GIFs das mesmas animações?
Na nossa medição de outubro de 2026, as 17 animações de um mascote plano tinham 40 KB em um único .riv e 8,0 MB como GIFs de 480 px, cerca de 200 vezes menos. Para um logo 3D com arte incorporada, o .riv tinha cerca de 1,0 MB contra 42,9 MB de GIFs. O runtime web do Rive adiciona cerca de 373 KB, uma única vez por site.
GIF é um bom formato para um logo animado 3D ou com gradiente?
Geralmente não. O GIF é limitado a 256 cores por frame, então degradês e sombreamento sofrem dithering e os arquivos crescem rápido. No nosso teste, o loop de 4 segundos de um logo 3D tinha 4,4 MB como GIF de 480 px e 558 KB como MP4 de 1080 px. Use MP4, WebM com fundo transparente ou MOV HEVC, ou um .riv, a menos que o destino só aceite imagens.
Mascotes por setor
Meu app deve ter um mascote?
Só se o personagem tiver uma função real, como guiar o onboarding, sinalizar progresso ou suavizar erros. Pesquisas de publicidade atribuem resultados melhores a personagens de marca recorrentes, mas elas vêm principalmente de fornecedores como a System1 e tratam de anúncios, não de apps. Comece com alguns momentos-chave e faça testes A/B de retenção antes de expandir.
Leia o guia: Seu app deve ter um mascote? Evidências e testes
Mascotes de marca aumentam o engajamento?
As evidências são indicativas e, em grande parte, autodeclaradas. A System1, fornecedora de testes de anúncios, afirma que campanhas com personagens recorrentes tiveram 73% mais chance de relatar um grande aumento de lucro. Dentro de apps, o Duolingo relatou que uma nova animação de ofensiva (streak) aumentou em 1,7% a retenção no 7º dia de novos alunos. Nenhum dos dois dados prevê o que um mascote fará pelo seu app, então teste.
Leia o guia: Seu app deve ter um mascote? Evidências e testes
Um mascote prejudica a confiança em um app de banco?
Não necessariamente, mas o tom precisa ser contido. Em testes do NN/g, um banco com linguagem conversacional foi avaliado como um pouco mais confiável que um formal, enquanto um site de seguros bem-humorado perdeu credibilidade. Mantenha o mascote simpático no onboarding e nos momentos de sucesso, e neutro ou ausente em pagamentos recusados, alertas de fraude e avisos legais.
Leia o guia: Mascotes para apps de fintech e cripto: estados que priorizam a confiança
O Duolingo usa Rive nos seus personagens?
Sim. O blog do Duolingo descreve o uso de state machines do Rive para fazer a sincronização labial dos seus dez World Characters, com mais de 20 formatos de boca, em mais de 40 idiomas e mais de 100 cursos. O próprio blog do Rive conta que a Lily, no Video Call do Duolingo, combina 8 animações de cabeça e 8 de corpo em mais de 64 variações de idle, em um arquivo com menos de 1 MB.
Leia o guia: Mascotes para apps infantis e de educação: lições do Duolingo
Como o mascote de um app infantil deve reagir a respostas erradas?
De forma breve e sem constranger. Reproduza a rápida reação única "no", volte para um idle neutro e nunca deixe uma cara triste em loop em erros repetidos. Comemore os acertos mais do que você reage aos erros. O UK Children's Code também alerta contra nudges que exploram a necessidade de aprovação das crianças, especialmente em escolhas sobre dados e privacidade.
Leia o guia: Mascotes para apps infantis e de educação: lições do Duolingo
Quais mudanças da COPPA afetam apps infantis em 2026?
A versão alterada da COPPA Rule da FTC entrou em vigor em 23 de junho de 2025, e a maioria das obrigações precisava ser cumprida até 22 de abril de 2026. As mudanças incluem consentimento parental separado para divulgar dados de crianças a terceiros, identificadores biométricos incluídos como informação pessoal e a exigência de uma política de retenção de dados. Um mascote que coleta voz ou fotos precisa passar por revisão de privacidade.
Leia o guia: Mascotes para apps infantis e de educação: lições do Duolingo
Um chatbot de saúde deve ter um avatar?
Pode ajudar, se o avatar se mantiver calmo. Um experimento de 2025 com 160 participantes descobriu que avatares de chatbot mais parecidos com humanos aumentaram a empatia percebida, o que melhorou a confiança e a experiência do usuário. Usuários entrevistados também consideram o humor indesejado em contextos sérios. Use os estados listening, thinking e talking, e evite movimentos brincalhões em orientações urgentes e más notícias.
Leia o guia: Avatares de chatbot para saúde: empatia sem fofura
Por que tantos apps de VPN usam mascotes fofos?
Personagens fofos fazem uma tecnologia abstrata e um pouco intimidadora parecer acessível. Um ensaio de 2017 da Flow observa que mascotes como o urso da TunnelBear e a toupeira da Mullvad transmitem proximidade e sugerem que o serviço é inofensivo. Combine-os com estados em texto claros, como Protegido ou Não protegido, para que o personagem nunca substitua o rótulo de status.
Leia o guia: Mascotes para apps de VPN e segurança: protegido vs exposto
Como mostrar "desprotegido" em um app de segurança sem assustar o usuário?
Use um estado attention calmo e texto simples em vez de vermelho piscando, tremores ou sons de alarme. Mostre Não protegido ao lado de uma única ação clara, como um botão Conectar, e guarde a reação success para quando a proteção for restabelecida. Movimento com reprodução automática que dure mais de cinco segundos ao lado de outro conteúdo também precisa de um controle de pausa, segundo o critério 2.2.2 da WCAG.
Leia o guia: Mascotes para apps de VPN e segurança: protegido vs exposto
Um mascote de app de fitness deve comemorar todo treino?
Comemore marcos por completo e conclusões de rotina de forma leve. O Duolingo relatou que uma animação de ofensiva melhorou a retenção no 7º dia de novos alunos, e as diretrizes de háptica da Apple alertam contra o excesso de feedback. Um bom padrão é uma pequena reação "yes" a cada série, um trigger success com uma háptica de sucesso no fim do treino e uma comemoração maior só nos marcos de ofensiva.
Leia o guia: Mascotes treinadores para apps fitness: sequências, comemorações e feedback háptico
Um mascote triste numa tela de cancelamento ou de lembrete é um dark pattern?
Pode ser. Fazer os usuários se sentirem culpados para que fiquem ou voltem é um padrão enganoso reconhecido, chamado confirmshaming. Um estado wave ou idle neutro quando alguém cancela a inscrição ou desativa lembretes não tem problema. Um mascote chorando junto de um texto como "Você está me abandonando" é manipulador e corrói a confiança, especialmente em apps infantis e de fitness.
Leia o guia: Mascotes para apps infantis e de educação: lições do Duolingo
Quão divertido um mascote deve ser em cada setor?
Ajuste o tom brincalhão ao que os usuários podem perder em cada tela. Apps infantis, de educação e de fitness podem ser bem brincalhões; apps de segurança, moderadamente; apps de finanças e saúde devem se manter contidos. O NN/g descobriu que o humor prejudicou a credibilidade de uma seguradora. Em qualquer setor, deixe movimentos brincalhões fora de más notícias, alertas, avisos legais e telas de consentimento.
Leia o guia: Tom do mascote por setor: uma matriz de estados
O que o mascote de um app de hábitos deve fazer quando eu perco um dia?
Mantenha o tom amigável e ofereça um pequeno recomeço, não uma cara triste. Silverman e Barasch descobriram que sequências interrompidas costumam reduzir o engajamento posterior, e os pesquisadores dizem que mensagens que insistem no deslize normalmente não funcionam. Mostre um estado idle ou wave, informe a sequência de forma direta e sugira uma meta nova e mais curta.
Leia o guia: Mascotes pet para apps de hábitos: sequências sem culpa
Um app de saúde mental deve usar um mascote?
Pode, desde que o mascote fique calmo e não atrapalhe. Use loops lentos de idle, listening, sleeping e happy suave, nunca toque as animações error, no ou sad perto dos sentimentos do usuário, respeite o Reduzir Movimento e remova o personagem das telas de crise, para que a ajuda apareça com um toque e sem movimento decorativo.
Leia o guia: Mascotes para apps de saúde mental: estados calmos e regras para crises
Um produto de IA deve ter um mascote ou um orbe abstrato?
Os dois funcionam: escolha um mascote para ter reconhecimento e status legível, ou um orbe para ter neutralidade. A Fast Company chama a corrida por personagens fofos de agentes de cutewashing, e o NN/g alerta que humanizar a IA aumenta a confiança excessiva. Seja qual for a escolha, descreva em texto simples o que o agente está fazendo e mantenha-o fora das telas de permissão.
Leia o guia: Seu produto de IA deve ter um mascote? Personagem vs orbe
Quando o mascote de um SaaS deve sair de cena para usuários avançados?
Quando uma tela vira rotina. Vincule os estados de onboarding ao checklist de configuração, para que sumam junto com ele. Mantenha o mascote só para momentos raros, como importações concluídas, estados vazios e a página 404, e adicione uma configuração para ocultá-lo. As HIG da Apple desaconselham movimento em interações repetidas com frequência.
Leia o guia: Mascotes para SaaS B2B: onboarding, estados vazios e páginas 404
Como o mascote do checkout deve reagir a um pagamento recusado?
Ele não deve reagir. Oculte o personagem ou deixe-o parado e use um texto calmo para dizer que o pagamento não foi aprovado; mantenha o carrinho e ofereça outro método. A Stripe observa que a maioria das recusas do emissor é genérica e que alguns motivos não devem ser mostrados aos clientes, então evite culpar o usuário e evite animações error ou sad relacionadas a dinheiro.
Leia o guia: Animação de mascote no checkout: pagamentos, pedidos e e-mails
Qual estado do mascote combina com cada status de entrega de comida?
Pedido feito recebe uma reação success, em preparo recebe um loop loading, entregador chegando recebe um loop attention, e entregue recebe outro success. Atrasos pedem um idle calmo com o novo horário previsto, e cancelamentos, um idle calmo ou um breve loop sad ao lado dos detalhes do reembolso. Nas Live Activities, use imagens estáticas pequenas, porque o sistema anima apenas mudanças de conteúdo.
Leia o guia: Mascotes para apps de delivery: do status do pedido aos humores
Qual formato de vídeo funciona em telas de sinalização digital?
Um MP4 H.264 sem áudio na resolução da tela, geralmente 1920×1080 na horizontal ou 1080×1920 na vertical. O Yodeck recodifica os uploads para H.264 até 1080p, e o ScreenCloud converte vídeos para MP4 H.264, mas transforma GIFs em JPGs estáticos. Coloque clipes curtos em loop em um arquivo mais longo e respeite a orientação da tela.
Leia o guia: Logos animados para telas de cafés, academias e lojasVeja no seu app
Posso animar o mascote da minha escola?
Só se a sua instituição for a dona e o setor responsável pela marca aprovar, ou se você tiver permissão por escrito. Escritórios de marcas, como o de Syracuse, proíbem alterar marcas sem aprovação por escrito, e um mascote desenhado por um voluntário pode continuar pertencendo ao artista, a menos que os direitos tenham sido cedidos por escrito. Garanta as duas permissões por escrito e só depois envie.
Leia o guia: Como animar o mascote de uma escola ou ONG: direitos, brasões e telas
Como mostrar um GIF diferente no modo escuro do GitHub?
Envolva dois GIFs em um elemento picture: um source com media="(prefers-color-scheme: dark)" apontando para o GIF de fundo escuro, outro para o claro e um img de fallback com texto alternativo. O GitHub oferece suporte a isso em Markdown desde 2022. Crie cada GIF com o próprio fundo, porque o GIF não suporta transparência parcial suave.
Leia o guia: GIFs de mascote para README de código aberto: tamanho, modo escuro e licenciamento
Já tem um personagem? Veja seu personagem em telas reais de app (grátis, no seu navegador) ou veja os planos.
Formatos de marketing
O thumbnail do Product Hunt pode ser um GIF?
Sim, se tiver menos de 3 MB. O Product Hunt recomenda uma miniatura quadrada de 240×240, e um GIF animado só é reproduzido enquanto alguém passa o mouse sobre o post. O Product Hunt também diz que GIFs com efeito estroboscópico, cortes rápidos ou texto ilegível não são recomendados, então use um loop calmo com um primeiro frame claro.
Leia o guia: Especificações de GIF e galeria para lançar no Product Hunt
Qual é o tamanho das imagens da galeria do Product Hunt?
O Product Hunt recomenda 1270×760 para as imagens da galeria, e a galeria precisa de pelo menos duas imagens para ficar visível. Você pode enviar várias de uma vez. Os vídeos de lançamento precisam ser links do YouTube, colados como URL completa e não encurtada, e o vídeo não pode ser privado.
Leia o guia: Especificações de GIF e galeria para lançar no Product Hunt
GIFs animados funcionam em assinaturas de e-mail do Outlook?
Só em parte. O Outlook para Windows 2007 a 2019 não anima GIFs, e o Outlook com Microsoft 365 no Windows reproduz a animação três vezes e depois mostra um botão de play. Apple Mail, Gmail e Yahoo reproduzem GIFs normalmente. A Litmus recomenda que o primeiro frame funcione como um fallback estático completo.
Leia o guia: Logo animado em assinaturas de e-mail: suporte a GIF
Qual deve ser o tamanho de um GIF de assinatura de e-mail?
Mantenha abaixo de cerca de 200 KB e com aproximadamente 100 a 150 px de largura; não existe um padrão oficial. A Xink, fornecedora de assinaturas de e-mail, recomenda menos de cerca de 200 KB com aproximadamente 10 a 15 frames e informa um limite de 10.000 caracteres para assinaturas do Gmail, então hospede a imagem em uma URL pública em vez de colá-la diretamente. Uma largura de exibição de cerca de 100 a 150 px funciona para a maioria das assinaturas.
Leia o guia: Logo animado em assinaturas de e-mail: suporte a GIF
Qual é o tamanho da marca d'água de vídeo do YouTube?
Pelo menos 150×150 pixels, quadrada e com menos de 1 MB. Você pode exibi-la nos últimos 15 segundos do vídeo, a partir de um horário de início personalizado ou durante o vídeo inteiro. Marcas d'água não aparecem em vídeos definidos como conteúdo para crianças, e a foto de perfil do canal não pode ser um GIF animado.
Leia o guia: Intro para YouTube e logo animado: boas práticas
Qual deve ser a duração de uma intro do YouTube?
Alguns segundos. O YouTube não publica uma duração oficial, mas o blog para criadores diz que os primeiros segundos são decisivos. Ele recomenda abrir com uma pergunta ou entrar direto no conteúdo, dizer aos espectadores o que eles vão ver em cerca de cinco segundos e integrar a marca, em vez de rodar uma longa animação de logo isolada.
Leia o guia: Intro para YouTube e logo animado: boas práticas
Quais são as especificações de vídeo do LinkedIn?
O LinkedIn aceita vídeos de 75 KB a 5 GB e de 3 segundos (2 no celular) a 15 minutos. A resolução pode ir de 256×144 a 4096×2304, a proporção de 1:2,4 a 2,4:1, com 10 a 60 fps e de 192 kbps a 30 Mbps. O LinkedIn avisa que arquivos ProRes podem não ser processados.
Leia o guia: Especificações de vídeo, logo e banner do LinkedIn para animação
Qual é o tamanho do logo de uma página de empresa no LinkedIn?
O LinkedIn recomenda um logo de 400×400, com mínimo de 268×268. Todas as imagens da página precisam ser arquivos PNG ou JPEG de até 3 MB, então o logo e a capa não podem ser animados. Para mostrar um logo ou mascote animado no LinkedIn, compartilhe-o como vídeo MP4 em um post.
Leia o guia: Especificações de vídeo, logo e banner do LinkedIn para animação
Qual é o tamanho do gráfico de recursos do Google Play?
1024×500 pixels, em JPEG ou PNG de 24 bits sem transparência. Essa imagem aparece como capa do seu vídeo de prévia. O Google Play não aceita upload de vídeo: você adiciona uma URL pública ou não listada do YouTube, com anúncios desativados. O ícone da loja é um PNG de 32 bits, 512×512, com até 1024 KB.
Leia o guia: Especificações do gráfico de destaque e do vídeo promocional no Google Play
Quais são as zonas seguras do Instagram Reels?
As especificações de anúncios em Reels da Meta pedem para manter texto, logos e elementos importantes fora dos 14% superiores, dos 35% inferiores e de 6% em cada lateral do quadro 9:16. Em um vídeo de 1080×1920, sobra uma área de aproximadamente 950×979 pixels na parte central superior para tudo o que as pessoas precisam ler.
Leia o guia: Especificações de vídeo 9:16: Reels, TikTok, YouTube Shorts
Qual a duração máxima de um YouTube Short?
Até três minutos, para vídeos quadrados ou verticais enviados a partir de 15 de outubro de 2024. O YouTube bloqueia globalmente qualquer Short com mais de um minuto que tenha uma reivindicação de direitos autorais ativa, então use música original ou devidamente licenciada se o seu Short passar de um minuto.
Leia o guia: Especificações de vídeo 9:16: Reels, TikTok, YouTube Shorts
Quais são as especificações de vídeo para anúncios in-feed do TikTok?
Anúncios in-feed do TikTok que não são Spark aceitam 9:16 com 540×960 ou mais, 16:9 com 960×540 ou mais, ou 1:1 com 640×640 ou mais. Os arquivos podem ser .mp4, .mov, .mpeg, .3gp ou .avi, com até 500 MB, 516 kbps ou mais e até 10 minutos de duração.
Leia o guia: Especificações de vídeo 9:16: Reels, TikTok, YouTube Shorts
Onde um ícone de app animado pode realmente ser exibido?
Dentro do seu app e no seu marketing, mas não na tela inicial nem como ícone da página na loja: uma intro de abertura na primeira tela do app, a splash do Android 12+ como AnimatedVectorDrawable, estados de carregamento e estados vazios dentro do app, a seção hero do seu site em WebM com fundo transparente e MOV HEVC, prévias da App Store capturadas do app, uma prévia do Google Play no YouTube e vídeos 9:16 para redes sociais. Os ícones da página na loja continuam sendo imagens estáticas.
Leia o guia: Onde usar um ícone de app animado: site, press kit e vídeo de lançamento
Já tem um personagem? Veja seu personagem em telas reais de app (grátis, no seu navegador) ou veja os planos.
Rive e state machines
Posso converter um GIF para Rive?
Não em uma animação Rive de verdade. Um GIF é uma pilha de frames de pixels, enquanto um .riv armazena formas, bones e keyframes, e o editor do Rive importa imagens, não GIFs nem vídeos. Você pode colocar frames exportados em uma timeline como sequência de imagens, mas fica pesado. O melhor caminho é fazer o rig de um frame limpo no Rive.
Leia o guia: Converter GIF, vídeo ou PNG para Rive ou Lottie: o que é possível
Posso converter um PNG para Lottie?
Sim, mas a conversão só oferece um ponto de partida estático. O Lottie Creator importa um PNG como camada de imagem, ou o vetoriza, e o conversor da Recraft vetoriza PNGs planos em Lottie JSON pronto para animar. Nenhum dos dois adiciona o movimento. Você ainda precisa criar os keyframes no Lottie Creator ou no After Effects. Fotos e artes pintadas vetorizam mal.
Leia o guia: Converter GIF, vídeo ou PNG para Rive ou Lottie: o que é possível
Como converter um arquivo .riv para MP4?
Abra o projeto original no editor do Rive, adicione um Render Preset no modo Animate, escolha H.264 (ou GIF, WebM ou uma sequência PNG), defina FPS, duração e tamanho e renderize pela Render Queue. Segundo o Rive, a exportação de vídeo e imagem está disponível nos planos pagos. Um .riv sozinho só pode ser gravado com captura de tela.
Leia o guia: Converter GIF, vídeo ou PNG para Rive ou Lottie: o que é possível
O Rive funciona no Unity?
Sim. O runtime oficial do Rive para Unity é compatível com Unity 2021 LTS e posteriores, incluindo Unity 6, em WebGL, Metal, D3D11, D3D12, OpenGL e Vulkan; consoles aparecem como planejados. Instale pela Asset Store ou por uma URL git, exiba os arquivos no uGUI com um Rive Panel e um Rive Widget e controle-os via data binding em C#.
Leia o guia: Mascote Rive na UI do Unity: instalação, uGUI e Data Binding
O Rive tem runtime para Unreal Engine?
Sim. O Rive documenta um runtime para Unreal Engine 5.7.3 ou superior, com state machines e data binding de view model. A lista inclui Windows, macOS, PlayStation 5, Nintendo Switch e Switch 2, Xbox Series X e Steam Deck, com visionOS em fase experimental. O suporte a mobile está planejado, mas ainda não está disponível, e os inputs legados de state machine estão obsoletos.
Leia o guia: Mascote Rive na UI do Unity: instalação, uGUI e Data Binding
Protótipos do Figma reproduzem arquivos Rive?
Não. O Figma não consegue rodar um .riv dentro de um protótipo, e uma resposta no fórum do Figma, repassando o que disse o fundador do Rive, afirma que o código do Figma não permite o acesso necessário. Use como substitutos GIFs animados, que tocam no modo de apresentação, ou preenchimentos de vídeo (MP4 H.264 ou MOV, WebM VP8, em planos pagos), e entregue o .riv real aos desenvolvedores.
Leia o guia: Animação de mascote em protótipos do Figma e handoff para desenvolvedores
O que é o Rive?
O Rive é uma ferramenta de animação interativa com runtimes de código aberto para web, React, iOS, Android, Flutter e React Native. As animações são exportadas como um único arquivo .riv que pode conter uma state machine, então o mesmo arquivo alterna entre idle, success, error e outros estados quando o código do seu app muda os inputs.
O Rive é grátis?
Em parte. Os runtimes do Rive que reproduzem arquivos .riv têm licença MIT e são gratuitos para apps comerciais. O editor do Rive tem um plano gratuito, mas as exportações exibem uma splash screen do Rive; os planos pagos removem essa tela, e a exportação de vídeo pelo editor é um recurso pago. Confira os preços atuais em rive.app/pricing.
Qual é a diferença entre Rive e Lottie?
O Lottie reproduz animações do After Effects exportadas como JSON com o Bodymovin ou empacotadas como .lottie; as animações do Rive são criadas no editor do Rive e exportadas como arquivos .riv binários. Hoje os dois suportam interatividade: o Lottie Creator adicionou state machines dotLottie em 2025, enquanto no Rive a state machine faz parte do próprio formato.
O que é uma state machine do Rive?
Uma state machine do Rive é uma lógica dentro do arquivo .riv que conecta estados de animação por meio de transições. Seu app define valores, seja por inputs ou por propriedades de view model com Data Binding, e a state machine decide qual animação toca e como as animações se mesclam. Assim, um único arquivo pode cobrir idle, talking, success e error.
Leia o guia: State machine do Rive: inputs, triggers e humores
Qual a diferença entre um trigger e um input de número no Rive?
Um input numérico guarda um valor que a state machine lê continuamente, o que é ideal para escolher um humor em loop, como idle ou loading. Um trigger não guarda valor; você chama fire() uma vez para uma reação momentânea, como success, error ou wave. Booleanos são o terceiro tipo de input.
Leia o guia: State machine do Rive: inputs, triggers e humores
Os inputs de state machine do Rive foram descontinuados?
Sim. Hoje o Rive recomenda Data Binding com view models para projetos novos, mas arquivos e inputs existentes continuam funcionando na web, no React, no Android e no Flutter. O editor consegue converter inputs em view models. Nas plataformas da Apple, os inputs funcionam apenas no runtime legado; o novo runtime da Apple suporta somente Data Binding.
Leia o guia: State machine do Rive: inputs, triggers e humores
Qual pacote web do Rive devo usar?
O Rive recomenda @rive-app/webgl2 para a maioria dos projetos web porque ele usa o Rive Renderer. O @rive-app/canvas desenha com Canvas2D, ainda não suporta vector feathering e evita o limite de contextos WebGL do navegador. Os dois expõem a mesma API, então trocar depois exige apenas mudar o import.
Como mudar um estado do Rive no React?
Carregue o arquivo com useRive. Com inputs legados, chame useStateMachineInput(rive, "State Machine 1", "mood") e depois defina .value ou chame .fire(). Com Data Binding, passe autoBind: true e use useViewModelInstanceNumber ou useViewModelInstanceTrigger. O Rive recomenda Data Binding para código novo.
Como definir um input do Rive no SwiftUI?
No runtime legado da Apple, crie um RiveViewModel e chame setInput("mood", value: 3.0) para números ou booleanos e triggerInput("success") para triggers. O novo runtime da Apple não suporta inputs; ele usa Data Binding. Os dois runtimes vêm no mesmo pacote RiveRuntime, compatível com iOS 14 ou posterior.
Qual pacote do Rive devo usar no React Native?
Use o runtime baseado em Nitro, instalado com npm install @rive-app/react-native react-native-nitro-modules. O pacote antigo rive-react-native foi descontinuado. No novo runtime, os métodos de input da state machine geram avisos na v0.5 (a linha 0.5.x atual em outubro de 2026) e devem ser removidos na v0.6, então migre esse código para Data Binding antes de atualizar.
Mascotes no seu produto
Como funcionam as animações de resposta certa e errada no estilo Duolingo?
São reações únicas disparadas pelo código do app. O personagem fica em um humor calmo em loop durante a pergunta; quando a resposta é verificada, o código dispara um trigger como yes ou no, a reação toca uma vez e a state machine volta ao loop. O blog do Duolingo descreve o uso de state machines do Rive para esse tipo de controle.
Leia o guia: Animação de mascote no estilo Duolingo: estados, reações e esforço
Quantas empresas de SaaS B2B têm um mascote?
Pouquíssimas. Um censo de 2026 feito por Louis Grenier contou 105 marcas de tecnologia B2B com mascote recorrente, contra uma base de cerca de 30.000 empresas de software B2B, o que dá menos de meio por cento. Só 68 pertenciam a empresas comerciais; 37 eram projetos open source. O autor considera 105 um mínimo, não uma contagem completa.
Leia o guia: Seu app deve ter um mascote? Evidências e testes
Existe um gerador de mascote com IA gratuito que anima?
Em parte, em novembro de 2026. Pixelcut e Dzine geram mascotes estáticos de graça. O plano gratuito do MascotVibe dá 30 créditos para um mascote e uma animação, mas o download exige upgrade. O plano gratuito do Charmotion inclui dois designs com IA, e a prévia grátis no navegador mostra o seu personagem em telas de app com um clipe curto com marca d'água; os conjuntos completos de 17 animações começam em US$ 20 por mês.
Leia o guia: Ferramentas de IA para animar mascote comparadas (2026)Animador de mascote com IA
Quais estados um mascote de app deve ter?
A maioria dos apps fica bem servida com um loop idle (loop de repouso) e alguns loops de contexto, como loading ou thinking durante esperas, listening e talking para assistentes e sleeping para telas vazias ou inativas. Adicione reações únicas curtas para success, error, yes, no, enter e exit. Mantenha os loops sutis e as reações breves.
Leia o guia: Estados de animação do mascote: carregamento, sucesso, erro
Qual é a diferença entre uma animação em loop e uma reação única?
Uma animação em loop se repete enquanto um estado estiver ativo, como idle, loading ou listening. Uma reação única toca uma vez em resposta a um evento, como success ou error, e depois volta ao loop atual. No Rive, os loops costumam ser escolhidos com um input numérico e as reações únicas, com triggers.
Leia o guia: Estados de animação do mascote: carregamento, sucesso, erro
De quais estados um avatar de assistente de IA precisa?
No mínimo: idle, listening enquanto o usuário fala ou digita, thinking enquanto o modelo processa e talking enquanto ele responde, além de um estado de repouso. O componente Persona do AI SDK Elements da Vercel, feito com Rive, usa idle, listening, thinking, speaking e asleep. Adicione reações de success e error para as ações que o assistente conclui.
Como o Duolingo anima seus personagens?
O Duolingo usa Rive. Um post de engenharia de 2022 explica que a state machine do Rive permitiu ao app escolher estados de animação no código, sincronizando o formato da boca dos personagens com o áudio e reagindo aos alunos em tempo real. A equipe escreveu que a state machine foi o que tornou o projeto viável em escala.
Um mascote animado pode substituir um spinner de carregamento?
Sim, para esperas curtas. Um mascote de carregamento é um indicador em loop, que o Nielsen Norman Group recomenda para esperas de cerca de 2 a 10 segundos. Para 10 segundos ou mais, mostre uma barra de progresso com porcentagem, porque um loop não indica quanto trabalho falta. Abaixo de cerca de um segundo, não mostre nenhum indicador.
O que um conjunto de animações do Charmotion inclui?
Um conjunto do Charmotion tem 17 animações do seu personagem: dez loops escolhidos com um número mood de 0 a 9, seis triggers de reação única (success, error, yes, no, enter, exit) e uma intro de abertura. As 17 vêm em um único .riv (40 KB para um mascote plano no nosso teste de outubro de 2026, cerca de 1,0 MB para um logo 3D), além de exportações em vídeo e código pronto para colar em todos os planos pagos.
Leia o guia: Estados de animação do mascote: carregamento, sucesso, erro
Quanto tempo leva um conjunto de animações do Charmotion?
Geralmente alguns minutos. Você envia um personagem, mascote ou logo, ou pede para a IA criar um a partir de algumas respostas rápidas, e o Charmotion produz as 17 animações: dez loops de humor, seis reações únicas e uma intro de abertura, entregues como arquivo Rive e código. MP4, GIF, um vídeo de abertura 9:16 e vídeo transparente são exportados sob demanda na página do conjunto, em cerca de um minuto. Os conjuntos vêm com os planos pagos, a partir de US$ 20 por mês.
Já tem um personagem? Veja seu personagem em telas reais de app (grátis, no seu navegador) ou veja os planos.
Animação de logo
Posso animar um logotipo ou um logo só com texto?
Sim. Um logotipo plano pode se mover como um todo (um quique, uma inclinação ou um lançamento) ou letra por letra, com letras subindo, caindo ou sendo escritas, enquanto cada letra mantém sua forma exata. O Motion Studio do Charmotion separa as letras do logotipo para você. Letras que se transformam em outras formas ainda são trabalho para um motion designer.
Leia o guia: Como animar um logo: Canva, Adobe Express, After Effects, vídeo com IA e rigging comparadosCriador de logo animado
O ChatGPT consegue animar o meu logo?
Não como vídeo. O ChatGPT cria e edita imagens estáticas, a OpenAI descontinuou o app e o site do Sora em abril de 2026, e não encontramos nenhuma página de ajuda da OpenAI descrevendo geração de vídeo no ChatGPT. Ele pode escrever código de animação em CSS ou SVG, o que mantém o logo exato, mas exige uma versão em SVG e alguém para colocar o código em uma página.
Por que os geradores de vídeo com IA alteram o meu logo?
Porque eles redesenham cada frame em vez de mover o seu arquivo. Modelos de imagem para vídeo como Kling, Runway e Veo usam o seu logo como referência, então contornos, cores e letras podem mudar. O próprio guia de logos da Kling recomenda travar a câmera e animar a luz, não a forma. Ferramentas que fazem o rig da sua arte original a mantêm intacta.
Leia o guia: A IA consegue animar meu logo sem alterá-lo?Criador de logo animado
Qual deve ser a duração de uma animação de logo?
Normalmente de 3 a 8 segundos, e menos de cerca de 3 segundos para uma vinheta (sting). A Envato sugere de três a oito segundos para a maioria das animações de logo, o Envato Tuts+ diz que uma vinheta deve ter no máximo alguns segundos, e os anúncios bumper do YouTube são limitados a 6 segundos. Use a duração mais curta para vinhetas e aberturas de app e a mais longa para intros de vídeo, e sempre termine no logo estático.
Leia o guia: Logo reveal vs sting vs bumper vs loop: para que serve cada um
Um logo animado pode ter fundo transparente?
Sim, se você exportar em um formato com canal alfa: MOV com HEVC alpha ou ProRes 4444 para apps da Apple e editores de vídeo, WebM com VP9 alpha para Chrome, Firefox e OBS, ou GIF com transparência de bordas duras, tudo ou nada. Um MP4 H.264 padrão não pode ser transparente, então o fundo dele sempre sai sólido.
Leia o guia: Logo animado com fundo transparente: formatos, editores, slides e OBSCriador de logo animado
Quanto custa uma animação de logo?
Uma animação de logo personalizada costuma custar de US$ 40 a US$ 1.500, enquanto templates e ferramentas de IA custam alguns dólares por mês. O guia de custos 2026 da Fiverr indica de US$ 40 a US$ 120 para uma animação de logo básica, a Upwork diz que animar um logo existente vai de cerca de US$ 50 a mais de US$ 1.000, e motion designers freelancers costumam cobrar de US$ 300 a US$ 1.500 por uma vinheta curta. Templates e ferramentas de IA começam em alguns dólares por mês.
Leia o guia: Quanto custa animar um logo em 2026?Criador de logo animado
Posso transformar meu logo em GIF?
Sim. Anime o logo primeiro, exporte um vídeo curto e depois converta para GIF com uma paleta gerada a partir do clipe; um PNG salvo como .gif continua estático. O GIF permite no máximo 256 cores e só transparência tudo ou nada, então degradês ficam com faixas e bordas suaves ficam serrilhadas. Use GIF para e-mail e chat, e vídeo em sites.
Leia o guia: Como transformar um logo em GIF animadoCriador de logo animado
O Canva exporta logo animado com fundo transparente?
Só como GIF, e só em um plano pago. A central de ajuda do Canva lista downloads com fundo transparente para PNG, SVG e GIF, disponíveis nos planos Pro, Teams, Business, Education e Nonprofits. Downloads em MP4 nunca são transparentes. A transparência de um GIF é tudo ou nada por pixel, então bordas suaves e sombras ficam ásperas.
Leia o guia: Logo animado com fundo transparente: formatos, editores, slides e OBS
Do que eu preciso para ter um ícone animado de servidor do Discord?
Nível 1 de Impulso do Servidor, que exige 2 Impulsos, e um GIF. O Discord lista o ícone animado do servidor como benefício do Nível 1, e a documentação da API descreve o ícone como PNG, JPEG ou GIF de 1024×1024, animado quando o servidor tem esse recurso. Mantenha o logo centralizado, já que o Discord exibe os ícones de servidor em círculo e corta os cantos.
Leia o guia: Ícone animado de servidor no Discord: requisitos, tamanho e dicas de GIF
Posso colocar um logo animado no PowerPoint?
Sim, como GIF ou vídeo. GIFs animados são reproduzidos na Apresentação de Slides do PowerPoint para Windows e Mac, mas não no PowerPoint para a Web. Para vídeo, a Microsoft recomenda MP4 com H.264. A Microsoft não documenta a reprodução de vídeo com fundo transparente, então use um GIF ou um vídeo cujo fundo combine com o slide.
Leia o guia: Logo animado no Keynote, PowerPoint e Google Slides
Por que meu logo aparece com uma caixa preta na edição do vídeo?
O arquivo não tem canal alfa, ou o seu editor está ignorando esse canal. MP4 H.264 não armazena transparência, então exporte ou peça um MOV com ProRes 4444 ou HEVC alpha. No Premiere Pro, verifique também se a opção Ignore Alpha Channel está desativada em Interpret Footage; segundo a Adobe, ela faz aparecer pixels pretos.
Leia o guia: Como adicionar um logo animado a um vídeo (logo no canto ou marca d'água)
Posso animar um logo gerado por IA?
Sim. Logos raster, inclusive os gerados por IA, em 3D ou com muito texto, podem ser animados movendo e deformando a imagem original em vez de redesenhá-la em vetor. O modo Motion do Charmotion funciona assim: ele mantém os pixels originais da arte e adiciona squash, stretch, inclinações e reações. Os uploads nunca são usados para treinar IA.
Leia o guia: Como animar um logo a partir de um PNG ou imagem feita com IA
Qual formato usar para um logo animado em um site?
Para um loop decorativo com fundo transparente, use um .mov HEVC com alfa seguido de um WebM VP9 com alfa em um único elemento de vídeo sem som e com reprodução automática. Para um logo que reage a hover ou cliques, use um arquivo Rive. Evite GIF para logos com bordas suaves, porque a transparência do GIF é tudo ou nada.
Leia o guia: Como animar um logo a partir de um PNG ou imagem feita com IA
É possível animar a launch screen do iOS?
Não. A launch screen (tela de inicialização) do iOS é uma configuração estática no Info.plist ou um storyboard que não pode usar classes personalizadas, atributos de runtime nem conexões com código. A Apple diz que ela deve ser quase idêntica à primeira tela do app. Em vez disso, toque uma intro animada com a sua marca na primeira tela do app, depois que a inicialização terminar.
Leia o guia: Guia de animação de abertura e splash screen para apps
Como deve ser uma launch screen do iOS?
As Human Interface Guidelines da Apple dizem que a launch screen deve ser quase idêntica à primeira tela do app, evitar texto e não funcionar como splash screen nem como momento de branding. Se você quer uma splash ou uma animação de logo, a Apple sugere exibi-la no início do onboarding, quando a inicialização terminar.
Leia o guia: Guia de animação de abertura e splash screen para apps
Quanto tempo deve durar a animação da splash screen no Android?
O Google recomenda não passar de 1.000 ms em celulares para o ícone animado da splash screen no Android 12+, e qualquer atraso antes do início da animação não pode passar de 166 ms. É uma recomendação, não um limite rígido. Se o seu app leva mais de um segundo para iniciar, use uma animação em loop. O ícone pode ser um AnimatedVectorDrawable.
Leia o guia: Guia de animação de abertura e splash screen para apps
Qual é o tamanho do ícone da splash screen no Android 12?
Com fundo no ícone, o ícone da splash tem 240×240 dp e precisa caber em um círculo de 160 dp. Sem fundo, ele tem 288×288 dp e precisa caber em um círculo de 192 dp. Mantenha o logo dentro desse círculo, porque tudo o que ficar fora é cortado pela máscara. Nas versões mais antigas do Android, o recurso é trazido pelo androidx.core:core-splashscreen.
Leia o guia: Guia de animação de abertura e splash screen para apps
Já tem um personagem? Veja seu personagem em telas reais de app (grátis, no seu navegador) ou veja os planos.
Formatos e vídeo com fundo transparente
Dá para exportar um MP4 transparente do After Effects ou do Premiere?
Não. MP4 H.264 não tem canal alfa, então os exportadores da Adobe não conseguem deixá-lo transparente. Exporte como master um MOV ProRes 4444 ou uma sequência PNG com RGB mais alfa. Depois gere os arquivos para a web a partir dele: um WebM VP9 com ffmpeg, e HEVC com alfa em um Mac com avconvert, Compressor ou AVFoundation.
Leia o guia: MP4 com fundo transparente e HEVC com canal alfa: o que funciona de verdade
Dá para fazer HEVC com alfa sem Mac?
Ainda não com uma ferramenta comprovada e testada no Safari. Os encoders da Apple (avconvert, Compressor, AVFoundation) são o caminho confiável e só rodam no macOS. O FFmpeg 8.0 adicionou a codificação de camada alfa no libx265, que funciona no Windows e no Linux, mas teste o resultado em um iPhone antes de confiar nele. Um Mac na nuvem é a alternativa.
Leia o guia: MP4 com fundo transparente e HEVC com canal alfa: o que funciona de verdade
Como converter um MOV com alfa para WebM?
Para um MOV ProRes 4444, rode o ffmpeg com -c:v libvpx-vp9 -pix_fmt yuva420p. Para um MOV HEVC com alfa, o ffmpeg 7.1.1 descartou a camada alfa nos nossos testes, então primeiro converta o arquivo em um Mac com avconvert -p PresetAppleProRes4444LPCM e depois codifique esse arquivo ProRes em WebM VP9 da mesma forma.
Leia o guia: MP4 com fundo transparente e HEVC com canal alfa: o que funciona de verdade
O Charmotion exporta GIFs transparentes?
Não. Os GIFs do Charmotion são prévias de 480 px com fundo sólido. O GIF só aceita transparência de 1 bit, o que deixa as bordas suaves do personagem serrilhadas ou com halo, então a transparência vem do WebM (alfa VP9) e do MOV (alfa HEVC) dos planos pagos. Se uma plataforma exigir um GIF transparente, converta o WebM com ffmpeg.
Leia o guia: PNG para GIF animado transparente: halos, bordas e formatos melhores
O Safari suporta WebM transparente?
Não. O Safari reproduz vídeo WebM, mas descarta o canal alfa do VP9, então as áreas transparentes aparecem opacas. Em outubro de 2026, o patch do WebKit para alfa em VP9 (bug 275908, pull request #64837) ainda está aberto. Sirva HEVC com alfa em um .mov para o Safari e WebM VP9 para Chrome, Edge e Firefox.
Leia o guia: Vídeo com fundo transparente em sites (inclusive no Safari)
Como adicionar um vídeo com fundo transparente a um site?
Use um único elemento <video autoplay muted loop playsinline> com duas fontes: primeiro um .mov HEVC com alfa, com tipo video/quicktime; codecs="hvc1.1.6.H120.b0", depois um WebM VP9 com alfa. A ordem importa porque o Safari consegue reproduzir VP9, mas ignora a transparência, então ele precisa encontrar o arquivo HEVC primeiro.
Leia o guia: Vídeo com fundo transparente em sites (inclusive no Safari)
O que é HEVC com alfa?
HEVC com alfa é a extensão da Apple para vídeo H.265 que armazena um canal de transparência. A reprodução é suportada no iOS 13+, tvOS 13+ e macOS Catalina+, incluindo o Safari. Codifique em um Mac com AVFoundation, por exemplo com o avconvert da Apple e o preset HEVC com alfa. Nos nossos testes, arquivos gerados pelo encoder hevc_videotoolbox do ffmpeg não abriam no AVFoundation.
Leia o guia: Vídeo com fundo transparente em sites (inclusive no Safari)
Um MP4 pode ter fundo transparente?
Um MP4 H.264 padrão não armazena transparência. Para vídeo com fundo transparente na web, use WebM VP9 para Chrome, Edge e Firefox e HEVC com alfa para Safari e apps da Apple. O ProRes 4444 também tem canal alfa, mas é um formato de edição e pesado demais para servir em páginas web.
Leia o guia: Vídeo com fundo transparente em sites (inclusive no Safari)
Por que meu vídeo não toca automaticamente no iPhone?
O Safari no iOS só reproduz automaticamente vídeos que estejam sem som (muted) ou sem faixa de áudio e visíveis na tela, e o iPhone precisa do atributo playsinline para reproduzir na própria página em vez de tela cheia. Use <video autoplay muted loop playsinline> e trate a Promise de play() caso a reprodução seja recusada.
Leia o guia: Vídeo com fundo transparente em sites (inclusive no Safari)
Por que o GIF é ruim para animação na web?
O GIF usa uma paleta indexada de no máximo 256 cores e só tem transparência do tipo tudo ou nada, então os degradês ficam com faixas e as bordas ficam serrilhadas. Também é pesado: em um exemplo do web.dev, um GIF de 3,7 MB virou um MP4 de 551 KB e um WebM de 341 KB com o mesmo conteúdo.
Como fazer um vídeo se comportar como um GIF?
Use <video autoplay loop muted playsinline> com fontes WebM e MP4. Esses atributos fazem o vídeo começar ao carregar, repetir sem parar, ficar sem som e tocar dentro da página no iPhone, reproduzindo o comportamento de um GIF com uma fração do tamanho. A reprodução automática sem som é sempre permitida no Chrome.
Quais formatos de arquivo vêm em um conjunto do Charmotion?
Um conjunto completo inclui um .riv com as 17 animações, um MP4 de 1080×1080 a 60 fps por animação, um MP4 de abertura 9:16, GIFs de 480 px, WebM transparente (alfa VP9) e MOV (alfa HEVC) e código para web, React e SwiftUI. Os conjuntos vêm com os planos pagos, que incluem todos os formatos.
UX e acessibilidade em animação
O que é prefers-reduced-motion?
prefers-reduced-motion é um media feature do CSS que informa se o usuário pediu ao sistema operacional para minimizar o movimento, com os valores no-preference e reduce. Ele tem amplo suporte desde janeiro de 2020. Use-o para trocar movimentos grandes e loops por uma pose estática ou um fade suave.
Como detecto o Reduzir Movimento no SwiftUI?
Leia @Environment(\.accessibilityReduceMotion) var reduceMotion. Quando o valor for true, mostre uma pose estática ou um fade em vez do movimento em loop do personagem. Ele reflete a configuração Reduzir Movimento do usuário em Ajustes, Acessibilidade, Movimento. Na web, o Safari expõe a mesma configuração por meio de prefers-reduced-motion.
O que é o critério 2.3.3 da WCAG (Animação a partir de interações)?
O SC 2.3.3 é um critério de Nível AAA: animações de movimento disparadas por interação do usuário devem poder ser desativadas, a menos que sejam essenciais. Respeitar prefers-reduced-motion é a forma mais comum de atendê-lo. O nível AAA raramente é exigido, mas é uma boa prática para mascotes que pulam ou deslizam ao toque.
Quantas vezes por segundo uma animação pode piscar?
No máximo três vezes em qualquer período de um segundo, segundo o SC 2.3.1 (Nível A) da WCAG 2.2, a menos que os flashes fiquem abaixo dos limites de flash geral e de flash vermelho. Flashes rápidos podem provocar crises em pessoas com epilepsia fotossensível, então mantenha as piscadas lentas nas animações error e attention.
Quanto tempo devem durar as animações de interface?
A maioria das transições de interface em mobile deve levar cerca de 200 a 300 ms. O Material Design sugere cerca de 225 ms para elementos que entram, 195 ms para os que saem e cerca de 375 ms para grandes transições em tela cheia, e alerta que acima de 400 ms a transição pode parecer lenta. Movimentos mais longos, por uma área maior, pedem uma duração maior.
Quando usar um spinner ou uma barra de progresso?
Use um indicador em loop, como um spinner ou um mascote animado, para esperas de cerca de 2 a 10 segundos, e uma barra de progresso com porcentagem para 10 segundos ou mais. O Nielsen Norman Group recomenda não usar indicador para ações de menos de cerca de um segundo, em que um retorno visual imediato basta.
O que são os limites de tempo de resposta de 0,1, 1 e 10 segundos?
São os limites de Jakob Nielsen: 0,1 segundo parece instantâneo, 1 segundo mantém o fluxo de raciocínio do usuário sem interrupção e 10 segundos é mais ou menos o limite para manter a atenção na tarefa. Passando de uns 10 segundos, mostre o progresso para que o usuário saiba que o sistema não travou.