product-video

product-video — Crie Vídeos de Apresentação de Produtos com Código

Recrie a tela do produto em HTML, escreva as animações de forma que "só o tempo determine", e filme quadro a quadro em um navegador headless para gerar um vídeo. A música e os efeitos sonoros também são compostos no navegador. Você só precisa de Node.js, ffmpeg e Chromium.

Esta skill inclui um template funcional (assets/template/). Ele já vem com ferramentas de filmagem, áudio e inspeção, além de um vídeo de amostra de 30 segundos. Em vez de criar a mecânica do zero, duplique o template e substitua o conteúdo.

Premissa Importante: Você Não Pode Ver Nem Ouvir

Você não pode reproduzir o vídeo para verificar. Portanto, a qualidade deste trabalho depende de quantas vezes você exporta imagens estáticas e as observa e de inspeções baseadas em números. Se você simplesmente escrever o código e presumir que "deve estar certo", defeitos como texto cortado, sobreposições e oscilações momentâneas certamente permanecerão. A cada cena escrita, observe-a lado a lado, corrija e só então prossiga. Como você não pode ouvir o áudio, apresente os valores medidos e solicite que outra pessoa confirme a percepção auditiva.

Regras (com Justificativas)

1. A aparência depende apenas do tempo. As animações devem ser agendadas com tl.* especificando "em qual segundo" ou calculadas a partir de t em onFrame((t) => …). Não use animações/transições CSS, setTimeout, Math.random() ou a hora atual. Como a imagem é a mesma para qualquer momento para o qual você pular, você pode renderizar em paralelo e refazer apenas parte dela.
2. Escreva e veja. Após escrever uma cena, use --sheet para organizá-la e abra a imagem para inspecionar. Examine as transições das cenas em incrementos de 0,1 a 0,2 segundos. Não avance para a próxima cena sem ver.
3. Não mova componentes com texto lentamente. Como o navegador alinha o texto aos pixels, movê-lo gradualmente por vários segundos fará o texto tremer. Mova contêineres e títulos em cerca de 1 segundo e mova o conteúdo depois que eles pararem. Apenas a luz de fundo pode se mover lentamente.
4. Use tl.in para entrada e tl.out / tl.hide para remoção. tl.fromTo mantém o valor original antes do horário de início, portanto, se usado para entrada, o elemento aparecerá brevemente antes de começar.
5. Escreva o CSS da tela do produto sob uma classe raiz da tela. (Por exemplo, .ui-chat .row.) Usar nomes curtos como .row ou .title sem contexto pode colidir com componentes do template ou outras telas, causando defeitos difíceis de detectar.
6. Garanta a legibilidade. O vídeo será visto em smartphones. Títulos devem ter pelo menos 68 px; o corpo do texto dentro dos contêineres deve ter pelo menos 18 px na tela (tamanho da fonte × escala). Para telas pequenas, coloque o contêiner grande ou aproxime-se da área que deseja mostrar.
7. Não distorça os fatos. Não inclua nada que não possa ser verificado nos materiais de referência. Não mostre algo como "possível" se não for. Não inclua números não confirmados, comparações com concorrentes ou depoimentos. Não desenhe logotipos de outras empresas; escreva os nomes como texto. No cartão final, inclua uma observação pequena de que a tela foi recriada (brand.fine).
8. Posicione os limites das cenas e movimentos grandes no início dos compassos. O momento em que um logotipo se encaixa, uma cena muda ou o cartão final aparece deve coincidir com um "golpe" da música (hit: true). Isso sozinho faz o todo parecer coeso.
9. Não altere o volume ou timbre. Os valores em kit/audio.js foram medidos e equilibrados. Alterá-los sem ouvir resultará em desequilíbrio. Você pode alterar as seções da música (plan.js) e os sinais dos efeitos sonoros.
10. Não escreva "confirmei" para algo que não mediu. Como você não ouviu o áudio, declare isso explicitamente no relatório.

Fluxo de Trabalho

Cada etapa termina com uma verificação. Não pule verificações (corrigir depois será mais caro).

Este é um processo longo. Se o contexto for comprimido e você esquecer os detalhes, releia este arquivo e os references/ dessa etapa. Deixe a estrutura decidida (tabela de cenas) como comentários no topo de src/js/plan.js para que, se você for interrompido, possa retomar de onde parou.

0. Preparação

node "${CLAUDE_SKILL_DIR}/scripts/new.mjs" video     # Duplica o template em video/ (ajuste o local conforme a solicitação)
cd video && npm install --ignore-scripts
node render.mjs --sheet 0:29:2                       # Se a lista do vídeo de amostra aparecer em out/sheet.png, a preparação está concluída

${CLAUDE_SKILL_DIR} é a pasta onde este SKILL.md está localizado. Se você vir o texto literal, substitua-o pelo caminho absoluto da pasta que contém este arquivo.

Se o navegador não for encontrado, execute npx playwright install chromium. Se esse ambiente não estiver disponível, use o Chrome ou Edge instalado (defina a variável de ambiente CHROME_CHANNEL=chrome ou CHROME_CHANNEL=msedge). Se o ffmpeg não estiver disponível, peça para instalá-lo.

Primeiro, examine o exemplo src/js/scenes.js e o out/sheet.png exportado. Ver os exemplos é mais rápido do que ler explicações sobre como usar os componentes.

1. Pesquise

Todos os fatos apresentados no vídeo devem ter uma fonte. Leia READMEs, documentação, diretrizes de design (cores, fontes, espaçamento) e a redação real das telas. Em seguida, anote:

• Quem tem o problema, qual é o problema e como o produto o resolve (em uma frase)
• Os recursos que deseja mostrar e a evidência para eles (qual parte de qual material)
• A redação autêntica que aparece nas telas (nomes de botões, status, notificações). Redação inventada será facilmente notada por quem conhece o produto real
• A aparência real da tela. Se houver capturas de tela ou maquetes, abra-as e copie o layout, cores, espaçamento e tamanhos de texto. Se não houver, deduza isso do código da UI (componentes, estilos, tokens de design)
• Ambientes suportados, restrições e premissas (para não exagerar)

Se não estiver especificado na solicitação, tome as seguintes decisões e prossiga, documentando-as no relatório: duração (60-90 segundos; 30 segundos para solicitações curtas), idioma (idioma da tela e dos materiais) e uso de cenas claras versus escuras. Pergunte ao solicitante apenas quando não for possível determinar as cores da marca, logotipo ou fonte a partir dos materiais.

2. Decida a Estrutura

Crie uma tabela de cenas antes de começar a construir. Os tipos de estrutura, como escrever títulos e como determinar o tempo estão em references/direction.md. Leia-o.

• Transmita uma mensagem por cena. O título de cada cena também deve ser único. Não faça uma lista de recursos
• Comece com o "problema", não com o produto
• Posicione os limites das cenas no início dos compassos (incrementos de 2 segundos para 120 BPM)
• Em src/js/plan.js, escreva T (hora de início da cena) e music (seções da música) de acordo com esta tabela

Mostre a estrutura decidida ao solicitante resumidamente. Você pode começar a construir sem esperar a resposta (se a direção estiver errada, você descobrirá mais cedo).

3. Prepare a Marca e a Tela

• src/js/brand.js: nome, slogan, cores, fontes, logotipo. Os valores devem ser obtidos do produto real
• src/css/app.css e HTML em scenes.js: recriação da tela do produto. Combine cores, dimensões e redação com o real
• Antes de animar, use --shot no estado parado e compare com o real. Se não estiver semelhante aqui, não ficará semelhante quando animado

A tela deve ser recriada em HTML, não com capturas de tela. Isso permite que cada componente seja animado individualmente, fique nítido quando ampliado e tenha suas cores ajustadas por cena.

4. Crie as Cenas Uma a Uma

Em scenes.js, escreva uma função para cada cena. Os componentes e o estilo de escrita estão em references/kit.md. Leia-o antes de começar a escrever.

Para cada cena, repita:

node render.mjs --sheet 14:26:1        # Organiza os quadros da cena em intervalos de 1 segundo → abra out/sheet.png e veja
node render.mjs --shot 16.6,22.5       # Veja momentos específicos em tamanho real → out/shots/
node render.mjs --sheet 13.4:14.6:0.1 --cols 7 --w 420   # Examine as transições da cena em incrementos de 0,1-0,2 segundos
node render.mjs --lint                 # Verifique automaticamente se há texto cortado, sobreposições e texto muito pequeno

Pontos de verificação: O texto está cortado? Há sobreposições? O tamanho é legível? O espaçamento está desequilibrado? Fica claro o que olhar? Há componentes da cena anterior que não foram removidos?

Como diretriz, veja cada cena pelo menos 3 vezes (logo após escrever, após corrigir e na transição de entrada/saída). Se algo não estiver claro na visão geral, use --shot para inspecionar em tamanho real.

5. Adicione o Som

A música é composta automaticamente a partir da sequência de seções em plan.js. Os efeitos sonoros são acionados pelos cue("tipo", tempo) que você empilha ao construir as cenas. Consulte references/audio.md para obter detalhes.

node render.mjs --audio                # out/audio-master.wav. Exibe o volume e o pico.

6. Faça uma Prévia Completa e Inspecione

node render.mjs                        # Renderiza o vídeo completo em tamanho real (alguns minutos para um vídeo de 30 segundos). out/video.mp4
node tools/qa.mjs                      # Verifica formato, volume, oscilações de quadro, quedas de quadro, quadros pretos e silêncio
node render.mjs --sheet 0:90:1.5 --cols 6     # Visualiza o vídeo inteiro (ajuste os segundos para a duração do vídeo)

Corrija todos os ✗. Consulte references/qa.md para obter explicações e correções comuns.

Agora vem o acabamento. A primeira versão geralmente está "ok, mas sem graça". Ao examinar a visão geral completa, anote pelo menos 5 áreas para melhorar antes de corrigir. Procure:

• Mais de 2 segundos sem nenhuma ação
• Espaços em branco grandes, imagens deslocadas para um lado, áreas vazias dentro dos contêineres (por exemplo, metade inferior do telefone em branco)
• Momentos em que não está claro o que causou o que (a correspondência entre "pressionou" e "mudou" não é visível)
• Redação, cor ou layout diferente do real

Se você não conseguir encontrar 5 itens, seu intervalo de inspeção é muito grande. Veja novamente em intervalos de 1 segundo e em intervalos de 0,25 segundos para áreas de preocupação.

7. Exporte a Versão Final

node render.mjs --scale 2 --keep-frames     # Renderiza em 2x e reduz a escala (3-4x o tempo de 1x). Execute em segundo plano
node tools/qa.mjs
node tools/extras.mjs web                   # Versão leve com menos de 10 MB (para colocar em chats ou GitHub)
node tools/extras.mjs poster 15.9           # Imagem estática para título (no momento que melhor transmite o conteúdo)

Renderizar em 2x suaviza os contornos e reduz o tremor do texto pela metade. Se parar no meio, use --resume --reuse-audio para continuar de onde parou. Se você corrigiu apenas parte, remova os quadros correspondentes (em out/frames/) e use --resume para renderizar apenas essa parte novamente.

8. Relate

Escreva de forma breve e honesta (o modelo está no final de references/qa.md):

• O que foi feito (local do arquivo, duração, resolução) e um resumo da estrutura
• O que foi verificado (resultados da inspeção) e o que ainda não foi verificado. Como você não ouviu o áudio, escreva: "Dentro dos limites com base nos números. Solicito verificação auditiva."
• Decisões que você tomou (duração, idioma, tratamento de cores, etc.) e o que não pôde incluir por falta de fontes
• Que a tela foi recriada. Como solicitar uma correção

Quando Solicitarem uma Correção

Não recomece do zero.

1. Leia references/kit.md e o código da parte a ser corrigida. Títulos e texto da tela estão em scenes.js, o texto do cartão final está em brand.js, o cronograma e a música estão em plan.js, e a aparência da tela está em app.css
2. Corrija
3. Inspecione a cena corrigida e suas transições de entrada/saída com --shot / --sheet. Execute --lint também
4. Se você alterou a duração da cena ou as seções musicais, verifique se node render.mjs --audio não produz avisos
5. Se a exportação do vídeo for solicitada, siga as etapas 6-7. Caso contrário, relate o que foi verificado e pergunte se deve exportar

Executar node render.mjs sem opções inicia a renderização completa (leva vários minutos). Para apenas inspecionar, use --shot, --sheet ou --lint. Uso: node render.mjs --help.

Critérios de Qualidade

Antes de entregar, verifique você mesmo:

• O enredo é compreensível apenas com os títulos, mesmo sem som
• Nos primeiros 3 segundos, o problema apresentado parece "algo que me diz respeito"
• Em cada cena, há um único ponto focal (não move dois lugares ao mesmo tempo)
• Uma pessoa que conhece o produto não achará a tela ou a redação estranhas
• Não há ✗ em --lint ou tools/qa.mjs
• Você inspecionou todas as transições de cena em incrementos de 0,1-0,2 segundos

Materiais de Referência

Arquivo	Conteúdo	Quando Ler
references/direction.md	Tipos de estrutura, cronograma, como escrever títulos, como posicionar e animar telas	Antes de decidir a estrutura (obrigatório)
references/kit.md	Funções dos arquivos do template e como usar o motor e os componentes	Antes de escrever as cenas (obrigatório)
references/audio.md	Seções da música, lista de sinais de efeitos sonoros, como medir	Ao adicionar som
references/qa.md	Como ler os resultados da inspeção, defeitos comuns e correções, modelo de relatório	Durante a prévia e a versão final
assets/template/src/js/scenes.js	Vídeo de amostra, exemplos de uso de componentes	Primeiro