every-app/video-skills

Teaser vídeo

Um teaser mostra um recurso em alguns compassos, cada um com um foco claro, ao som de música. Cada tela é uma captura de tela real do produto; o movimento vem da câmera, de linhas recortadas dessas capturas que se encaixam em seus próprios lugares, e dos cortes que acompanham a música. O vídeo inteiro é código (uma página HTML e uma tabela de tempo, renderizados pelo HyperFrames), portanto uma nova captura, uma legenda alterada ou um clipe de música diferente é apenas uma reexecução.

A pessoa dirige o gosto e iterará várias vezes. Mostre contact sheets antes das renderizações completas, mantenha cada renderização e anote o que mudou e por quê. Comece com os padrões em references/taste.md: eles são o que uma primeira rodada de revisões convergiu.

Configuração

• Node 22+ com npx (HyperFrames roda através de npx [email protected]; nada para instalar), ffmpeg no PATH (HyperFrames precisa dele para snapshots e renderizações também), uv (as ferramentas Python declaram suas próprias dependências) e Playwright com Chromium no projeto do produto para capturas. As renderizações carregam GSAP e a fonte Inter de uma CDN, portanto precisam de conexão de rede.
• SK=<diretório desta skill>/scripts.
• Trabalhe em uma pasta fora de quaisquer arquivos rastreados de repositório (um .logs/<vídeo>/ ignorado pelo git, ou uma pasta temporária):

<work>/
  assets/<tema>/    capturas e boxes.json, por passada de captura
  capture/           os scripts de captura para este produto
  video/             index.html e timeline.js (copiados do exemplo); assets/ contém as capturas, ícone da marca, música
  NOTES.md           cada versão e por que mudou, comandos de reconstrução

1. Briefing

Confirme em uma breve troca, oferecendo padrões:

• Duração: 10 s a menos que solicitado de outra forma. Sob um limite rígido, corte compassos, nunca acelere o movimento.
• Os compassos: três ou quatro, cada um uma tarefa em uma tela (digitar uma URL, revisar o que foi encontrado, ver o resultado, a marca). Cada compasso recebe uma legenda de duas ou três palavras, sem números.
• Dados de exemplo que se leem rapidamente: um site conhecido, para que os resultados (nomes de concorrentes, favicons) sejam reconhecíveis.
• Aparência: os tokens de tema do próprio produto (modo escuro é um bom padrão para um teaser) e seu ícone de marca real, tirado de seu site ativo, não uma marca que você desenhe.
• Música: o arquivo, e se qualquer trecho de 10 s serve (veja a etapa 5).
• Qual branch ou worktree tem a UI mais nova para cada tela. Verifique se está desatualizada em relação ao remoto antes de capturar.

2. Captura

Capturas de tela reais a 1440x900, 2x, com $SK/capture.mjs (o mesmo auxiliar que narrated-video): quadros de digitação para qualquer coisa digitada, capturas altas (2400 px) para qualquer coisa que a câmera percorra verticalmente, caixas medidas para cada elemento que uma cena enquadra, recorta linhas ou clica. Passe { colorScheme: 'dark' } para cap.page() para modo escuro. Nunca desenhe UI ou edite pixels. Detalhes, incluindo quadros de animação congelada e captura de um estado de carregamento sem pagar pela requisição: references/capture.md. Olhe para cada captura antes de usá-la.

3. Composição

Copie examples/openseo-ai-visibility/video (index.html, timeline.js) para a pasta de trabalho, coloque as capturas, o ícone da marca e a música em video/assets/, e reescreva timeline.js: a tabela de tempo, legendas, paleta, caminhos e alturas das capturas, as caixas medidas, as chaves de câmera de cada cena e o ponteiro. O index.html constrói cada cena a partir desse arquivo: linhas são recortadas de sua captura usando as caixas medidas. Como as peças funcionam e os números que importam: references/composition.md.

4. Rascunho e visualização

cd video
npx --yes [email protected] lint                                           # deve reportar 0 erros
npx --yes [email protected] snapshot --at 0,1.2,2.4,2.6,3.4,4.4,6.0,8.2,9.5 --no-end   # em snapshots/

Snapshots levam segundos, então use-os em vez de renderizações de rascunho. Faça snapshot de cada início de cena, clique, entrada de legenda e o meio de cada dissolução, e examine-os (cada execução também escreve contact sheets): um foco por quadro e centralizado, a legenda clara da coisa em foco, sem borda de página em branco enquanto a página está plana, sem linha ainda faltando no final de uma revelação. Em seguida, verifique um quadro em resolução total de cada cena para garantir texto nítido.

5. Música

uv run $SK/beats.py song.mp3                     # andamento, volume por segundo, cada batida
uv run $SK/beats.py song.mp3 --window 51.9 10    # batidas de um clipe candidato em tempo de vídeo

Escolha o clipe, escreva seu início no elemento <audio> em index.html e seus tempos de batida na tabela de tempo, e mova os cortes para eles: o clique principal no drop, cada mudança de cena em uma batida, o logotipo na batida mais forte. Escolhendo o clipe e mapeando-o: references/music-sync.md.

6. Renderização e verificação

npx --yes [email protected] render -o renders/<vídeo>-vN.mp4 --fps 60 --crf 14 \
  --video-frame-format png --experimental-fast-capture=false            # cerca de 15 s para 10 s de vídeo
uv run $SK/verify-sync.py renders/<vídeo>-vN.mp4 <tempos de batida planejados...>   # cada batida dentro de um quadro; sai com 1 se não
uv run $SK/sheet.py renders/<vídeo>-vN.mp4 renders/sheet-vN.png <tempos...>

Nomeie as renderizações por versão e mantenha todas; a pessoa compara. Um still para compartilhar (imagem social, miniatura) é um snapshot 4K de um momento escolhido: npx --yes [email protected] snapshot --at 7.3 --no-end --zoom 0,0,1920,1080 --zoom-scale 2 -o stills escreve um PNG 3840x2160.

7. Revisão e iteração

Forneça o caminho do mp4 (e como abri-lo), os compassos e seus tempos, e qualquer coisa que difira da solicitação. Registre cada rodada em NOTES.md. A primeira versão do exemplo trabalhado levou sete rodadas; o que mudou em cada uma está em examples/openseo-ai-visibility/NOTES.md.

Regras rígidas

• Apenas telas reais. Uma revelação de linha pode brevemente cobrir linhas com o fundo da própria tabela (amostrado da captura) enquanto as linhas reais pousam por cima; uma vez que pousaram, o quadro é a captura.
• Verifique capturas por segredos e dados pessoais (chaves, e-mails, nomes de outras pessoas, URLs localhost) antes de renderizar.
• A música e as capturas permanecem na máquina da pessoa; não publique nada sem ser solicitado.
• Restaure qualquer arquivo rastreado que construir ou visualizar o produto regenere em seu repositório.

Os erros que mais custam tempo estão em references/gotchas.md.