Vídeo e Visuais para Lançamento
Esta skill cobre a criação de ativos visuais e de vídeo para lançamentos de produtos. Esses são os ativos de maior impacto que você criará — um ótimo vídeo de demonstração ou GIF prende a atenção, comunica valor mais rápido que palavras e é compartilhado. Um ruim pode prejudicar ativamente o lançamento, fazendo o produto parecer confuso ou mal-acabado.
A hierarquia de mídia
Para a maioria dos lançamentos, a decisão sobre o que criar segue esta ordem:
- Vídeo de demonstração — Mostra o produto em ação com contexto. Melhor para explicar como algo funciona.
- GIF animado ou loop de gravação de tela — Mais curto, reproduz-se automaticamente inline nas redes sociais. Melhor para mostrar uma interação específica.
- Captura de tela anotada — Estático, rápido de produzir, bom para mostrar um estado ou recurso específico.
- Diagrama ou ilustração — Para arquitetura, conceitos ou coisas que não podem ser capturadas na tela.
Em geral: use vídeo quando o fluxo importa, GIF quando uma única interação comunica o valor, e capturas de tela quando um estado específico é o ponto principal.
Vídeo de demonstração
Duração por plataforma
| Plataforma | Duração alvo | Limite máximo |
|---|---|---|
| Product Hunt | 60-90 segundos | 3 minutos |
| Página inicial hero | 60-90 segundos | 2 minutos |
| X/Twitter incorporado | 30-45 segundos | 2 minutos e 20 segundos |
| 45-90 segundos | 10 minutos | |
| YouTube (demonstração completa) | 3-5 minutos | — |
Os limites máximos das plataformas não são apenas técnicos — o engajamento cai drasticamente além deles. Um vídeo de 4 minutos no Product Hunt é, efetivamente, nenhum vídeo.
Estrutura de roteiro (para demonstração curta)
Mantenha-se em 5-7 batidas:
- Problema (5-10 segundos) — Apresente o problema a ser resolvido. Uma frase. Nada de longa introdução.
- Apresente a solução (5-10 segundos) — Nomeie o produto e a proposta de valor central.
- Demonstração: caminho feliz (30-60 segundos) — Mostre o caso de uso principal funcionando do início ao fim. Este é o coração do vídeo.
- Principais capacidades (10-20 segundos) — 2-3 cortes rápidos mostrando recursos secundários. Mantenha rápido.
- Ponto de prova (5-10 segundos) — Uma métrica, citação de cliente ou benchmark. Um slide ou linha de narração.
- CTA (5 segundos) — Uma ação. "Experimente grátis em [URL]" ou "Cadastre-se em [URL]".
Evite: introduções longas, logotipos animados (o público clica para sair), telas lentas de inicialização do produto e qualquer coisa que não mostre o produto fazendo algo.
Dicas de gravação
- Use um ambiente de demonstração, não produção. Dados limpos, sem informações embaraçosas de clientes, estado confiável.
- Diminua a velocidade das interações intencionais. As pessoas acompanham melhor os movimentos do cursor quando você se move intencionalmente, e não na velocidade normal de trabalho.
- Grave em 2x a resolução alvo. Grave em 2880×1800 ou 1440×900 (Retina) e depois reduza a escala para entrega. Isso dá espaço para zoom e fica mais nítido.
- Oculte tudo o que for desnecessário. Feche notificações do Slack, esconda a barra de favoritos do navegador, use um perfil de navegador limpo. Distrações na gravação corroem a confiança.
- Capture mais do que usará. Grave fluxos de trabalho completos e corte na pós-produção. É mais rápido do que regravar porque você perdeu uma batida.
Narração vs. silencioso
Ambos funcionam. A escolha depende do contexto:
- Narração: Mais calorosa, mais explicativa, funciona melhor no YouTube e em páginas iniciais. Requer um ambiente de gravação limpo e boa qualidade de áudio. Áudio ruim é pior que nenhum áudio.
- Silencioso com sobreposições de texto: Funciona melhor em contextos de reprodução automática com som desligado (feeds sociais). Mais rápido de produzir. Requer rótulos claros na tela.
Se não tiver certeza: grave a demonstração em silêncio, adicione sobreposições de texto nos momentos-chave e depois decida se deve adicionar narração com base na plataforma.
Ferramentas
- Gravação de tela: Loom (rápido), Screen Studio (saída polida, bom para marketing), QuickTime (bruto), OBS (controle total)
- Edição de vídeo: CapCut (rápido, fácil), DaVinci Resolve (profissional, gratuito), Final Cut Pro, Adobe Premiere
- Design de movimento/animações de logotipo: After Effects, Motion (Mac), Jitter (baseado na web)
- Legendas/subtítulos: Descript (também bom para edição por transcrição), Captions app, Rev
- Vídeo programático: Remotion (baseado em React — veja seção abaixo)
Vídeo programático com Remotion
Para equipes que entregam rápido e não querem esperar por um designer de movimento para cada lançamento, o vídeo programático permite que você escreva componentes React e os renderize como arquivos MP4. O vídeo é código: versionado, parametrizado e iterável sem um editor de timeline.
Quando usar vídeo programático
Funciona bem para:
- Clipes de anúncio de lançamento (15-45 segundos) para redes sociais
- Vídeos de passo a passo do produto mostrando a interface em ação
- Reels de destaque de recursos com sobreposições de texto e capturas de tela
- Vídeos baseados em dados (comparações de benchmark, métricas de crescimento)
- Vídeos modelados que você reutilizará em lançamentos (basta trocar o conteúdo)
Menos adequado para:
- Vídeos de marca cinematográficos que exigem design de movimento complexo
- Vídeos narrativos do fundador com filmagens ao vivo
- Vídeos que precisam de ilustrações personalizadas extensas ou 3D
Para lançamentos Tier 1 importantes, você pode combinar abordagens: vídeo programático para clipes sociais e um designer de movimento profissional para o vídeo hero.
Configuração do Remotion
npx create-video@latest my-launch-video
cd my-launch-video
npm start # Abre o Remotion Studio para preview
Conceitos-chave:
- Composition: Um vídeo é um componente React com duração definida (em quadros) e taxa de quadros
- useCurrentFrame(): Hook que retorna o número do quadro atual — use-o para conduzir animações
- Sequence: Componente que desloca seus filhos no tempo — use-o para sequenciar cenas
- spring(): Utilitário de animação para movimento com sensação natural (suavização de entrada/saída)
- Assets: Imagens, capturas de tela e áudio vão na pasta
public/
Template de planejamento de cenas
Antes de escrever código, planeje o vídeo cena por cena:
| Campo | Descrição |
|---|---|
| Cena # | Número sequencial |
| Duração | Segundos (ex.: "3s") |
| Propósito | O que esta cena comunica (uma frase) |
| Conteúdo de texto | Texto exato que aparece na tela |
| Elementos visuais | Capturas de tela, ícones, trechos de código, diagramas |
| Estilo de animação | Aparecer gradualmente, deslizar da esquerda, máquina de escrever, aumentar escala, etc. |
| Transição de saída | Como esta cena sai (desaparecer, corte, deslizar) |
Padrões de código
Cenas sequenciadas:
<Sequence from={0} durationInFrames={90}>
<HookScene />
</Sequence>
<Sequence from={90} durationInFrames={120}>
<DemoScene />
</Sequence>
<Sequence from={210} durationInFrames={90}>
<CTAScene />
</Sequence>
Revelação de texto:
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 20], [0, 1], {
extrapolateRight: 'clamp',
});
return <h1 style={{ opacity }}>Sua proposta de valor principal aqui</h1>;
Fluxo de trabalho de iteração
- Planeje as cenas usando o template acima
- Colete os ativos — capturas de tela, logotipos, imagens do produto → pasta
public/ - Escreva ou solicite o primeiro rascunho — acerte a estrutura e o conteúdo
- Visualize no Studio — assista, anote problemas de tempo e visuais
- Itere — ajuste tempo, animação e conteúdo. Geralmente leva de 2 a 4 rodadas
- Renderize —
npx remotion render src/index.ts MyComposition out/video.mp4 - Verifique as especificações da plataforma — confirme se resolução e tamanho do arquivo funcionam para sua plataforma alvo
GIFs e loops curtos
GIFs são reproduzidos automaticamente na maioria das plataformas e são ideais para mostrar uma única interação — uma mudança de estado na interface, a saída de um comando CLI, uma resposta de API. São mais rápidos de produzir que vídeos e frequentemente mais eficazes para posts em redes sociais.
Quando usar GIF vs. vídeo
Use GIF quando:
- Todo o valor pode ser comunicado em 3-8 segundos
- Você está mostrando uma única interação na interface, não um fluxo de trabalho
- O ativo será incorporado em um tweet ou README onde a reprodução de vídeo é menos confiável
Use vídeo quando:
- O valor exige contexto (problema → solução)
- A interação leva mais de 8 segundos para ser demonstrada
- Você precisa de áudio
Gravando GIFs
- Capture em 2x, reduza a escala para a resolução alvo
- Mantenha abaixo de 5MB para desempenho na web (use redução de paleta ou menos quadros)
- Faça o loop perfeitamente — o estado inicial e final devem corresponder para que o loop não seja abrupto
- Opções de ferramentas: CleanShot X (recomendado para Mac), Kap, Giphy Capture, Gifski (para converter clipes de vídeo)
Otimizando o tamanho do arquivo GIF
- Reduza a paleta de cores (256 → 128 ou 64 cores para muitas gravações de interface)
- Diminua os quadros (30fps → 15fps raramente é perceptível em gravações de interface)
- Corte agressivamente — mostre apenas o que está mudando, não a tela inteira
- Converta para MP4 com reprodução automática/loop em vez de GIF quando a plataforma suportar (MP4 é ~10x menor que o GIF equivalente)
Capturas de tela
Capturas de tela são subutilizadas em lançamentos. Uma captura de tela bem composta com anotação clara comunica um recurso mais rápido que um parágrafo.
Composição
- Mostre o produto em um estado significativo — não uma tela vazia, não um estado de carregamento, não uma tela cheia de dados fictícios que dificultam a visualização dos recursos
- Use um ambiente limpo — navegador sem abas, modo escuro ou claro aplicado consistentemente, nenhum dado pessoal visível
- Destaque a área relevante — caixas de chamada, setas ou realces direcionam a atenção para o que importa
Ferramentas de anotação
- CleanShot X (Mac) — captura, anota e exporta em um fluxo
- Skitch — anotações simples
- Figma / Sketch — para fotos de produto mais polidas com estilo personalizado
Moldura do navegador
Para produtos web, use uma moldura do navegador para fazer as capturas de tela parecerem intencionais, e não brutas. Ferramentas como Screely, Browserframe ou templates personalizados no Figma adicionam uma sobreposição de cromo do navegador.
Múltiplas capturas de tela para grades de recursos
Páginas iniciais e galerias do Product Hunt geralmente precisam de 3-5 capturas de tela mostrando diferentes aspectos do produto. Planeje-as como um conjunto:
- Cada captura de tela mostra uma capacidade distinta
- Tratamento visual consistente (mesmo nível de zoom, mesmo tema do navegador, mesmo estilo de anotação)
- Conte uma progressão: entrada → ação principal → resultado
Checklist de ativos por nível
Nível 1
- Vídeo de demonstração (60-90 segundos, adequado para PH e página inicial)
- Corte curto para redes sociais (30-45 segundos da mesma gravação)
- 3-5 capturas de tela anotadas para a página inicial e galeria do PH
- 1-2 GIFs para posts em redes sociais (mostrando interações principais)
- Imagem Open Graph para post de blog e prévias de links de redes sociais
Nível 2
- 1-2 GIFs ou gravação de tela curta
- 2-3 capturas de tela para seção da página inicial
- Imagem Open Graph
Nível 3
- 1 captura de tela
- Opcional: GIF curto se a mudança for visual
Imagens Open Graph
Todo conteúdo que for compartilhado como link (post de blog, página inicial, entrada de changelog) deve ter uma imagem Open Graph (OG) personalizada. A imagem OG é o que aparece quando o link é colado no Twitter, Slack, iMessage ou LinkedIn.
- Tamanho: 1200×630px
- Conteúdo: Nome do produto + proposta de valor principal. Trate como um outdoor — legível em tamanho pequeno
- Consistência: Use um template para que todo o conteúdo de lançamento tenha uma aparência coesa
- Ferramentas: Template no Figma, Vercel OG (gerado por código), Bannerbear (automatizado)
Especificações de vídeo por plataforma
| Plataforma | Resolução | Duração máxima | Formato | Notas |
|---|---|---|---|---|
| X/Twitter | 1280×720 ou 1920×1080 | 2:20 | MP4 (H.264) | Reprodução automática com som desligado — adicione legendas |
| 1920×1080 | 10 min | MP4 (H.264) | Quadrado (1080×1080) funciona bem no feed | |
| Product Hunt | 1920×1080 | 90 seg | MP4 | Mantenha abaixo de 50MB |
| Hero do site | 1920×1080 | Sem limite | MP4/WebM | Considere loop de reprodução automática (sem áudio) |
Skills complementares
- launch-strategy — determina quais ativos são necessários para o nível de lançamento
- launch-tweet — os GIFs e vídeos vão no tweet (anexados, não linkados)
- launch-landing-page — o vídeo de demonstração e as capturas de tela vão na página
- launch-distribution — requisitos de formato por plataforma