serenakeyitan/launch-video-skill

launch-video

Gere um vídeo de lançamento de produto como código (Remotion → MP4). Este skill é uma biblioteca de cenas + um fluxo de trabalho, não um modelo fixo. Produtos diferentes contam histórias diferentes — a história de uma ferramenta CLI acontece em um terminal, a de um app SaaS em um navegador, a de um app móvel em um telefone, a de uma biblioteca em um editor. Você projeta o arco para ESTE produto primeiro, depois o monta a partir do palete de cenas. Não force um produto a se encaixar no formato do exemplo tdoc.

A regra inegociável

Projete o arco da história antes de tocar no código. Pergunte: o que este produto faz, quem é o usuário, qual é o único momento "aha"? Escreva uma lista de batidas (5–9 batidas, cada uma com duração em quadros a 24fps) e confirme-a com o usuário. Só então monte as cenas. Um vídeo de lançamento é uma história, não um tour de funcionalidades.

Fluxo de trabalho

1. Entenda o produto. O que é? Onde o usuário interage com ele (terminal / navegador / telefone / editor / misto)? Qual é o antes→depois? Qual é o momento que faz alguém querê-lo?
2. Escreva a lista de batidas. Cada batida: nome, o que está na tela, duração em quadros. Total ≈ 30–45s (720–1080 quadros). Confirme com o usuário via AskUserQuestion antes de construir.
3. Escolha cenas do palete (abaixo) por batida. A maioria dos vídeos usa 1–3 tipos de cena + uma saída opcional. Nem todo tipo é necessário.
4. Reúna assets. Capturas de tela reais > mockups. Coloque-as em <projeto>/public/. Recrie a UI como componentes nítidos apenas quando uma captura de tela seria de baixa resolução ou quando você precisa animá-la 1:1.
5. Estruture um projeto sob o repositório (copie examples/tdoc como esqueleto inicial — sua estrutura, não seu conteúdo) ou em um diretório irmão. Conecte uma única <Composition> cuja duração seja a soma das durações das batidas, com uma <Sequence> por batida.
6. Construa as batidas, depois adicione SFX (scripts/make-sfx.sh <public>), depois renderize, depois verifique visualmente cada batida alterada, itere.
7. Entregue o MP4 somente após o loop de verificação passar.

Palete de cenas (src/)

Importe da biblioteca; monte apenas o que a história precisa.

Cena	Use para	Props principais
Terminal	Ferramentas CLI, agentes, ferramentas de desenvolvimento — história em um shell	lines (prompt digitado, chamadas de ferramentas, resultados, alerta, url), spinner, title. Uma /slash-command inicial em um prompt digitado destaca-se automaticamente em negrito com cor de destaque.
BrowserWindow	Aplicações web, documentações, dashboards, SaaS	captura de tela/HTML como children, chrome="bar"|"none"
MobileFrame	Aplicativos móveis	moldura de telefone; captura de tela/UI como children
CodeEditor	Bibliotecas, SDKs — "escreva isto → obtenha aquilo"	linhas code, revelação digitada
Outro / LogoCard	Encerramento (opcional)	título/subtítulo, ou logotipo giratório + marca nominal
WaveBackground	Fundo calmo com marca atrás de qualquer janela	cores
Cursor	Clique em um artefato/link/botão	coordenadas from/to, clickAt
PixelPet	Um mascote amigável acima de uma janela	linhas de pixels crown/base, color; olhos balançam para cima/baixo (sem branco dos olhos — fica limpo em tamanhos pequenos)
Caption	Legenda de uma linha sob uma janela	at, text

Estas são independentes. Um lançamento de biblioteca pode ser apenas CodeEditor + Terminal + LogoCard. Um lançamento SaaS pode ser BrowserWindow + Outro.

Regras de ritmo e transição (aprendidas da maneira difícil)

• a 24fps. Durações das batidas em quadros. Mantenha o total enxuto: encurte paradas estáticas, não a ação. Se uma batida é principalmente um quadro congelado, encurte-a.
• Transições nítidas. Cross-dissolves de cena para cena ≤ 5 quadros; fade-ins de batida ≈ 4 quadros. Uma janela "abrindo" (escala 0,35→1 em ~12 quadros) funciona melhor do que uma escala lenta de 30+ quadros.
• Uma batida contínua quando possível. Mescle "digitar → clicar → resultado" em uma única Sequence para que não haja flash/corte no meio da ação.
• O cursor deve viajar e pressionar. Não teletransporte; anime até o alvo, reduza a escala ao clicar. Cada clique recebe um SFX de clique no quadro de pressão.
• Sem cromo duplicado. Se uma captura de tela já tem um cabeçalho, use chrome="none". Não empilhe uma barra de janela sobre uma já embutida.
• Moldura de cartão de marca. Reutilize um cartão de marca (logotipo/mascote + nome do produto + proposta de valor em uma linha) como TANTO o quadro de abertura quanto o de encerramento (≈1,5–2,5s cada). Ele emoldura a história e é mais barato do que um cartão final animado separado. Acione todos os deslocamentos de batida a partir de um acumulador at() para que adicionar o cartão de introdução desloque automaticamente tudo (incluindo SFX) a jusante.

Regras de áudio

• Execute scripts/make-sfx.sh <projeto>/public para sintetizar sfx-typing.mp3 + sfx-click.mp3. Estes são artefatos gerados ignorados pelo git — sempre (re)gere-os; nunca confie que eles estarão presentes após um clone novo.
• O SFX de digitação toca apenas enquanto um humano está digitando (um prompt, um comentário). Nunca sobre saída de autostream/agente.
• O SFX de clique toca no quadro de pressão de cada clique do cursor (link, botão, artefato). Corresponda o <Sequence from> ao quadro do clique.
• Camadas de áudio com <Audio src={staticFile(...)} volume={0.3}> dentro de <Sequence>s curtas com escopo nas janelas de quadro exatas.

Loop de verificação (obrigatório antes da entrega)

O proxy de imagem que lê PNGs é ruidoso para OCR — confie em medições de pixel (Python/PIL/numpy), não em descrições de texto, para alinhamento/cor.

1. scripts/verify.sh <entry> <CompId> <public-dir> <frame> ... captura quadros estáticos + imprime janelas de áudio. Passe o public/ do projeto como <public-dir> (ou - se não houver) — mesma regra de --public-dir do render; quadros estáticos 404 caso contrário.
2. Leia cada quadro estático. Para cada batida alterada, confirme: conteúdo correto, nada cortado por overflow:hidden, transições funcionando, cursor no alvo, janelas de SFX alinhadas com os quadros visíveis de clique/digitação.
3. Corrija → re-renderize → re-verifique. Não relate "concluído" da intenção; verifique os quadros reais.

Renderização

npx remotion render <entry> <CompId> out/<name>.mp4 \
  --public-dir=<projeto>/public
# still:  npx remotion still <entry> <CompId> out/x.png --frame=N \
#           --public-dir=<projeto>/public

<entry> é o src/index.ts do projeto (chama registerRoot). Sempre passe --public-dir quando a entrada estiver em um subdiretório — caso contrário, staticFile() resolve contra o public/ da raiz do repositório e os assets geram 404.

Exemplo de referência

examples/tdoc/ é o exemplo trabalhado canônico (≈39s): uma introdução de cartão de marca, um engenheiro digita um prompt /tdoc … para um agente (Terminal, slash-command destacada automaticamente), obtém um link, o documento abre (BrowserWindow), colegas comentam, o agente lança v2, então o mesmo cartão de marca encerra — com SFX de digitação/clique com escopo na digitação real e um PixelPet cujos olhos balançam. Leia para ver a biblioteca em uso; não copie sua história. Construa o próprio arco do novo produto.