adminosinthub-bit/Claude-Video-Skill

HTML → vídeo: múltiplas variantes, escolha da melhor, montagem final

Claude é mais forte em design com HTML/CSS. Por isso fazemos o vídeo assim: escrevemos a animação em HTML, renderizamos em vídeo, vemos o resultado com os próprios olhos (quadros), comparamos as variantes e melhoramos.

Requisitos

• node + playwright (com Chromium), ffmpeg. Verificação: bash scripts/check-env.sh.

Início rápido

cp references/template-scenes.html work/<nome>/v1.html     # template no motor de cenas
node scripts/render.mjs work/<nome>/v1.html --preset vertical-preview --duration 20 --out work/<nome>/v1.mp4

• references/engine.js — motor de cenas: fundo, legendas com destaque (*palavra*), progresso, transições, easing (E.pop, E.type, E.set).
• references/parts.js — detalhes: mascote P.bot, ícones P.icon, janela macOS P.win, balões de chat.
• references/design-notes.md — o que torna um clipe 'vivo' (história, gancho, ritmo, legendas). Leia antes de escrever as variantes.
• Exemplos de clipes prontos: examples/ (claude-ad — 16:9; chatgpt-ad — 9:16, 25 s; duolingo-ad — 9:16, 40 s, 60 fps com história e demonstrações; claude-self-ad — 9:16, 39 s, 60 fps, propaganda do próprio Claude com meta-twist).
• Tamanho do arquivo: clipe de 40 s / 60 fps ≈ 10 MB; se precisar de limite menor — --fps 30 ou recodifique ffmpeg -i in.mp4 -crf 24 out.mp4.

Princípios principais de qualidade

1. Mostre, não conte. Qualquer afirmação no clipe é uma cena-prova, não um texto.

   Afirmação	O que mostrar
   "Escreve código"	digita-se o prompt, depois o código aparece linha por linha
   "Explica de forma clara"	erro real (she drink), destaque e regra "+s", coruja com explicação
   "Ensina na prática"	dedo toca nas palavras, frase se monta, painel verde "Correto!"
   "Sequência de 346 dias"	contador 1→346 com chama, calendário preenche em onda, notificação, parabéns com confete
   "Jogo"	tabela da liga, onde a linha do herói sobe para o 1º lugar, e +XP

2. Descreva o que está acontecendo. Em cada cena, duas camadas de texto: um pequeno título-identificador em cima (<div class="kick">: "Lição", "Liga") e uma legenda embaixo com a palavra-chave destacada (cap: 'Analisa *erros* de forma clara'). Frases completas são melhores que slogans de uma palavra.

3. Suavidade. O final é renderizado em 60 fps. Tudo vive continuamente: aparições com mola (E.spring, E.pop), zoom lento da câmera (cam: [1, 1.05]), balanço do mascote, piscar (P.blink), toques com ondulação (P.touch), contadores (E.count), transições circle/wipe/left. Não deixe quadros estáticos por mais de ~0,5 s.

4. História: gancho (dor/humor) → demonstrações → "melhores qualidades" → clímax (recompensa/resultado) → chamada para ação. 30–45 s para publicidade.

5. Três variantes — três ideias diferentes, não três colorizações (ex.: "contador de sequência", "aula ao vivo", "diálogo com mascote"). Em seguida, o final é montado a partir das melhores cenas de todas as variantes.

Processo

1. Briefing

Esclareça (ou escolha valores razoáveis padrão): tema/texto, público-alvo, duração (publicidade 20–30 s, história até 60 s), formato (padrão vertical 1080×1920 para Reels/Shorts/TikTok; 1920×1080 e 1080×1080 — sob demanda), fps (30), estilo, cores/fontes. Monte um storyboard curto: gancho → problema → solução → demo → chamada para ação. Para publicidade de marca, não use logotipos oficiais — desenhe seu próprio mascote.

2. Três ou mais variantes DIFERENTES

Crie uma pasta de trabalho work/<nome>/ e dentro dela v1.html, v2.html, v3.html (pode ser mais). As variantes devem diferir em conceito, não em detalhes. Por exemplo: (a) história com mascote, (b) demo de produto com cards, (c) cortes rápidos com tipografia grande. Composição, paleta, ritmo diferentes. Cada arquivo é um HTML autocontido (sem carregamentos externos; fontes — sistêmicas ou embutidas). Regras de animação — em references/animation-contract.md; template inicial — references/template.html.

3. Renderização de cada variante

Variantes — em resolução de pré-visualização (rápido), final — em resolução total:

node scripts/render.mjs work/<nome>/v1.html --out work/<nome>/v1.mp4 --preset vertical-preview --duration 21
node scripts/render.mjs work/<nome>/final.html --out work/<nome>/final.mp4 --preset vertical --fps 60 --duration 40 [--audio music.mp3]

A renderização é determinística e paralela (por número de núcleos): o tempo é definido manualmente em cada quadro, sem travamentos ou pulos. --from 5 --to 9 renderiza apenas o fragmento. Um quadro sem vídeo: node scripts/frame.mjs v1.html 3.5,7 work/<nome>/frames --width 540 --height 960.

4. Análise — obrigatório olhar

bash scripts/contact-sheet.sh work/<nome>/v1.mp4 work/<nome>/v1-sheet.png 12

Abra *-sheet.png e quadros individuais via Read (imagens são lidas visualmente). Avalie segundo references/rubric.md (soma de 8 critérios com 5 pontos cada): legibilidade, hierarquia, ritmo, suavidade, equilíbrio, coesão, aderência ao briefing. Para cada variante, anote: pontuação por critério, o que funcionou melhor, o que funcionou pior. Não avalie pelo código — apenas pelo que é visível nos quadros. Se algo não estiver claro — gere quadros mais densos ou nos momentos certos: bash scripts/contact-sheet.sh <mp4> <png> 12 <start_s> <end_s>.

5. Escolha do líder e síntese

• Selecione a melhor variante pela pontuação total.
• Monte uma lista de "empréstimos": soluções bem-sucedidas específicas das outras variantes (ex.: "tipografia do v2", "animação de entrada do v3", "paleta do v1").
• Crie final.html com base no líder e aplique essas correções. Corrija os pontos fracos do líder.

6. Iteração e verificação do final

Renderize final.mp4, faça novamente o contact sheet, compare com o líder. Se o final não for melhor que o líder segundo a rubrica — corrija e repita (máximo 3 iterações). Em seguida, mostre ao usuário o resultado: caminho para final.mp4, tabela resumo das pontuações das variantes e lista do que foi emprestado de onde.

7. Áudio (opcional)

ffmpeg -i final.mp4 -i music.mp3 -shortest -c:v copy -c:a aac final-audio.mp4

Regras

• Não copie mascotes oficiais ou logotipos de marcas: desenhe seu próprio personagem, nome da marca — apenas em texto.
• Não pule o passo 4: a decisão é tomada com base nos quadros vistos, não em suposições.
• Todos os artefatos devem ser colocados em work/ (no .gitignore); no repositório, commite apenas a skill e os exemplos.
• Se Chromium/ffmpeg não estiverem disponíveis — diga isso diretamente, não simule o resultado.