Filme de lançamento em código

Vídeo de lançamento

Faça um vídeo de lançamento como um pequeno estúdio de motion design faria. Primeiro, decida o que o vídeo deve fazer e planeje-o batida por batida. Depois, construa cada quadro em código, para que qualquer parte possa ser alterada e renderizada novamente em um minuto.

O resultado é um curta-metragem do produto real: sua interface reconstruída em HTML, movendo-se em uma grade de batidas, cortada para música, a 60 qps com motion blur.

O que você precisa

• Node 18+, ffmpeg com libx264, Python 3.9+. Os scripts Python usam apenas a biblioteca padrão.
• Playwright com Chromium, instalado na pasta do vídeo: npm i -D playwright && npx playwright install chromium.
• As pastas scripts/ e assets/template.html desta habilidade.

Nos comandos, $SKILL é a pasta desta habilidade (por exemplo, ~/.claude/skills/launch-video). Defina-a uma vez no shell: SKILL=~/.claude/skills/launch-video. Execute os comandos a partir da pasta do vídeo.

O processo

Trabalhe através das fases em ordem. Cada uma escreve algo que a próxima usa.

Fase	Saída	Leitura
1. Briefing	brief.md	references/1-brief.md
2. Formato	formato, duração, proporções, plataformas (no briefing)	references/2-formats.md
3. História	beatmap.md	references/3-story.md
4. Visual	notas de estilo (no briefing)	references/4-look-and-motion.md
5. Construção	film.html: 4 imagens-chave para aprovação do usuário, depois o filme completo	references/5-build.md, assets/template.html
6. Música e som	opções de música, pontos de corte, MP4 mixado	references/6-music-and-sound.md
7. Renderização e verificação	o MP4 e os resultados da verificação	references/7-render-and-check.md
8. Entrega	arquivos finais, cortes reduzidos, notas de postagem	references/8-platforms.md

Leia uma referência quando chegar à sua fase, não todas de uma vez.

1. Briefing

Descubra o que é o produto, para quem é o vídeo, a única coisa que eles devem lembrar e o momento mágico: o ponto em que o produto faz visivelmente seu trabalho. Leia o repositório, o site e a documentação primeiro. Depois, faça ao usuário no máximo 5 perguntas em um lote. Para qualquer outra coisa, escreva seu padrão nas perguntas em aberto do briefing e continue. Escreva brief.md.

2. Formato

Escolha o tipo de vídeo a partir do tipo de produto, objetivo e plataforma: teaser, filme de lançamento, demonstração, explicador, lançamento de funcionalidade, vídeo do fundador, demo de hackathon. Defina a duração e as proporções. Um filme de lançamento de 15 a 30 segundos para X e LinkedIn é o padrão usual para software. Quando os conselhos entrarem em conflito, as palavras do usuário vencem, depois a plataforma principal. Outras plataformas recebem cortes reduzidos.

3. História

Escreva o mapa de batidas em um tempo fixo; 120 BPM dá uma batida de 0,5s. Para cada batida, diz o que acontece, de qual elemento anterior ela cresce, para onde a câmera vai, qual texto aparece e o que se ouve. Coloque o momento mágico no drop da música.

4. Visual

Use a própria marca do produto: suas cores, fontes, logotipo, ícones e componentes. Leia os design tokens e o CSS. Sem uma marca, use um estilo 2D claro: tela branca quente, interface quase preta, uma cor de destaque, uma fonte sans-serif limpa, uma fonte mono para código. Torne o texto grande o suficiente para ser lido em um celular.

5. Construção

Copie $SKILL/assets/template.html para video/film.html. Mantenha seu mecanismo, substitua seu filme. Cada estilo vem do tempo dentro de seek(t): sem transições CSS, timers ou estado entre quadros. As formas se transformam umas nas outras em vez de desaparecer.

Construa primeiro os 4 momentos-chave: o gancho, o momento mágico, a recompensa e o cartão final. Renderize-os como imagens estáticas e mostre-os ao usuário com o mapa de batidas. Obtenha a aprovação deles aqui: mudar uma frase é barato, mudar uma cena finalizada não é. Depois, construa o resto.

6. Música e som

Encontre 3-4 músicas candidatas próximas ao tempo do filme, cada uma com uma parte calma e um drop claro. Peça antes de baixar qualquer coisa. Meça cada música com scripts/beats.py, veja scripts/loudness_plot.py e confirme o drop com beats.py --around. Renderize o filme na velocidade = BPM da música / BPM do filme para que as batidas se alinhem. Em seguida, corte cada música com scripts/mux.py, para que seu drop caia no momento mágico. Deixe o usuário escolher. Adicione efeitos sonoros reais para cliques, whooshes e pops, colocados pelo seu ponto mais alto.

7. Renderização e verificação

Renderize as imagens estáticas primeiro, depois o vídeo: node $SKILL/scripts/render.mjs film.html --out out/film.mp4. Depois, verifique e mostre ao usuário a prova:

• scripts/pops.py encontra quadros que piscam por um único quadro. Deve reportar 0.
• scripts/contact_sheet.py --video mostra quadros a cada 0,5s. Olhe cada miniatura para enquadramento, texto cortado e sobreposições.
• Verifique o tempo do drop e a sonoridade (-14 LUFS).
• Assista-o sem som no tamanho de um celular.

8. Entrega

Exporte o mestre e os cortes reduzidos que cada plataforma precisa, como 16:9, 1:1 ou 4:5, e 9:16. Dê ao usuário os arquivos, o texto da postagem com a afirmação e o link, e o que verificar antes de postar. Em seguida, anote como um diretor ("o meio arrasta", "o zoom deve acertar o drop") e mude apenas o que a anotação diz.

Regras de trabalho

• Produto real, afirmações verdadeiras. Use o nome real do produto, interface, palavras e formatos de dados. Os dados de amostra devem ser plausíveis e somar-se às cenas: se um pedido de $120 chegar, o total aumenta em $120. Nunca mostre um recurso que não existe ou um número que você não pode comprovar. Diga "beta" ou "testnet" quando aplicável.
• Uma mensagem por vídeo. Se o briefing tiver três mensagens, faça três vídeos ou escolha um.
• Peça antes de baixar música, efeitos sonoros ou filmagens. Nomeie o arquivo, a fonte, sua licença e seu tamanho.
• Verifique seu próprio trabalho antes de mostrá-lo. As verificações da fase 7 capturam a maioria dos problemas antes que o usuário os veja. Relate os resultados com números, não com "parece bom".
• Mostre opções onde o gosto decide. Música especialmente: corte 3-4 versões e deixe o usuário escolher.
• Copie estrutura, não arte. Um vídeo de referência pode emprestar seu ritmo e estrutura de batidas. Não copie seus personagens, arte, música ou marca.

Pasta do vídeo

Mantenha o vídeo fora da árvore de origem do produto, a menos que o usuário queira estar lá.

video/
  brief.md        beatmap.md
  film.html       assets/      (logotipo, fontes, ícones, capturas de tela)
  music/          sfx/         (downloads, com suas notas de licença)
  stills/         out/         (renderizações; descartáveis)
  package.json    node_modules/ (Playwright)

Scripts

Script	Faz
scripts/render.mjs	Imagens estáticas, ou o MP4 completo com motion blur, workers paralelos e --speed
scripts/contact_sheet.py	Organiza imagens estáticas ou quadros de vídeo em folhas que você pode olhar em uma imagem
scripts/pops.py	Encontra falhas de quadro único
scripts/beats.py	Tempo da música, grade de batidas, candidatos a drop; --around para uma olhada de perto
scripts/loudness_plot.py	Desenha a sonoridade das músicas com a grade e candidatos a drop
scripts/mux.py	Corta a música para o hit, coloca efeitos sonoros pelo seu pico, define a sonoridade

Execute qualquer script sem argumentos para ver seu uso.