csm-kr/vídeo-de-movimento-de-referência

Vídeo de movimento de referência

O filme é HTML, e sua lista de deixa é a partitura. Cada evento visível registra uma deixa ao lado da constante que move a imagem; cada trecho do filme é uma seção nomeada por seu propósito. Uma paleta transforma essas deixa em música que atinge cada quadro e encena a história: sem ritmo enquanto o problema é apresentado, um groove quando o produto funciona, uma respiração antes da recompensa, bateria para fora quando o produto para deliberadamente, uma parada total no logotipo.

Exemplos práticos: examples/claude-code/ (filmes de lançamento, explicadores e demonstrações executáveis em um palco compartilhado, cada um com uma paleta diferente), examples/moments-v2.html (anúncio de 36 s em plano-sequência), examples/ads/ (anúncios Moments: bateria, orquestral, violino). As composições Moments precisam de ativos do produto e ajustes de caminho; são referências, não demonstrações prontas para renderização.

Regras que decidiram filmes anteriores

1. Ajuste primeiro. A música deve combinar com o humor do produto e encenar o fluxo da imagem. Em um teste A/B cego (KIBO v4.5, 30 s, mesma imagem, mesma intensidade sonora), o proprietário escolheu a trilha composta para a imagem sobre uma faixa eletropop livre que estava casada com a batida e melhor em todas as métricas de máquina: "a segunda não se encaixa". Compor é o padrão; uma faixa de biblioteca apenas quando o usuário escolhe a faixa (references/music.md).
2. Um som em cada deixa, em seu quadro. Cortes caem na batida, palavras estouram na contrabatida, a maior revelação recebe o maior golpe.
3. Apenas imagens reais e saída real. Gráficos em movimento emolduram e explicam; nunca fingem um recurso. Rotule acelerações e cortes de espera na tela ("App ao vivo · 1×", "⋯ corte de espera", "▶▶ acelerado"), marque vozes sintéticas, coloque uma fonte sob cada número.
4. Voz primeiro. Quando há narração ou diálogo, o fundo sai do caminho (references/music.md, "Mix").
5. As portas da máquina são necessárias, não suficientes. Sincronia, intensidade sonora e STT podem todas passar em música que não se encaixa. A pessoa decide por audição cega.
6. Pergunte, depois decida. Pergunte apenas o que o pedido e o repositório não podem responder, com uma resposta recomendada primeiro; decida o resto e diga isso.

Fluxo de trabalho

0. Verificação de configuração (antes de qualquer outra coisa)

Relate cada linha como ok ou ausente, com a correção; nunca imprima o valor de uma chave.

• Google Chrome (o renderizador usa o Chrome instalado: o Chromium incluído não consegue decodificar H.264), ffmpeg (com rubberband), Node ≥ 20 com npm ci --prefix engine --ignore-scripts a partir do diretório da skill.
• Python 3.12 com numpy, scipy, soundfile, pytest (uv venv --python 3.12 .venv, depois uv pip install --python .venv/bin/python -r requirements.txt a partir do diretório da skill).
• Amostras: execute bash engine/fetch_samples.sh core (VSCO-2-CE CC0 percussão, metais, baquetas; SFX licenciados Pixabay), depois bash engine/fetch_samples.sh piano para soft_pulse (Salamander Grand Piano, CC-BY 3.0; credite quando usado). As paletas recorrem à síntese quando uma amostra está faltando, mas a queda do piano pode falhar na verificação de equilíbrio da seção; use ambos os conjuntos para o conjunto completo de testes.
• Um provedor de narração e suas credenciais somente se a narração for solicitada (references/voice.md). Nenhuma chave de API é necessária para os três exemplos executáveis. Clientes de narração, transcrição e captura de aplicativo não estão incluídos; use ferramentas disponíveis e verifique a documentação atual do provedor escolhido quando necessário.
• Espaço livre: as renderizações canalizam quadros (sem despejos PNG), mas as bibliotecas de amostras e as tomadas precisam de alguns GB.

1. Entrevista de admissão → resumo de uma página (aprovado antes do planejamento)

Pergunte apenas pelo contexto que o pedido e o repositório não fornecem. Use a ferramenta de perguntas do ambiente, ou chat simples se nenhuma estiver disponível; agrupe perguntas relacionadas, coloque a opção recomendada primeiro e reutilize respostas já dadas:

1. Propósito: que tipo de filme (lançamento, explicador de conceito, demonstração interativa, vinheta de caso de uso, manifesto), quem assiste, onde vai (YouTube, concurso, redes sociais), o que devem fazer depois, o prazo final e quaisquer critérios de julgamento.
2. Mensagem e prova: a única frase a ser lembrada, três provas com suas fontes, o que não deve ser dito.
3. Forma e som: duração e formatos (16:9, 9:16, cortes), idiomas para tela, legendas e voz; links de referência musical ou um clima (ofereça as paletas na tabela abaixo que se encaixam no propósito, mais "Tenho links de referência"); narração ou não, e qual voz.
4. Fontes e regras: o aplicativo real pode ser gravado (URL, login, dados de demonstração, dois dispositivos), pessoas aparecerão, ativos da marca, regras do concurso, IP de terceiros. Leia o resumo de volta e obtenha um sim. Escreva-o em video/BRIEF.md.

2. Gênero e referências

Escolha o modelo de batida do gênero e os alvos medidos em references/genres.md (16 referências oficiais em cinco gêneros, com durações de tomada, palavras por cartão, ritmo da narração, quando o produto e o logotipo aparecem). Assista às referências escolhidas com /watch; meça sua música com engine/ref-analyze.py. Para um anúncio em plano-sequência, leia references/transitions.md e references/youtube-analysis.md.

3. Plano → video/PLAN.md (aprovado antes da construção)

Uma folha de batida na grade BPM (100 BPM = 0,6 s por batida, 18 quadros a 30 fps; coloque a queda em um downbeat): tempo | compassos | cena | texto na tela | filmagem | tipo de seção | deixa | voz. Nomeie o objeto herói (um elemento do produto que viaja pelo filme e aterrissa no logotipo), o quadro persistente e cada afirmação com seu arquivo de evidência.

4. Capture telas reais

references/capture.md: quando o produto precisar, tomadas ao vivo de dois dispositivos a partir do aplicativo real (quadros de screencast CDP com carimbos de tempo de parede, uma voz de cliente sintética tocada no microfone do telefone, a resposta da IA tocada na página), convertido para MP4 de taxa de quadros constante em um único relógio, depois reproduzido no filme através de um mapa de tempo ([[t do filme, t da tomada], ...]: passos iguais são 1×, uma execução plana é uma pausa, dois pontos a 1 ms de distância são um corte). Use a ferramenta de navegador disponível no ambiente; references/aside-capture.md fornece uma implementação específica do Aside. Saída de terminal ou ferramenta: redigite a saída real (as amostras do Claude Code), nunca a invente.

5. Narração (opcional)

references/voice.md: use o provedor TTS escolhido ou gravações fornecidas, ouça as tomadas, escolha pela precisão da palavra e ritmo (155-170 palavras por minuto é um ponto de partida para uma demonstração em inglês), e ajuste o texto ou as pausas antes de esticar a fala. Limpe na fonte e escreva cada linha para um orçamento de palavras para seu espaço.

6. Construa a composição

• Um único #stage fixo de 1920×1080; todo o movimento de UMA linha do tempo GSAP pausada; digitação, contadores, o ponto herói e vídeos tomados avaliados apenas a partir do tempo em __seek(t). Nunca animações CSS, setTimeout ou requestAnimationFrame para movimento. fromTo precisa de immediateRender: false.
• Contrato para o mecanismo: window.__duration, __seek(t), __ready, __cues, __sections, __bpm, __T. Comece a partir de examples/claude-code/stage.js (deixa, seções, estouros de palavra, digitação, contadores, cartões de terminal, o ponto herói) ou examples/moments-v2.html (câmera virtual sobre telas reais).
• Registre uma deixa ao lado de cada constante que torna algo visível; marque cada trecho com uma seção por propósito (tabela abaixo).
• Legendas: reserve um espaço legível para falas e mantenha outro conteúdo longe dele; identifique falantes sintéticos e seu provedor, adicione traduções quando o resumo exigir e escreva o arquivo .srt a partir da mesma lista de legendas.
• Verifique imagens estáticas antes de qualquer renderização completa: node engine/stills.mjs index.html out/stills 1.7 3.6 ....

7. Música: componha para a imagem

node engine/cues.mjs > cues.json                      # duração, bpm, T, deixa, seções
python engine/compose.py cues.json score.wav --palette bright_demo [--narr narr.js --narr-root .]

compose.py escreve a partitura, mixa as vozes com prioridade de voz, masteriza para -14 LUFS (pico verdadeiro abaixo de -1 dBTP) e executa a porta de sincronia por conta própria: uma deixa sem início audível dentro de 33 ms recebe o som de ênfase da paleta e o mix é refeito (no máximo duas vezes); o relatório lista o que foi adicionado. Ouça antes de escolher: renderize o mesmo trecho de 15-30 s com duas ou três paletas adequadas e deixe a pessoa escolher cegamente. Detalhes, regras de mixagem e o caminho da faixa de biblioteca: references/music.md.

8. Renderize

node engine/render.mjs index.html out/film.mp4 --fps 30 --audio score.wav (quadros JPEG q95 canalizados para x264: cerca de 10× mais rápido que PNG; flags do YouTube: High profile, GOP de metade da taxa de quadros, tags BT.709, AAC 48 kHz 384 kbps). Intervalos curtos para rascunhos: --from 10 --to 16. O Chrome carrega cerca de 18 vídeos distintos em uma página; use imagens estáticas para tomadas que não se movem.

9. Portas (todas nos arquivos finais)

references/qa.md. Verifique a sincronia no MP4 final (python engine/synccheck.py out/film.mp4 cues.json: cada deixa dentro de 33 ms, lida com sua linha de base de chance), intensidade sonora, pico verdadeiro, imagens estáticas, transições e o julgamento auditivo da pessoa. Aplique verificações de voz, legenda, QR e revisão apenas quando esses recursos existirem, usando ferramentas disponíveis no ambiente; não relate verificações não executadas como aprovadas. Um teste de compreensão em nuvem é opcional e requer a escolha do usuário de enviar o filme para esse serviço.

10. Entregue

Entregue a duração e o formato do resumo, normalmente H.264 MP4, um arquivo .srt acompanhante quando as legendas estiverem presentes, e uma miniatura ou cortes se solicitado. O palco e o renderizador internos são 1920×1080; outra proporção de aspecto requer adaptação explícita, não uma flag do renderizador. Relate as verificações realmente executadas e suas evidências. Publicar é uma ação separada, a menos que o usuário já a tenha solicitado.

Seções, por propósito

tipo	use onde a imagem...	a música
intro	apresenta o problema, antes do produto agir	sem ritmo: apenas um pad, os sons de deixa
tease	acorda o produto, o primeiro pedido	um groove esparso (sem backbeat, percussão superior ou melodia)
build	está prestes a apresentar um resultado; o preenchimento antes de uma reentrada	um crescendo até o final da seção
groove	mostra o produto em funcionamento (e 0.5-1.2)	o groove completo na energia e
light	carrega uma linha densa ou um cartão cheio de texto	o groove sem sua figura melódica
muffled	apresenta um fato sério, uma estatística, um problema	o groove com filtro passa-baixa, abrindo-se para a próxima seção
breath	segura por uma batida antes da recompensa	quase silêncio; apenas o som do objeto herói soa
stop	mostra o produto deliberadamente não agindo (uma parada de segurança, um limite)	bateria para fora, um pad sustentado
end	é o cartão final	silêncio
riser (sobreposição)	sobe para um pouso	um riser que termina no final da seção

Tipos de deixa que toda paleta responde: drop (a recompensa), reentry, final (o logotipo, depois uma parada total), break (uma parada começa), cut (big para um capítulo), tap, tapTouch, pop, word, chip, node, num, count, fill, bar, key (digitação), dot (o som do próprio objeto herói).

Paletas (engine/palettes/)

paleta	adequa-se	som	origem
bright_demo	demonstrações interativas, apps amigáveis de consumo ou SaaS, guiado por voz	pop em Fá maior a 100 BPM: bumbo forte, palma e estalo, shaker e tamborim, marimba (amostras VSCO ou sintetizadas), baixo vibrante, pad arejado, som de herói de gota d'água	KIBO v4.5 (A2-bright), escolha do proprietário; venceu o teste A/B cego
drums_launch	filmes de lançamento e anúncios, revelações de produto, guiado por música	kit ao vivo em Ré menor a 100 BPM: bumbo VSCO, caixa e fantasmas, pratos, congas, cowbell, baixo sincopado, skank de guitarra abafada, stabs de trompete e trompa	Anúncio de bateria de 50 s do Moments (após o filme do MacBook Air M5 da Apple), estilo favorito do proprietário
soft_pulse	explicadores de conceito, diagramas, filmes com muita narração	Dó maior a 96 BPM: piano amostrado, sons de deixa de marimba afinada, um kit suave, baixo e pad; camadas entram com a energia e as notas de deixa sobem conforme um diagrama é construído	para examples/claude-code/explainer

Ainda como scripts independentes, a serem portados para a interface de paleta: piano e sinos (engine/score.py, Moments v2), banda (engine/score_band.py, um promo B2B), orquestral e violino solo (examples/ads/orch, examples/ads/violin). Para adicionar uma paleta, siga engine/palettes/__init__.py e adicione seu nome a tests/test_compose.py: os testes provam que ela encena a gramática de seções (sem bumbo na introdução, um silêncio de respiração e cartão final, bateria para fora na parada, cada deixa ouvida, -14 LUFS).

Arquivos

• engine/: render.mjs, cues.mjs, stills.mjs, compose.py + palettes/, audio.py (barramentos, sampler, sala), synccheck.py, beatmap.py e bedmix.py (o caminho da faixa de biblioteca), ref-analyze.py, music-analyze.py, fetch_samples.sh.
• references/: genres.md, music.md, voice.md, capture.md, qa.md, transitions.md, youtube-analysis.md, aside-capture.md, ads/.
• tests/: python -m pytest -q tests/ (mapa de batida, mix de biblioteca, porta de sincronia, gramática de seções em cada paleta).

Restrições do resumo e submissão

• Use a duração, idiomas, proporção de aspecto e destino solicitados. Para um concurso, leia suas regras reais e verifique a duração com ffprobe; não herde os limites de um concurso anterior.
• Mostre filmagens reais do produto ou saída real para afirmações de recursos e respeite as permissões de marca e ativos do usuário. Identifique amostras não oficiais sobre outro produto, como as amostras do Claude Code fazem.
• Prepare entregas locais primeiro. Faça upload apenas quando o usuário tiver autorizado o destino e a visibilidade.