pedro-cmyks/explainer-video-skill

Vídeo explicativo, estilo próprio

Cada vídeo compartilha a mesma aparência e a mesma linguagem de movimento, inicialmente construída para um explicador de CRM. A referência de ouro é reference/desk-crm-explainer.html (84,5 s, 9 cenas, um produto fictício chamado Desk CRM) e sua grade de contato reference/contact.png. Em caso de dúvida, abra a referência e copie o padrão.

Arquivos neste skill:

Caminho	O que é
templates/explainer-template.html	Comece aqui. Kit de ajuda completo com 3 cenas de exemplo (título, cards com clique do cursor, encerramento).
templates/apply-theme.mjs	Aplica um tema de themes/ no HTML do vídeo (--theme studio --html explainer.html, --list). Execute no local.
themes/*.json	Aparência e som por tema (house, studio, ember, tide): cores, gradientes, fonte, raio do card, marca do logotipo, tom musical, progressão, tempo, arpejo. house é o padrão.
templates/render.mjs	Controlador de quadros do Playwright canalizado para o ffmpeg. Vídeo, pôster, folha de contato, imagens estáticas. Execute no local, nunca copiado.
templates/compose.py	Trilha musical numpy mais efeitos sonoros sincronizados com os tempos locais da cena, masterizados e multiplexados. Copie-o por vídeo.
templates/voiceover.sh	Narração opcional do say no macOS, com redução de volume sob a música. Execute no local com argumentos.
checklist.md	Lista de verificação de crítica. Cada item deve ser aprovado antes da entrega.
reference/	O HTML de referência e sua folha de contato. Nunca edite.
examples/tidy-tasks/	Um vídeo curto finalizado (20 s) construído a partir do template: HTML, seu compose.py e folha de contato.

Configuração, uma vez por máquina: npm install e npx playwright install chromium na pasta do skill (ela tem um package.json), além de ffmpeg e Python 3 com numpy. render.mjs explica o que está faltando quando não consegue iniciar.

A aparência

Uma linguagem de movimento, várias aparências. Tudo abaixo descreve o tema padrão, house. Um tema altera os tokens da paleta, os gradientes, a fonte, o raio do card, a marca do logotipo e a música; nunca altera o movimento, o cursor, as legendas ou a lista de verificação. O mesmo tema com as mesmas cenas gera o mesmo vídeo, quadro a quadro. Os temas estão em themes/*.json (house, studio, ember, tide); node $SK/apply-theme.mjs --list os mostra, e --theme <nome> --html explainer.html aplica um no bloco THEME no topo do HTML. compose.py lê as configurações de música desse mesmo bloco. O briefing nomeia o tema; sem um, use house. Para um novo tema, copie um json, altere os tokens, mantenha gr, am e rd reconhecíveis como verde, âmbar e vermelho, escolha uma fonte que exista na máquina que renderiza, e verifique a folha de contato quanto ao contraste antes de usá-la. Tema por cena (opcional): cole mais objetos de tema em THEMES e dê a uma cena theme: 'studio'. Paleta, gradientes e raio do card se transformam durante o crossfade de 1 s; fonte e marca do logotipo mudam no limite; a música permanece a do primeiro tema. Use quando o vídeo for sobre a variedade em si; um tema é o caso normal.

Palco: SVG 1920x1080, fonte 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif (fonte do tema).

Fundo, três camadas, nunca alterado dentro de um tema:

• gradiente radial centralizado em 50% / 30%, r 75%: #172638 -> #111b26 (60%) -> #0f1720
• grade de pontos: padrão de 40 px, r 1.6 pontos #22303f com 70% de opacidade
• faixa de legenda: parte inferior de 200 px (y 880..1080) desbotando para #0b121a com 90%

Tokens da paleta (C no template, mantenha os nomes):

Token	Hex	Uso
bg	#0f1720	página, alvo de fade para preto
s1	#141d27	superfície do card
s2	#1b2733	linhas, encartes, painéis internos
bd	#2a3a4b	bordas, linhas de grade, pontos vazios
tx	#e6edf3	texto primário
mu	#a0b1c5	texto secundário, cabeçalhos de coluna
bl	#3b82f6	ação, seleção, pacotes, explosão do cursor, palavra de destaque da marca
gr	#2fca73	concluído, ativo, ganho, sucesso
am	#f59e0b	atenção, quente, outlier
rd	#ef4444	perda ou erro somente
off	#3a4a5c	ponto de status inativo
paper / ink	#f3f6fa / #1b2733	páginas de documento claras
light blue	#93c5fd, core #dbeafe	laço, destaques, núcleo do pacote
click spark	#ffd166	raios alternados da explosão de clique

Gradientes: logoG azul #3b82f6 para verde #2fca73 (diagonal) para o bloco do logotipo e barra de sublinhado; hotG âmbar para vermelho para barras "quentes"; blueBar #2563eb para #3b82f6; areaG verde 38% a 0 sob gráficos.

Formas:

• Card: raio 26, preenchimento s1, borda bd de 2 px, sombra dy 16, blur 20, preto 42% (card()).
• Linha: raio 14..18, preenchimento s2, altura 52..80, espaçamento 64..96 px.
• Chip: pílula completa, altura 40, cor com preenchimento de 16%, rótulo 24 px / 600 na cor (chip()).
• Botão primário: raio 22, altura 84, bl sólido, branco 34 px / 700 rótulo, brilho suave pulsando até o clique.
• Sombra pequena para ícones e pílulas: dy 8, blur 8, preto 45% (#shs).
• Janela do aplicativo (referência dashboard()): barra superior de 66 px em s2 com pontos de luz de tráfego r 8 (rd, am, gr a 80%), barra lateral de 214 px em #111922, itens de navegação com 48 de altura e raio 14, item ativo bl a 20%, blocos de KPI com raio 18.
• Ponto de status r 14; anel de avatar 4 px mais um halo de 25%; cadeado de lock().
• Insígnia da marca: logotipo 46 px mais nome 28 / 700 em (56, 40), 85% de opacidade, exibida da cena 2 até o encerramento.

Escala de tipo (px / peso): marca nominativa 132 / 700 (encerramento 96), tagline 58 / 500 mu, linha de fechamento 56 / 600, legenda 50 / 600, números grandes 52..64 / 700 tabular, títulos de card 34..40 / 700, texto de linha 26..28 / 600, rótulos e chips 24 / 600, nada abaixo de 22. Espaçamento entre letras da marca nominativa -1%.

Regras de composição:

• O conteúdo vive em y 120..860 e x 140..1780. A faixa de legenda e o canto da insígnia da marca permanecem limpos. Isso inclui o cursor em repouso: mantenha sua ponta em y <= 800 (a seta atinge cerca de 75 px abaixo da ponta).
• Qualquer coisa dimensionada ao texto (traços, sublinhados, caixas de destaque, pílulas) obtém sua largura de textW(str, size, weight), nunca uma constante adivinhada.
• Nunca deixe dois terços do quadro vazios. Quando o conteúdo se dividir entre esquerda e direita, conecte o meio com linhas de fluxo, pacotes ou um leque de páginas. Desloque um grupo de cena inteiro (G(s, {x: SX})) para recentralizar.
• Uma ideia por cena. No máximo dois cards lado a lado mais um card de detalhes.
• Os dados são sempre fictícios: Cliente A, Northwind, Maple Ridge, Bluebird, Harbor Point, ACC 01.

Linguagem de movimento

Kit de easing (no template): E cúbico in out (padrão para tudo), EO cúbico out (assentamento), EB back out com ~10% de overshoot (pops: cards, chips, emblemas, ícones), esine para caminhos desenhados, fadeIO(t, a, b, 0.35) para opacidade do cursor, ease out quíntuplo 1 - (1 - x)^5 para contadores. Determinismo: rng(seed) apenas, nunca Math.random ou relógio de parede.

Entradas:

• Cards: fade em 0.5 s mais subida de 20 px em 0.6 s, ou escala mix(0.92, 1, EB) em 0.7 s.
• Linhas de lista: espaçamento de 0.08..0.12 s, deslizamento de x -20 / -30 ou y +16, 0.5 s cada.
• Pops: EB em 0.5..0.7 s. Emblemas escalam de 0.7 -> 1.
• Marca nominativa: wipe recortado abrindo do centro em 0.8 s com uma subida de 34 px; a marca do logotipo desenha com pathLength.

Kit do cursor (drawCursor, curPos):

• Caminho da seta branca ARROW, contorno #0b1118 de 3.4 px, sombra projetada dx 4 dy 7 blur 4 a 50%, escala base 1.1.
• keys: [[t, x, y], ...] em segundos locais, (x, y) é a ponta da seta. O deslizamento usa cúbico in out mais um arco lateral de 12% da distância (máx 110 px). A inclinação segue a velocidade horizontal (0.35 graus por px, máx 14 graus).
• Deslizamento típico de 0.7..1.5 s. Entrada fora do quadro em (1880, 1080) cerca de 1.5 s na cena.
• Chegue pelo menos 0.15 s antes do clique e posicione-se exatamente no centro do controle.
• Clique: squash x +16% e y -22% atingindo o pico no clique (janela de 0.34 s começando 0.1 s antes), depois uma explosão de 0.6 s: anel azul r 8 -> 54 afinando 6 -> 1 px, mais 8 raios alternando branco / #ffd166.
• O controle clicado afunda com press() para escala 0.93 e seu pulso de brilho para.
• Após a ação, deslize para um ponto de descanso tranquilo (entre os cards, por exemplo (1010, 800)) e segure. Desapareça com a cena.
• trail adiciona um cometa azul de 12 pontos enquanto desenha; pos substitui as chaves para caminhos personalizados (o laço).

Movimentos característicos (cena de referência para copiar):

• Laço: o cursor desenha uma elipse oscilante com esine, tracejada #93c5fd 5 px (16 12, fluindo), fecha sólida com um flash de brilho de 0.35 s e preenchimento de 7%, depois os ícones voam ao longo de caminhos curvos para um quadro fantasma que se solidifica na janela do aplicativo (sBefore).
• Pacotes: ponto brilhante (r 22 brilho mais núcleo r 12 #dbeafe) com uma cauda de cometa de 6 pontos em uma curva S, cúbico in out em 1.2..1.45 s, linha guia tracejada fluindo a 24 px/s, remetente pisca azul, anel verde na chegada (packet(), sClose).
• Pontos de status: cinza -> verde com uma explosão de anel (r 14 -> 40, 0.6 s) e um pop de 1.25x, depois brilho respiratório 0.25 + 0.2 sin(3t). Aviso: âmbar, anel repetindo a cada 1.3 s, tremor curto (statusDot(), sStatus).
• Gráficos desenham: pathFrom revela a linha em 1.5..3.7 s, 6..7 px verde, preenchimento areaG, ponto principal brilhante (r 18 brilho mais r 10 branco). Barras crescem do zero espaçadas 0.18 s. Células de mapa de calor surgem espaçadas (sAlgos, sHistory).
• Contadores: contagem regressiva com ease out quíntuplo em 1.0 s, numerais tabulares.
• Leque de páginas: as páginas saem do botão, formam um leque pelo centro (rotações -10, -3.5, 3.5, 10 graus, salto de 60 px), depois cada uma salta 110 px para uma bandeja em escala 0.56, espaçadas 0.55 s; a bandeja brilha verde quando cheia (sReports).
• Leque organizacional: linhas desenham de um avatar clicado para colunas da equipe, cadeados se fecham, um contorno tracejado agrupa a mesa (sBook).
• Listas de verificação (kit do template): checkbox() marca redonda que afunda, aparece verde e desenha seu visto no clique; strike(x, y, textW(...) + 8, u) risca o rótulo; cada verificação envia um packet() para um progressRing() que avança um passo por chegada e brilha quando fechado. Uma cena de lista é checkbox + strike + packet + ring (veja examples/tidy-tasks/).

Transições: as cenas são consecutivas. Cada uma desaparece em seus últimos 0.5 s e a próxima aparece em seus primeiros 0.5 s com um assentamento de escala de 0.985 -> 1 (um mergulho pelo fundo). A primeira cena começa sólida, o encerramento termina com seu próprio fade de 0.6 s para bg. Um quadro de transição é intencionalmente quase em branco; não o "corrija".

Seguras e movimento ocioso: algo se move em cada quadro. Use deslocamentos de traço fluindo, brilhos respiratórios (sin(3t)), flutuações bob() de 3..5 px, giradores lentos (60 graus/s), ícones à deriva (18 / 14 px). Mantenha pelo menos 1.5 s de pausa após a última batida de uma cena para que a legenda termine de ler.

Regras de cópia

• Legendas em inglês, redação em minúsculas, terminando com ponto final. Uma ou duas linhas, cerca de 48 caracteres no máximo por linha.
• Tempo na tela (legenda aparece em 0.45..1.05 s, sai em dur - 0.75) deve ser de pelo menos 1 s para cada 4 palavras e nunca menos de 2.5 s. Na prática, uma cena nunca tem menos de cerca de 5 s.
• Sem travessões como pontuação (sem travessão, meia-risca ou hífen espaçado) nas legendas ou na tela. Use vírgulas e pontos finais.
• Apenas afirmações verdadeiras. Números na tela (clientes, contas, intervalos) vêm do usuário ou do produto, nunca inventados. Os números do template estão marcados como PLACEHOLDER. Sem números verdadeiros (teaser, produto fictício)? Faça o encerramento STATS em palavras simples, ['Simple lists', 'Daily focus', 'Clear progress']: as pílulas surgem em vez de contar.
• Sem dados reais de clientes: sem nomes reais, números de conta, saldos, e-mails ou logotipos de clientes. Use o conjunto fictício.
• Título e encerramento não têm legenda; a tagline e a linha de fechamento fazem esse trabalho.

Arquitetura

• Um único arquivo HTML autocontido, sem rede, sem bibliotecas. Palco SVG mais um script IIFE.
• render(t) é puro: ele reconstrói o innerHTML de #frame apenas a partir de t. Exposto como window.renderAt(t), com window.TOTAL_DURATION e window.SCENES_INFO. Sem #manual na URL, ele faz loop em tempo real.
• SCENES = [{ id, start, dur, fn, cap }], consecutivos. Mantenha cada entrada em uma linha nessa ordem de chaves e const TOTAL = <número>; como literal: compose.py analisa ambos com regex.
• Uma cena é fn(lt, dur) -> { svg, cursor? } com tempo local lt. Todos os tempos de batida dentro de uma cena são constantes locais (click, send(i), onT(i)), que é o que o script de áudio espelha.
• Auxiliares: matemática (clamp lin E EO EB mix f rng fadeIO bob), svg (T G R Ci card chip check avatar lock logo wordmark textW), gráficos (pathFrom walk scalePts spark areaChart bez), movimento (ring statusDot packet press progressRing checkbox strike), cursor (curPos drawCursor), caption. G() retorna '' quando a opacidade é ~0, então as camadas ocultas são gratuitas.
• Ordem de desenho: conteúdo da cena, legenda, insígnia da marca, cursor por último.
• const STATS = [...] permanece em uma linha no início de uma linha: compose.py o lê para os sons do encerramento.

Fluxo de trabalho

1. Briefing. Público-alvo, produto, 3..6 afirmações verdadeiras com números reais, duração (60..90 s completo, 20..40 s teaser), onde será postado, e o tema (house, studio, ember, tide, ou um novo json).
2. Storyboard. Uma tabela com id da cena, duração, legenda, metáfora visual, ação do cursor e tempos de batida. Arco: gancho (logotipo, tagline) -> antes (a dor) -> um recurso por cena -> encerramento (estatísticas ou pílulas de palavras, linha de fechamento). Verifique o tempo da legenda em relação às regras de cópia antes de construir.
3. Construção. Na pasta de trabalho, com SK definido para a pasta templates deste skill (por exemplo SK=~/.claude/skills/explainer-video/templates): cp $SK/explainer-template.html explainer.html && cp $SK/compose.py . Nunca edite as cópias do skill. Aplique o tema: node $SK/apply-theme.mjs --theme <nome> --html explainer.html (pule para house). Defina BRAND, substitua a cena de cards de exemplo, adicione cenas no bloco marcado, atualize os inícios e TOTAL, defina STATS. Extraia padrões da referência.
4. Pré-visualização. Abra o HTML em um navegador (ele faz loop), depois renderize imagens estáticas em cada clique, aterrissagem e limite: node $SK/render.mjs --html explainer.html --stills 3.2,4.9,8.6 --stills-dir critique/v1.
5. Renderização. node $SK/render.mjs --html explainer.html --out nome.mp4 escreve o MP4, -poster.png e -contact.png.
6. Crítica. Leia a folha de contato e as imagens estáticas em relação a checklist.md. Cada item deve ser aprovado; corrija, re-renderize, re-critique até que todos passem. Nunca entregue um vídeo que você não criticou.

Referências visuais (todas em reference/)

Quadro	Referência	O que mostra
Cartão de título com logotipo e tagline	t 0.0 -> 6.0	Marca nominativa com wipe, marca do logotipo desenhando, tagline deslizando, grade de fundo, insígnia da marca
Cena de tabela com clique do cursor	t 6.0 -> 12.5	Entrada de card, entrada escalonada de linhas, botão, cursor planando + clicando, explosão, preenchimento, destaque da linha
Cena de pacotes	t 12.5 -> 18.0	Dois cards, pacote voando do card esquerdo para o direito, guia tracejada, desvanecimento do remetente, anel de chegada verde
Laço e janela do aplicativo	t 18.0 -> 25.0	Cursor desenhando laço, quadro fantasma, ícones voando, janela solidificando com barra lateral, itens de navegação, blocos de KPI
Gráfico de linhas e barras	t 25.0 -> 31.0	Linha do gráfico se revelando, área de preenchimento, ponto principal brilhante, barras crescendo, dicas de ferramenta surgindo
Gráfico de calor e mapa	t 31.0 -> 38.0	Células de mapa de calor surgindo, mapa, pontos de localização, legenda, contador
Leque de páginas	t 38.0 -> 43.5	Páginas formando leque no centro, depois saltando para a bandeja, brilho da bandeja
Leque organizacional	t 43.5 -> 50.0	Avatar clicado, linhas desenhando para colunas, cadeados, contorno tracejado
Encerramento com estatísticas, linha de fechamento e créditos	t 50.0 -> 60.0	Pílulas surgindo, linha de fechamento, créditos, fade para preto