Mapa da trilha
Seis módulos cobrindo cada biblioteca em profundidade — clique para ir direto.
Conteúdo detalhado
🟢 GSAP — timeline frame-perfect
A biblioteca padrão de animação web. Coreografia de timelines, stagger e easing profissional para vídeos estilo slide-deck.
O que é: GreenSock Animation Platform — a biblioteca JavaScript mais usada para animação web de alta performance.
Por que aprender: Controle preciso de tempo, easing profissional e integração natural com Remotion.
Conceitos-chave: gsap.to(), gsap.from(), timeline, stagger, ease.
O que é: Encadeamento de animações onde cada peça entra no momento exato.
Por que aprender: É a base para vídeos estilo slide-deck onde cada seção revela em sequência.
Conceitos-chave: timeline.to(), position param, overlap com "<0.3", labels.
O que é: Animações que disparam em cascata com delays controlados.
Por que aprender: Cards entrando em sequência são o padrão dos melhores vídeos de produto.
Conceitos-chave: stagger: 0.1, from: "center", each, amount.
O que é: A curva de velocidade que faz a animação parecer física ou suave.
Por que aprender: Linear parece robótico; ease-out parece natureza. A escolha define o tom.
Conceitos-chave: power1-4, back, elastic, bounce, CustomEase.
O que é: Usar GSAP para coreografar elementos React renderizados frame-a-frame pelo Remotion.
Por que aprender: O Remotion renderiza cada frame — o GSAP traduz "progresso" para valores CSS com perfeição.
Conceitos-chave: useCurrentFrame, interpolate, gsap.globalTimeline.
O que é: A abordagem de pedir ao Claude uma landing page estática e depois transformar em animação GSAP.
Por que aprender: Reutilizar componentes prontos acelera muito a produção de vídeo.
Conceitos-chave: prompt de transformação, separação de concerns, layers de animação.
⚖️ GSAP × Framer Motion
Controle preciso de timeline vs. física reativa. Por que GSAP vence para vídeo renderizado.
O que é: Animações controladas por tempo absoluto — sempre iguais em qualquer render.
Por que aprender: Renderização frame-a-frame exige determinismo: mesmo frame = mesmo visual.
Conceitos-chave: timeline determinística, position param, seek(), globalTimeline.
O que é: Animações dirigidas por interação — hover, drag, layout reflow.
Por que aprender: Melhor para protótipos de UI e demos interativos (não para vídeo renderizado).
Conceitos-chave: motion.div, whileHover, spring physics, AnimatePresence.
O que é: Tabela comparativa para decidir qual biblioteca usar por cenário.
Por que aprender: Evita usar a ferramenta errada no contexto errado.
Conceitos-chave: vídeo renderizado, prototipagem, UI interativa, apresentação.
O que é: A termina, B começa 0.3s depois, C sobrepõe B em 0.1s.
Por que aprender: Esse padrão de posicionamento relativo é o coração do storytelling visual.
Conceitos-chave: position param "<", "<0.3", "+0.5", labels nomeados.
O que é: Vídeo renderizado = ninguém vai interagir. Hover e drag não existem no MP4.
Por que aprender: Entender a limitação evita escolhas erradas de stack.
Conceitos-chave: headless render, frame-by-frame, ausência de interatividade.
O que é: Protótipos de UI, demos interativos para o cliente, apps web com transições.
Por que aprender: Ter as duas ferramentas no arsenal resolve contextos diferentes.
Conceitos-chave: prototipagem rápida, layout animation, shared layout transitions.
📊 D3.js — o dado é o conteúdo
Padrão de visualização de dados. Dados estáticos se tornam animações ricas — você não desenha nada, o dado faz o trabalho.
O que é: Data-Driven Documents — vincula dados a elementos DOM/SVG automaticamente.
Por que aprender: Qualquer dataset vira um gráfico animado sem desenhar manualmente.
Conceitos-chave: data binding, scales, selections, enter/update/exit.
O que é: Barras que crescem e reordenam ao longo do tempo, representando rankings em movimento.
Por que aprender: É o padrão para qualquer comparação temporal de categorias.
Conceitos-chave: keyframes de reordenação, smooth transitions, d3.transition().
O que é: Nós aparecem em sequência, linhas se desenham conectando a topologia.
Por que aprender: Explica sistemas complexos de forma visual e progressiva.
Conceitos-chave: force layout, stroke-dashoffset, sequential reveal, node-link.
O que é: A abordagem — você fornece o dataset e descreve o visual, Claude gera D3 completo.
Por que aprender: Você não precisa saber D3; precisa saber o que quer mostrar.
Conceitos-chave: prompt de dados, CSV/JSON, especificação visual, iteração.
O que é: Rotas de crescimento, mapas de calor de dados geográficos, jornadas de usuário.
Por que aprender: Dado geográfico conta histórias únicas que gráficos comuns não conseguem.
Conceitos-chave: d3.geoProjection, topojson, choropleth, path animation.
O que é: Charts, diagramas de arquitetura, mapas de rota — qualquer coisa data-driven.
Por que aprender: Saber qual ferramenta escolher para cada tipo de dados poupa retrabalho.
Conceitos-chave: escolha de chart type, dados contínuos vs. categorias, hierarquias.
🧊 Three.js — WebGL e 3D no vídeo
Cenas 3D renderizadas frame-a-frame. Materiais, câmeras e geometria procedural para motion gráficos 3D.
O que é: Integração do Three.js com Remotion: cada frame do vídeo é um render WebGL sincronizado com o tempo da composição.
Por que aprender: Permite criar motion gráficos com geometria, luz e profundidade impossíveis de replicar com CSS ou SVG.
Conceitos-chave: useCurrentFrame(), renderer.render(), canvas como fonte de imagem, determinismo de frame.
O que é: Uso do Three.js puro — Scene, Camera, Renderer, Mesh — sem camadas de abstração adicionais.
Por que aprender: Controle total sobre o pipeline WebGL; ideal quando performance máxima ou shaders personalizados são necessários.
Conceitos-chave: WebGLRenderer, PerspectiveCamera, BoxGeometry, MeshStandardMaterial, animationLoop substituído por frame.
O que é: Wrapper React para Three.js — escreve cenas 3D em JSX, com componentes reutilizáveis e hooks.
Por que aprender: Integra naturalmente com o modelo de componentes Remotion; código mais legível e fácil de iterar com Claude.
Conceitos-chave: <Canvas>, <mesh>, <ambientLight>, useFrame() substituído por useCurrentFrame(), drei helpers.
O que é: Configuração de luzes (ambiente, direcional, ponto) e materiais (básico, standard, físico) para definir aparência e realismo.
Por que aprender: Iluminação é o que transforma um cubo genérico em um objeto com identidade visual — essencial para motion premium.
Conceitos-chave: AmbientLight, DirectionalLight, MeshPhysicalMaterial, roughness, metalness, envMap.
O que é: Movimentação da câmera ao redor de objetos usando trigonometria ou easing mapeado para frames.
Por que aprender: Câmera em movimento cria profundidade narrativa — transforma renders estáticos em cinematografia 3D.
Conceitos-chave: camera.position, lookAt(), Math.sin/cos para órbita, interpolação de posição com spring().
O que é: Critérios objetivos para escolher entre Three.js puro e React Three Fiber em cada projeto.
Por que aprender: A escolha certa economiza retrabalho — R3F é melhor para composições complexas; Vanilla para shaders e performance crítica.
Conceitos-chave: overhead de reconciliação, ecosistema drei, acesso direto à GPU, integração com estado React.
✨ Lottie — animação em JSON
Exportar do After Effects / Figma para JSON e reproduzir com perfeição em qualquer tamanho.
O que é: Lottie como a rota mais direta de animação pronta para vídeo: arquivo JSON → componente Remotion → render.
Por que aprender: Elimina código de animação manual — você descreve o visual, obtém um JSON e insere no vídeo em minutos.
Conceitos-chave: lottie-web, @remotion/lottie, LottieAnimation component, loop e autoplay controlados por frame.
O que é: Princípio de que animações Lottie de escopo restrito (ícone, loader, ilustração simples) geram JSON confiável e leve.
Por que aprender: Animações complexas geram JSON frágil; dividir em peças pequenas garante qualidade consistente.
Conceitos-chave: decomposição de cenas, tamanho de arquivo JSON, camadas nomeadas, versionamento de animações.
O que é: LottieFiles e outras fontes de animações JSON prontas, gratuitas e licenciadas para uso em produção.
Por que aprender: Reutilizar animações validadas acelera produção — você não precisa criar do zero o que já existe.
Conceitos-chave: lottiefiles.com, filtro de licença, preview, download JSON, customização de cores via editor online.
O que é: Uso de Lottie para pequenas animações de reforço — checkmarks, loaders, ícones que "ganham vida" em momentos-chave do vídeo.
Por que aprender: Micro-interações elevam a percepção de qualidade sem custo de produção proporcional.
Conceitos-chave: timing de entrada, playbackRate, segmentos de animação, sincronização com narração.
O que é: Lottie como escolha padrão para sequências de onboarding — ilustrações animadas que explicam fluxos de app.
Por que aprender: Formato leve, escalável e reproduzível perfeitamente em qualquer resolução — ideal para vídeos de produto.
Conceitos-chave: storyboard de onboarding, transições entre telas, duração por passo, integração com legenda.
O que é: Lottie para animações de identidade de marca em social media — logos animados, intros, bumpers e transições.
Por que aprender: Produção de conteúdo de marca em escala — uma animação Lottie reutilizada em dezenas de vídeos mantém identidade sem retrabalho.
Conceitos-chave: paleta de marca no JSON, animações reutilizáveis como componentes, variantes de cor para diferentes campanhas.
🗺️ Mapa de decisão — qual biblioteca usar
Fluxograma completo para escolher a biblioteca certa pelo tipo de conteúdo, prazo e complexidade.
O que é: Critério de escolha do GSAP: qualquer cena onde múltiplos elementos precisam entrar em sequência com timing preciso.
Por que aprender: Saber quando escolher GSAP evita usar uma biblioteca mais pesada onde uma timeline resolveria.
Conceitos-chave: slide-deck, reveal sequencial, stagger, easing expressivo, compatibilidade total com Remotion.
O que é: Critério de escolha do D3: sempre que o conteúdo é derivado de um dataset — o dado é o personagem principal.
Por que aprender: D3 transforma números em geometria automaticamente; tentar fazer isso manualmente com outra biblioteca seria ineficiente.
Conceitos-chave: data binding, scales, charts animados, diagramas de rede, mapas geográficos.
O que é: Critério de escolha do Three.js: qualquer cena que exige profundidade real, geometria procedural ou renderização de luz física.
Por que aprender: Three.js tem custo de setup mais alto — usá-lo só quando 3D é realmente necessário evita complexidade desnecessária.
Conceitos-chave: objetos 3D, câmera com perspectiva, shader, PBR materials, cenas interativas ou cinematográficas.
O que é: Critério de escolha do Lottie: animações de ilustração, ícones, micro-interações — onde leveza e velocidade de entrega importam mais que controle.
Por que aprender: Lottie elimina código de animação — você entrega mais rápido e com menos bugs quando o escopo se encaixa.
Conceitos-chave: JSON pré-animado, zero código de interpolação, escalável, onboarding e social clips.
O que é: Comparação direta entre GSAP (controle imperativo de timeline) e Framer Motion (animação declarativa orientada a estado React).
Por que aprender: Ambas são válidas em Remotion — a escolha errada gera retrabalho; entender as diferenças poupa tempo.
Conceitos-chave: GSAP para coreografia precisa, Framer Motion para prototipagem e UI interativa, sobreposição de casos de uso.
O que é: Framework de decisão com 4 regras: instale a biblioteca certa, comece simples, itere com Claude, render certo.
Por que aprender: Ter um processo de decisão explícito elimina paralisia de escolha e garante consistência entre projetos.
Conceitos-chave: critério de instalação, MVP primeiro, ciclo de iteração com IA, validação de render antes de escalar.