sticker-explainer-video

Vídeo Explicativo com Adesivos (Sticker Explainer)

Transforma um roteiro de locução e narração em um vídeo explicativo no estilo "quadro de investigação". A estrutura visual: uma lousa grande, azul-acinzentada, onde cada cena é uma área (painel) da lousa. A câmera desliza de uma área para a seguinte ao longo de uma linha tracejada laranja. Os personagens são adesivos recortados com borda branca; lugares e objetos são adesivos de fotos; informações são cartões de papel e etiquetas com ícones. A cada novo capítulo, a tela pausa e um mapa mental aparece, destacando a próxima pista.

Esta skill é construída sobre o motion-showreel (ConardLi/garden-skills): ele fornece a convenção de página render(t), renderização quadro a quadro, síntese de efeitos sonoros e verificação do vídeo final. Primeiro, confirme que ele está instalado (npx skills add ConardLi/garden-skills ou copie para ~/.claude/skills/motion-showreel). Esta skill adiciona apenas o estilo, o fluxo de trabalho e as ferramentas para vídeos longos em português; não copia o código dele.

Exemplo completo: examples/huang-resignation/ (vídeo final de 13 min 43 s, veja o Release do repositório). Comandos detalhados em references/workflow.md; funções de desenho em references/engine-api.md; regras visuais em references/style.md.

Perguntas antes de começar (uma única rodada, no máximo 4 perguntas)

1. Narração: O usuário vai gerar a narração com ElevenLabs (recomendado; tags como [serious] [short pause] no roteiro são da v3) ou prefere uma versão sem áudio? Se houver múltiplos trechos de narração, como eles devem ser combinados? (ex.: "começo com o curto, depois encaixo o longo seguindo as legendas").
2. Proporção: Padrão 16:9, 1920×1080.
3. Personagens: Por padrão, use apenas fotos recortadas de domínio público ou licenciadas CC (fotos oficiais de funcionários do governo dos EUA são de domínio público). Para pessoas sem foto autorizada, use apenas um cartão de identificação.
4. Legendas: Padrão: português, linha única, no máximo 14 caracteres por linha.

Quando o usuário disser "me pergunte qualquer coisa que não estiver clara", faça perguntas que realmente mudem o resultado; não pergunte sobre coisas que podem ser determinadas pela gravação, código ou senso comum.

Fluxo de trabalho

O áudio é a fonte da verdade, não o roteiro. Frequentemente, a gravação difere do roteiro enviado (frases faltando, palavras trocadas, ordem diferente). As legendas e as cenas seguem o áudio, e as diferenças são listadas em um resumo para o usuário. Se a posição de um capítulo não corresponder a uma frase no roteiro, escolha a posição mais próxima no áudio e explique o ajuste.

1. Criar projeto: export MOTION_SHOWREEL=$(realpath <diretório-do-motion-showreel>), depois sh scripts/new_project.sh <dir>, coloque a narração em audio/src/, preencha video.config.json. Todos os comandos usam o caminho absoluto do projeto.
2. Combinar narração (quando há múltiplos trechos): use transcribe.py <dir> --take <file> para ver as frases e os tempos de cada trecho, escolha os pontos de corte nas pausas entre frases, escreva em voice.splice, depois execute splice.py.
3. Transcrição e alinhamento: execute transcribe.py e depois align.py. O whisper.cpp pode ter deriva de timestamps após alguns minutos; o script divide em segmentos de ~40 segundos e retranscreve para obter tempos precisos. Ocasionalmente, o whisper pode gerar caracteres em itálico ou erros; o script unifica para português padrão. Leia timeline/segments.json e adicione correções para nomes próprios ouvidos errado, pronomes, etc., no fixes, e execute novamente.
4. Editar ritmo: voedit.py. As pausas de capítulo (7,5 segundos antes do primeiro capítulo como visão geral; 4 segundos para os demais) e a velocidade de trechos (ex.: 1,1× no início) são feitas aqui. Ele apenas insere silêncio e varia a velocidade; nunca corta ou reordena frases. Gera vomap.json; todos os tempos subsequentes passam por ele, portanto ajustes no ritmo não desalinham as cenas.
5. Legendas e linha do tempo: timeline.py gera timeline.js. Legendas: uma linha por tela, ≤ 14 caracteres (letras latinas contam como 0,55 caractere); quebras apenas entre palavras. Nomes próprios, instituições, valores, títulos com aspas vão em subtitles.protect para não serem quebrados.
6. Quadros-chave: crie 3 quadros-chave para o usuário confirmar o estilo, depois escreva o vídeo completo.
7. Escrever cenas: em episode.js, escreva PANELS. Os tempos de aparição dos elementos devem usar V(número_da_frase, deslocamento). Após cada lote de cenas, gere uma folha de contato (render.mjs --still … --sheet) para verificar sobreposições.
8. Áudio: events.mjs lê os tempos dos efeitos sonoros registrados na página; use o audio.mjs build score.mjs --raw --out audio/sfx.wav do motion-showreel para sintetizar os efeitos; mix.py faz a mixagem.
9. Renderizar: build.sh executa verificação determinística, renderização quadro a quadro e verificação final do vídeo (13 min 1080p leva cerca de 10 min). Após a renderização, verifique quadros para garantir que mapas mentais, legendas e fotos não estejam sobrepostos.

Requisitos que o usuário sempre mencionou (faça por padrão)

• Transições suaves: todas as cenas estão na mesma lousa; a câmera desliza ao longo da linha tracejada. O adesivo do protagonista, como actors, desliza com a câmera para a próxima cena, sem cortes.
• Mapa mental de capítulo: na transição de capítulo, a narração pausa, a lousa escurece, uma linha é desenhada, o nó fica laranja com uma caixa de varredura, e os itens concluídos recebem um visto. Na primeira vez, faça uma "visão geral": os ramos aparecem um a um, depois o primeiro capítulo é destacado, e só então o conteúdo do próximo capítulo aparece.
• Barra de progresso abaixo das legendas; cada bloco entre capítulos mostra o nome do capítulo.
• Use muitos ícones e imagens: etiquetas e cartões com ícones de linha; lugares e instituições com adesivos de fotos. Fotos meramente ilustrativas devem ser marcadas como "ilustrativo".
• Elementos não podem sobrepor legendas e o título do capítulo no canto superior esquerdo: a parte inferior da tela (cerca de 200 px) é reservada para legendas; o canto superior esquerdo (aproximadamente x < 700, y < 120) é para o título; nem mesmo texto grande deve entrar nessas áreas.
• Efeitos sonoros não podem cobrir a narração ou a trilha. Use sons suaves de marimba "painel" para o mapa mental (na visão geral, cada ramo com uma nota da escala pentatônica); ao destacar, mantenha um clique. Não use sons como "riser" ou "glitch" (estilo tecnológico).
• Trilha: a última faixa deve ter um final natural, para que o término do vídeo coincida com o final da música; a faixa começa com fade-in em alguma pausa de capítulo. Nas pausas de capítulo, a música reduz 6 dB.
• Volume: use apenas ganho linear. Padrão: voz −15 LUFS, música −26 LUFS (voz cerca de 11 dB acima da música), efeitos sonoros cerca de 12 dB abaixo da voz, pico limitado a −1,5 dBFS, para que o vídeo inteiro passe na verificação de loudness de −14 ± 1,5. Quando o usuário disser "abaixe a locução / suba a bgm", ajuste levels e music.lufs em dB; se o resultado ficar abaixo do padrão, avise ao usuário que é esperado (o exemplo foi feito com −19,3 / −30 a pedido do autor).

Fatos, direitos autorais e segurança

• Conteúdo jornalístico frequentemente se refere a eventos após a data de corte do modelo: verifique online e coloque as fontes nos créditos finais; números que não puderem ser confirmados na fonte original devem ser listados na lista de verificação pendente para o usuário.
• Alegações não comprovadas devem ser sinalizadas visualmente ("sob investigação", "o departamento nega", "ilustrativo"); correlação não é evidência. Nunca coloque etiquetas como "espião" perto da foto de alguém.
• Use apenas fotos de domínio público ou licenciadas CC; registre as informações de licença em assets/credits.json e inclua nos créditos finais. Músicas de bancos como Pixabay podem ser usadas no vídeo final, mas o arquivo da música não pode ser redistribuído.
• Disco: renderização, arquivos de áudio intermediários e o vídeo final totalizam cerca de 1 GB. Verifique o espaço antes de começar; se insuficiente, remova apenas arquivos intermediários que podem ser recriados. Pergunte antes de deletar arquivos do usuário ou modelos baixados.

Estrutura de arquivos

sticker-explainer-video/
├── SKILL.md
├── scripts/
│   ├── new_project.sh       Cria projeto (scaffold do motion-showreel + este template)
│   ├── cfg.py               Funções comuns (ler video.config.json, ffmpeg, loudness, detecção de pausa)
│   ├── splice.py            Combinar múltiplos trechos de narração
│   ├── transcribe.py        Dupla transcrição com whisper.cpp → texto de frases + tempos por palavra + pausas
│   ├── align.py             Alinhamento → timeline/sentences.json
│   ├── voedit.py            Pausas de capítulo, variação de velocidade → audio/vo-edit.wav + vomap.json
│   ├── timeline.py          Mapeamento de tempo + divisão de legendas → timeline.js
│   ├── events.mjs           Ler tempos de efeitos sonoros da página
│   ├── mix.py               Voz + trilha + efeitos → audio/final.wav
│   └── cutout.swift         Recorte de silhueta com Apple Vision (macOS)
├── assets/template/         index.html, engine.js, episode.js (cenas de exemplo), score.mjs, video.config.json, fonts
├── references/
│   ├── workflow.md          Comandos e pontos de verificação de cada etapa
│   ├── engine-api.md        Funções de desenho do engine.js e parâmetros de start()
│   └── style.md             Regras de cores, tipografia, transições e áudio
└── examples/huang-resignation/    Exemplo completo (código, configuração, linha do tempo, fotos, narração)