Ameliawampler/launch-video

Vídeo de lançamento

Você é o diretor e o contador de histórias do produto. O editor vem depois. Cada cena deve conquistar seu lugar, movendo o espectador um passo mais perto de "Entendi, quero isso".

O vídeo é uma página web com um único relógio. window.seek(T) desenha o segundo global T. Playwright captura screenshots a 30fps, e ffmpeg codifica os quadros juntamente com uma narração e uma faixa musical. Nada depende do tempo real, então qualquer quadro pode ser re-renderizado independentemente. Isso permite corrigir uma cena sem tocar nas outras.

Os arquivos iniciais estão em template/ e scripts/, e o README explica como executá-los.

1. História primeiro (antes de qualquer pixel)

Escreva o roteiro como frases-chave A, B, C e assim por diante. Cada frase se torna uma legenda e um compasso. Use esta estrutura de quatro compassos:

1. Gancho (0–8s). Nomeie a dor nas palavras do espectador. Sem tela de logotipo, sem "apresentando". Os primeiros 8 segundos decidem se alguém assiste ao resto.
2. Produto em ação (8–45s). Um problema, depois o recurso que o resolve, depois o resultado. Mostre o produto real fazendo a coisa real: digitando um prompt, obtendo uma resposta, publicando. Evite um desfile de recursos e mostre no máximo 4–5 capacidades.
3. Por que é diferente (45–75s). Mostre a história da arquitetura ou integrações, idealmente com um diagrama que se move. Explique quem faz o quê. Por exemplo: "Nós fazemos X; Stripe cuida de pagamentos e impostos."
4. Oferta + encerramento (últimos 10–15s). Dê o preço ou plano e termine com uma linha de marca. Faça essa última linha curta e memorável.

Mire em 80–95s no total. Um corte de anúncio de 30s e um corte 9:16 podem ser feitos posteriormente a partir da mesma linha do tempo.

2. Regras visuais (restrições rígidas)

• Sem cromo do navegador. Nunca mostre abas, barras de URL ou favoritos. Reconstrua telas de produto como cartões HTML limpos, usando a gravação real apenas como referência, e anonimize todos os dados.
• Imagens do produto flutuam. Dê a elas cantos arredondados (16–18px) e sombras suaves e longas. Mantenha um preenchimento generoso para que o cartão nunca preencha o quadro; no máximo cerca de 75% da largura.
• Sem palavras sobre imagens do produto. Explicações vão em chamadas ao lado da interface ou em legendas abaixo dela, nunca sobre a captura de tela.
• A cor de destaque aparece apenas em fundos escuros. Nunca a use em uma imagem do produto. Se a linha de marca precisar do destaque, coloque o cartão final sobre a cor escura da marca.
• Não torne tudo em um único tom. Use um ou dois toques complementares, por exemplo um vermelho como #C8323C em um ponto de alerta ou um roxo para uma marca parceira, com moderação.
• Foque uma área de cada vez. Para destacar um recurso, o cursor se move até lá, clica duas vezes, a câmera aproxima, e o resto da interface fica cinza ou desfocado.
• Chamadas são pequenas pílulas brancas com um ponto colorido, ancoradas a elementos DOM reais. Elas aparecem com um leve overshoot, no máximo três na tela, e desaparecem antes da cena sair.
• Fundo: manchas de cores da marca, desfocadas e em movimento lento, mais 6% de granulação. Deve ser calmo e nunca competir com o produto. Não copie um design de banner literalmente.

3. Vocabulário de movimento

• Transição de cena = desfoque-morph. A cena entra na escala 0.92 com um desfoque de 18px desaparecendo até 0, suavizado em cerca de 0.7s. Ela sai com escala +5%, desfoque 18px e opacidade até 0 em 0.55s. Sobreponha as cenas em cerca de 0.1s. Evite transições chamativas como varreduras de pixel ou puxadas de tecido; elas parecem baratas.
• Push-in lento de 3–5% em cada cena, para que nada nunca fique estático.
• Entradas de elementos usam ease-out em 300–650ms, escalonadas de 80–150ms (stg()).
• Cursor: movimentos suaves com easing, animação de pressionamento ao clicar (escala 0.82 por 120ms), e pausas de cerca de 0.3s antes de clicar.
• Introdução estilo dock (0–2.5s): um dock do macOS com efeito frost, com ícones reais de aplicativos da Apple (pegue de um kit de UI iOS/macOS, não desenhados à mão) e o ícone do seu aplicativo no meio. O slot do aplicativo cresce, a câmera aproxima, o cursor clica, o ícone balança com um ponto de execução, e a cena faz desfoque-morph para dentro do aplicativo.
• Cadência: deixe cada compasso respirar. Deixe 0.8–2s de pausa visual após uma frase da narração antes da próxima ideia. Se parecer apressado, está. Re-espace a narração antes de cortar os visuais.

4. Áudio

• Narração: gere a narração com o clone de voz do fundador no ElevenLabs, uma única gravação do roteiro inteiro. Transcreva-a (Scribe) para obter tempos no nível da palavra, depois re-espace: corte nos silêncios entre frases e insira silêncio extra onde um compasso precisar de espaço. Escreva os tempos de início e fim das frases em timeline.js como TL={A:[inicio,fim,texto],...}, e ancore toda animação a TL em vez de segundos fixos.
• Para mudar uma linha, gere apenas aquela linha, insira-a em um silêncio e atualize sua entrada TL.
• Música: uma faixa instrumental. Verifique se a transcrição está vazia para garantir que não tenha vocais. Misture-a no volume 0.3 com ducking sidechain sob a narração, e diminua o volume nos últimos 3–4s (veja scripts/mix.sh).

5. Extraindo uma animação do seu site

Animações de site baseadas em rolagem podem ser capturadas quadro a quadro (scripts/capture-scroll.js):

• Esconda a navegação, banners de cookies e o texto da seção para que apenas o visual permaneça.
• Capture densamente, usando passos de rolagem de 4px. Um passo de 16px reproduzido em 10s resulta em cerca de 6fps e parece travado.
• No canvas, misture quadros adjacentes por índice fracionário para suavidade sub-quadro.
• Se você dividir uma captura entre navegadores paralelos, aqueça cada um rolando da mesma posição inicial primeiro. Animações de rolagem são stateful, então um carregamento novo no meio da página pula nas costuras.
• Verifique costuras escaneando a diferença absoluta média entre quadros consecutivos. Picos bem acima da mediana indicam um salto.

6. Pipeline

1. Escreva o roteiro, depois gere a narração, depois transcreva-a, re-espace e escreva timeline.js.
2. Construa cenas em scenes.js. Cada uma é S({tIn,tOut,s0,push,ox,oy,build(){...},update(T){...}}).
3. Verifique stills com node scripts/preview.js page.html out.png T ... nos compassos-chave.
4. Renderize com scripts/render-parallel.sh. Re-renderize apenas os intervalos de tempo que você alterou.
5. Misture com scripts/mix.sh, depois codifique com scripts/encode.sh (libx264 crf 17, yuv420p, AAC 192k, faststart).
6. QA: extraia quadros do mp4 codificado a cada cena e verifique a linha de marca, as chamadas e as costuras. Ouça uma vez em velocidade máxima antes de enviar.

7. Problemas aprendidos da maneira mais difícil

• Execute renderizações como um único job de fundo monitorado que espera seus workers. Jobs nohup destacados são mortos e deixam quadros parciais para trás.
• Pré-carregar centenas de imagens grandes por página pode travar o Chromium com "Target crashed". Se uma página pré-carregar uma grande sequência de imagens, use no máximo 2 workers paralelos. Sempre verifique novamente a contagem de quadros e os logs dos workers antes de codificar, porque um worker travado silenciosamente deixa quadros antigos para trás.
• Nomes de classe podem colidir com o CSS do aplicativo. Por exemplo, .dark na folha de estilo do aplicativo fez um cartão ter 1080px de altura, então prefixe classes de cena ou use nomes incomuns.
• Chamadas devem ser limitadas ao tempo de saída da cena, ou elas persistem sobre a próxima cena.
• Não exagere em alegações técnicas nas chamadas. Escreva "Sem ida e volta de API · decidido em processo", não "0 ms".
• Ao alterar a linha final, também remova sua legenda se o cartão final já mostrar as mesmas palavras.