Mapa da trilha
Conteúdo detalhado
📒 SaaS Walkthrough (GSAP)
Startup lança app de notas com IA: vídeo de 45s da landing mostrando Problema → Solução → Features → CTA. GSAP coordena a coreografia de timeline como um diretor de arte.
SaaS launch video de 45s: headline → sub → features em stagger → dashboard → stats → CTA. GSAP brilha em coreografias com muitos elementos.
Entender o fit lib×projeto economiza retrabalho; GSAP é storytelling por movimento.
timeline GSAP · sequência narrativa · motion hierarchy.
Headline sobe de baixo com spring; subheading faz fade-in com delay respeitoso. São as âncoras da hierarquia visual.
As primeiras cenas determinam o tom emocional de todo o vídeo.
fromBelow · spring easing · delay offset.
Três feature cards entram em stagger (~0.15s entre cada); dashboard mockup desliza pela direita. O ritmo stagger é a assinatura visual do GSAP.
Stagger transforma elementos iguais em sequência com personalidade.
gsap.stagger · slideInRight · reveal sequencial.
Números animam de zero ao valor real com easing power2. "10,000 usuários" contando sobe credibilidade de forma visual.
Counters animados são comprovadamente mais persuasivos que números estáticos.
counter animation · interpolateValue · power2.out.
Botão CTA escala de 0.8 para 1 com overshoot leve, capturando o olhar após o clímax dos stats.
O CTA é a única ação que o vídeo quer do espectador — o movimento deve sublinhar isso.
scale pop · back.out · motion punctuation.
Composição final: 6 cenas em sequence, render 1920×1080, MP4 para Product Hunt, pitch deck e landing page.
Saber o destino final define resolução, duração e codec desde o primeiro prompt.
render target · composição final · distribuição.
🌍 World Population Shift (D3)
Bar race animado mostrando os 10 países mais populosos de 1990 a 2030. D3 transforma planilha em documentário — cada reordenação de barra é uma história.
Documentário de crescimento populacional 1990–2030. Sem D3 você tem números; com D3 você tem uma história que se desenrola no tempo.
D3 é a única lib da lista nativa para escalas, eixos e transições de dados.
data storytelling · scale linear · axis dinâmico.
Dataset de país × ano × população. Escala linear mapeia valores para pixels; escala de band distribui barras com gap uniforme.
Escala errada = barras que transbordam ou somem. É o alicerce.
scaleLinear · scaleBand · domain/range.
A cada frame do Remotion, o ranking recalcula. Barras interpolam posição Y e largura suavemente; mudanças de liderança são marcadas com pausa breve.
A transição de ranking é o momento dramático do bar race — é onde o espectador reage.
sort dinâmico · interpolação de posição · pausa dramática.
Rótulos de país e valor seguem as barras. O contador de ano no canto exibe 1990 → 2030 em tempo real, ancorado ao frame do Remotion.
Labels que "colam" nas barras são o que torna o bar race legível em alta velocidade.
text follow · year counter · readability motion.
Mapa de cor por país persistente (mesmo cor independente do ranking). Fundo escuro, barras com gradiente da cor do país ao tom mais claro.
Consistência de cor é o que permite o espectador acompanhar um país pelo vídeo inteiro.
colorMap · identidade persistente · estética documental.
O mesmo componente bar race, trocando apenas o dataset, vira infográfico de receita, ranking de times, aprovação presidencial.
Um template bem parametrizado se amortiza em dezenas de vídeos.
componente genérico · props de dataset · multiplicação de conteúdo.
🏍️ Motorcycle Commercial (Three.js)
Showcase cinematográfico: câmera orbita enquanto luzes refletem na lataria metálica. Nada mais na lista cria cenas 3D convincentes — Three.js é a escolha óbvia.
Comercial automotivo premium: câmera orbitando, luzes de estúdio, reflexo metálico, fundo escuro. Nenhuma outra lib aqui gera 3D renderizado.
Escolher a ferramenta certa para o trabalho certo é a meta-habilidade mais valiosa de qualquer projeto.
scene · camera · renderer · WebGL.
Key light, fill light e rim light simulam estúdio fotográfico. PointLight e SpotLight com intensidade calibrada revelam a forma do objeto.
Iluminação separa cena amadora de produto premium mais do que qualquer mesh.
three-point lighting · PointLight · rim light.
MeshStandardMaterial com metalness=0.9 e roughness=0.1. EnvMap cúbico simula reflexo do ambiente — o "brilho de concessionária".
Material correto transforma um cubo em produto desejável.
metalness · roughness · envMap.
Câmera move em arco ao redor do objeto via Math.sin/cos do frame atual. Movimento lento e deliberado, como câmera de cinema de alta gama.
Movimento de câmera é onde o espectador sente o caráter da marca.
camera orbit · sin/cos path · dramatic pacing.
Chão com plano reflexivo sutil, fundo #0a0a0a, névoa exponencial que escurece as bordas. Princípios de composição de produto fotográfico aplicados ao 3D.
Composição guia o olhar mesmo sem movimento.
FogExp2 · plano reflexivo · enquadramento.
Render 4K com antialias; saída MP4 para Instagram, YouTube e mídia out-of-home. O resultado parece marketing automotivo profissional.
Saber até onde o stack alcança define o que você pode vender.
antialias · 4K render · produto premium.
🏦 Banking Onboarding (Lottie)
Fintech precisa de animações de onboarding: criar conta → depositar → transferir → confirmação. Lottie entrega escopo pequeno, rápido, extremamente confiável — a escolha certa.
Quatro micro-animações de onboarding mobile. Lottie = JSON leve, escalável infinito, roda em React Native sem recompilação.
Para escopo de micro-interação, Lottie é mais rápido e mais confiável que qualquer lib de animação programática.
JSON animation · vector · cross-platform.
Logo do app escala do centro, fundo resolve de escuro para branco, elementos da UI surgem em cascade suave.
O splash screen é a primeira impressão emocional do produto.
logo reveal · UI cascade · brand moment.
Ícone de moeda cai e pousa na carteira; seta de transferência percorre caminho de A para B. Ambas usam path animation do Lottie.
Path animations são o ponto forte do Lottie — fluidez de SVG em runtime.
path animation · follow path · transaction UX.
Círculo verde se desenha via stroke-dashoffset; checkmark revela dentro; leve bounce final. O fechamento emocional da sequência.
A confirmação de sucesso é onde o usuário decide se confia no app.
stroke-dashoffset · reveal · success state UX.
O hook useLottie com currentFrame do Remotion garante que a animação JSON avance exatamente no frame certo do render.
Sem sincronização de frame, o render fica dessincronizado entre preview e MP4 final.
frame sync · useLottie · deterministic render.
Quatro JSONs exportados + componente React reutilizável. Pode ser integrado em React Native ou web app sem alteração de código.
Lottie é o único formato de animação que vai do protótipo ao app de produção sem fricção.
JSON export · React Native · production-ready.