🎬 Cenário: startup, landing, 45 segundos
O produto é real: NoteAI, um app de notas que usa IA para organizar e resumir. O objetivo do vídeo é convencer em 45s — desde o problema que o usuário sente até o CTA de download. Nenhuma cena pode ser desperdiçada.
Por que GSAP para este projeto?
GSAP é a única lib da trilha com uma timeline sequencial nativa. Você coloca 6 cenas em ordem, define offsets e o GSAP garante que cada peça entra no momento certo. Para um vídeo de storytelling com 6+ elementos em movimento, isso é insubstituível.
✓ GSAP é ideal quando…
✗ GSAP não é a melhor escolha quando…
📝 Cenas 1–2: Headline entra, Sub faz fade
As duas primeiras cenas estabelecem a proposta de valor. A headline sobe de baixo com spring — overshoot leve, como quem bate a mão na mesa. O subheading faz um fade-in limpo 0.8s depois, dando espaço para o olho ler.
💡 Dica de timing
Entre headline e subheading, use um delay de 0.6–0.8s. Menos do que isso, os dois elementos parecem entrar juntos e a hierarquia se perde. Mais do que 1.2s, o espectador acha que o vídeo travou.
🃏 Cenas 3–4: Cards em stagger e Dashboard
Três feature cards entram em stagger de 0.15s cada — não simultâneo, não um por vez: o ritmo certo que parece deliberado. Em seguida, o dashboard mockup desliza da direita com ease-out, como uma cortina sendo puxada.
Ordem de construção das cenas
Montar a composição Remotion
Crie a composição 1920×1080 a 30fps, 45s (1350 frames). Defina a duração no calculateMetadata.
Adicionar os elementos estáticos
Headline, sub, cards, dashboard — sem animação ainda. Valide layout e tipografia.
Conectar GSAP ao frame do Remotion
Use useCurrentFrame + useEffect para avançar o timeline GSAP de forma determinística por frame.
Iterar timing cena a cena
Ajuste offset de cada elemento no preview. Só renderize o MP4 depois de aprovar o preview.
🔢 Cena 5: Statistics Counter
O stat counter anima de zero ao valor real com interpolate(frame, [0, 60], [0, 10000]). É um dos momentos mais persuasivos do vídeo — prova social em movimento.
💡 Dica de persuasão
Números que sobem ativam o cérebro diferente de números estáticos. Use easing power2.out — rápido no começo, lento no final — para que o número "pouso" no valor correto com suavidade, como se estivesse se estabelecendo.
💬 O Prompt Completo
Este é o prompt literal que você dá ao Claude Code (com a skill Remotion ativa). Cada linha de instrução mapeia para uma cena do vídeo — o Claude gera a composição completa em uma só resposta.
Create a SaaS launch video for an AI note-taking application. Sequence: 1. Headline enters from below. 2. Subheading fades in. 3. Three feature cards stagger onto screen. 4. Dashboard mockup slides in. 5. Statistics counter animates upward. 6. CTA button scales in. Use spring easing and professional pacing.
💡 Por que listar em números?
A lista numerada mapeia diretamente para a estrutura de sequência do GSAP. O Claude recebe instrução de ordem explícita e traduz para .to() e .from() na ordem correta, sem adivinhar.
🚀 Montagem Final e Deliverable
Com as cenas aprovadas no preview, o render final gera o MP4 pronto para distribuição. Um vídeo, três destinos simultâneos — Product Hunt, landing page e pitch deck.
✓ O que este vídeo entrega
✗ O que NÃO está no escopo
O que você aprendeu neste projeto
- ▸ Timeline GSAP para sequenciar animações com precisão
- ▸ Staggered reveals para transformar grupos em narrativa
- ▸ Motion hierarchy: o que lidera, o que apoia
- ▸ Counter animado como ferramenta de persuasão
- ▸ Presentation-style storytelling em vídeo
📋 Resumo do Módulo 3.1
- ✓GSAP é a escolha certa para coreografia de múltiplos elementos em sequência
- ✓Headline + sub estabelecem a hierarquia visual nas primeiras cenas
- ✓Stagger de cards cria ritmo sem parecer mecânico
- ✓Counter animado = prova social em movimento = mais persuasão
- ✓Deliverable: vídeo de lançamento pronto para Product Hunt e pitch deck
Próximo módulo:
🌍 Módulo 3.2 — World Population Shift (D3) →