Três padrões típicos de Lottie: check de sucesso, loader contínuo e dots de loading — cada um gerado em poucos segundos de prompt.
🎯 O que é Lottie e por que é diferente
Lottie é uma biblioteca de animação baseada em JSON descritivo — o formato captura vetores, cores e curvas de animação de forma compacta. Diferente de Three.js ou GSAP, o escopo é intencionalmente pequeno: animações limpas, leves, feitas para repetir.
✗ Onde Lottie não é a escolha
- ✗Cenas 3D com perspectiva e iluminação real.
- ✗Coreografias longas com múltiplos elementos sincronizados.
- ✗Animações de dados (gráficos, charts complexos).
✓ Onde Lottie domina
- ✓Micro-animações de marca: checkmarks, loaders, ícones em loop.
- ✓Onboarding de app: ilustração que se anima para explicar um passo.
- ✓Social clips rápidos onde limpo e preciso valem mais que elaborado.
⚡ Por que o Claude acerta mais rápido
O segredo do Lottie com Claude: escopo pequeno significa que o modelo não tem espaço para complicar. A saída quase sempre é production-ready de primeira — limpa, correta, usável.
Escopo delimitado
Uma micro-animação tem início, meio e fim claros. O Claude não precisa inferir a coreografia — a estrutura do problema é pequena o suficiente para ele resolver com certeza.
Sem decisões de arquitetura
Não há cena 3D, pipeline WebGL ou reconciler React para gerenciar. O modelo escreve SVG + keyframes ou JSON Lottie direto — mínima chance de erro.
Biblioteca comunitária enorme
Encontre uma animação Lottie que se aproxima do que você quer, descreva para o Claude, e peça para recriar na composição Remotion. O padrão já existe; o modelo reconstrói com fidelidade.
💡 Dica de workflow
Pesquise no LottieFiles.com algo próximo ao que você quer. Descreva o que viu para o Claude ("uma animação de ícone de coração que pulsa em loop, vetorial, fundo transparente") — a descrição baseada em referência real melhora muito a saída.
🛒 O teste de qualidade Lottie
O teste definidor: peça ao Claude uma "animação de escanear código de barras no caixa de uma loja de conveniência". A saída esperada é limpa, correta e usável na primeira resposta — sem iteração.
Crie uma animação Lottie-style para Remotion: - Scanner de código de barras num caixa de loja - Linha de scan vermelho varrendo de cima a baixo - Ícone do código de barras em vetorial simples - Loop contínuo, fundo transparente - Clean, sem elementos desnecessários
Linha vermelha varrendo o código de barras — exatamente o que sai de um único prompt Lottie-style.
📱 Casos de uso: social, onboarding, marca
Lottie brilha em três contextos: social clips que precisam de motion limpo e rápido, onboarding de app onde ilustrações se animam para guiar o usuário, e micro-conteúdo de marca com identidade visual consistente.
Social clips
Motion limpo, loop perfeito, sem distração. O tipo de animação que funciona em Reels e Stories sem parecer "feito por ferramenta".
Onboarding de app
Ilustrações que se movem para explicar um passo de UI. Leve, carrega rápido, anima com precisão — padrão do mercado mobile.
Micro-conteúdo de marca
Ícones animados, loading screens com a marca, confirmações de ação. Pequenos toques que fazem a identidade visual ganhar vida.
🔷 Lottie vs animação CSS pura
Para micro-animações dentro do Remotion, Lottie e CSS @keyframes são intercambiáveis. A diferença é que Lottie é reutilizável fora do Remotion (web, mobile, apps), enquanto CSS @keyframes é contido na composição.
🗺️ O fluxo prompt→Lottie→Remotion
O fluxo de trabalho com Lottie no Remotion é linear e rápido. Você descreve a animação, o Claude gera o JSON ou SVG animado, você inclui na composição Remotion e renderiza — três etapas, sem vai-e-vem.
💡 Quando iterar
Lottie raramente precisa de iteração, mas quando precisa é rápida. Como o escopo é pequeno, o follow-up é cirúrgico: "aumente o raio do loader" ou "mude a cor do check para verde" — uma linha por ajuste.
📐 Anatomia de um bom prompt Lottie
Prompts Lottie de qualidade têm quatro ingredientes: o objeto que anima, o movimento em palavras físicas, o contexto de uso e a instrução de loop. Com esses quatro, o Claude entrega na primeira.
✗ Prompt incompleto
- ✗"Faça uma animação de coração." — sem contexto de uso, sem loop.
- ✗"Animate this icon." — sem descrever o movimento fisicamente.
- ✗Sem mencionar fundo transparente quando necessário.
✓ Prompt completo
- ✓"Ícone de coração que pulsa — escala 1→1.2→1 — loop de 1s."
- ✓"Fundo transparente, estilo vetorial flat, cor #ef4444."
- ✓"Para social clip — clean, sem bordas ou sombras."
🔷 Lottie é o atalho certo quando…
Você precisa de resultado rápido, a animação é simples e limpa, o contexto é social / mobile / onboarding, ou você quer algo que também funcione fora do Remotion. Nos outros casos, GSAP, D3 ou Three.js entregam mais.
📌 Resumo do módulo
Próximo módulo:
2.6 — Mapa de decisão: qual lib usar para cada tipo de motion.