FireAmun/remotion-dev-video-kit

Daily video: idea → research → approve → build → preview → render → Buffer

Leia .claude/CLAUDE.md primeiro; ele é a fonte da verdade (marca, regras de vídeo, voz, zonas seguras). Este skill é a execução passo a passo. Há duas paradas obrigatórias para aprovação do criador: a proposta (passo 2) e a prévia (passo 5). Nunca pule esses passos.

Os caminhos abaixo usam <date> = hoje, AAAA-MM-DD (Ásia/Riyadh). Pasta do episódio: public/episodes/<date>/.

Aparência e estilo: idênticos em todos os episódios

Todo episódio deve parecer com o seu primeiro — a série é reconhecida pelo visual. Então:

• Use apenas os mesmos blocos de construção. Use os conjuntos existentes, o personagem rigado, poses, movimentações, adereços e itens. Não altere src/theme.ts, fontes, cores, a arte do personagem, a barra de capítulos, o estilo de legendas ou os efeitos sonoros em uma execução diária. Novos visuais (um novo cenário, pose, adereço ou item) são uma tarefa separada que o criador solicita; quando ele o fizer, construa no mesmo estilo preto-e-dourado e adicione às listas deste skill.
• Mesma estrutura. 1080×1920, 30 fps, ≤ 60 s. Rótulo "EP NN" + barra de 7 capítulos no topo, legendas palavra por palavra na parte inferior (palavra falada em destaque, próxima palavra esmaecida, uma palavra-chave dourada por linha). Uma frase = uma cena; o personagem interpreta cada frase; adereços/itens aparecem na palavra falada; uma mudança visual a cada 1,5-3 s; "whoosh" a cada mudança de cena.
• Mesmas batidas. Gancho nos primeiros 2 s → chamada inicial "Siga" (cena do botão de seguir) → capítulos de conteúdo → cartão final com seusite.com e a frase de encerramento exata → prévia "Amanhã: <próximo tópico>".
• Mesma voz. Qwen3-TTS com assets/voice/reference_energy.wav, mesma semente, pontuação enérgica.
• Mesma publicação. 19:00 Riade, Instagram Reel (compartilhar no feed) + TikTok + LinkedIn, rótulo de IA gerada ATIVO para Instagram e TikTok (a voz é um clone de IA; a rotulagem é honesta e protege a conta).
• Os números dos episódios contam a partir de topics-log.json (próximo = último + 1).

1. Pesquisa

1. Leia topics-log.json: não repita um tópico; se o último episódio prometeu um "próximo" tópico, prefira-o.
2. Pesquise na web: 2 a 4 fontes confiáveis (documentos oficiais, READMEs do GitHub, artigos, a página do próprio fornecedor). Verifique cada número, preço, versão ou afirmação. Coisas que mudam rápido recebem "a partir de ". Nunca invente fatos, benchmarks ou código.
3. Posicionamento: um desenvolvedor real dando uma dica útil, sem hype e sem "olhe o que a IA fez". Enquadre tópicos de ferramentas como uma dica de desenvolvedor.

2. Proposta - PARE para aprovação

Mostre ao criador, no chat, de forma resumida:

• Gancho (primeiros 2 s): um fato concreto, número ou afirmação. Sem saudações.
• Tabela de cenas, uma linha por frase (5-8 capítulos, ~12-16 cenas, 30-60 s no total, ~2,5-3,5 palavras faladas/s): # | capítulo | frase | cenário | o que o personagem faz | itens que aparecem em qual palavra Capítulos: GANCHO, O QUE, POR QUE É IMPORTANTE, COMO, DICA, TENTE, PRÓXIMO. Chamada inicial "Siga" logo após o gancho. A última frase é sempre exatamente: "Visite meu site seusite.com e clique em seguir para mais."
• Fatos + fontes (URLs) e qualquer coisa que o criador precise confirmar (opiniões ditas com a voz dele, nomes de ferramentas).
• Legendas para Instagram/TikTok (linha do gancho, linha do fato, CTA, hashtags) e uma legenda separada mais profissional para LinkedIn (3 hashtags).

Aguarde "vai"/aprovação ou edições. Aplique edições e mostre novamente se forem substanciais.

3. Voz (trabalho na GPU; nada mais na GPU enquanto isso)

Escreva public/episodes/<date>/narration.txt: um parágrafo por segmento TTS (linha em branco entre parágrafos), geralmente 1-3 frases por parágrafo. Escreva como é falado: seu site soletrado como é falado (ex. "meu site ponto com"), N P X create video, Qwen three T-T-S, pip install Qwen T-T-S, números por extenso se ambíguos. Use ! nas linhas de gancho (o modelo lê a pontuação como energia).

.venv-qwen\Scripts\python scripts\tts_qwen.py public\episodes\<date>\narration.txt
.venv-qwen\Scripts\python scripts\timestamps.py public\episodes\<date>\narration.wav --hint "<5-10 termos técnicos>"

• Voz = Qwen3-TTS 1.7B zero-shot, referência assets/voice/reference_energy.wav (+ .txt transcrição). Nunca use um serviço de voz pago.
• Nunca passe o script inteiro para o Whisper como prompt (ele entra em loop); use --hint com apenas alguns termos.
• Verifique a duração da narração (deve ser ≤ 60 s com a cauda de 1,5 s) e examine rapidamente o texto de narration.json para ver se há erros de compreensão.
• tts_qwen.py nivela a voz automaticamente (scripts/audio_level.py: compressor → -16 LUFS → pico -1 dBFS). Os efeitos sonoros em src/components/Sfx.tsx são ajustados em relação a esse nível (~12 dB abaixo da voz); não os aumente. Se uma narração foi feita de outra forma, execute scripts/audio_level.py primeiro.

4. Construir o episódio (apenas dados - nenhum código de novo componente em uma execução diária)

Escreva public/episodes/<date>/plan.json, depois:

.venv-qwen\Scripts\python scripts\build_episode.py public\episodes\<date>
npm run lint

Forma do plan.json (veja public/episodes/example/plan.json para um exemplo completo):

{
  "episode": 2, "date": "<date>", "title": "...", "keywords": ["palavra,", "..."], "tailMs": 1500,
  "sources": [{ "title": "...", "url": "https://..." }],
  "scenes": [{
    "chapter": "GANCHO",
    "display": "Frase exatamente como as legendas devem mostrar (formas escritas: seusite.com, npx create-video).",
    "set": "stage", "setVariant": "", "zoom": 1.05,
    "actor": { "x": 540, "scale": 0.9, "facing": "right", "enterFrom": "right",
               "beats": [{ "atMs": 0, "pose": "talk" }, { "atWord": "build", "pose": "pointUp", "motion": "talk" }] },
    "items": [{ "kind": "label", "text": "...", "atWord": "camera!", "untilWord": "...", "x": 540, "y": 420 }]
  }]
}

• O display de todas as cenas concatenadas deve ser igual à narração falada palavra por palavra (as formas escritas podem diferir, ex. "Qwen3-TTS" para "Qwen three T-T-S"). Uma cena que inicia um parágrafo de narração é cronometrada exatamente a partir do TTS; as outras começam na sua primeira palavra falada.
• Chaves de tempo: atWord / crossAtWord / untilWord (correspondência ignorando maiúsculas/minúsculas e pontuação), occurrence para palavras repetidas, offsetMs para ajustar, ou simplesmente atMs.
• Poses (src/rig/poses.ts): idle, talk, explain, shrug, wave, point, pointUp, pointViewer, celebrate, think, search, laptop, holdUp, thumbsUp, headScratch. Movimentações: talk (gestos acompanham a voz), wave, shake, celebrate, search, type, still. Adereços de mão: magnifier, phone, trophy; "laptop": true para o laptop segurado. facing: "left" espelha ele (aponte para a esquerda nas coisas).
• Cenários (src/sets/Sets.tsx): stage, coderoom, desk (desk esconde as pernas; monitor à direita), sky (setVariant "sunrise" ou "timelapse"), chalkboard (quadro à esquerda), library, blueprint (desenho técnico dourado em azul marinho - use para COMO / "como funciona"), plain. Cada cena tem poeira dourada flutuante ("particles": false desativa).
• Itens (src/scene/Items.tsx): icon (camera/timeline, crossAtWord), label (dourado/claro), code (chip voador, fromX/fromY), window (terminal ou "style": "chalk", linhas com tipo command/code/output), counter, stamp, steps, waveform, calendar (de→para), banner, confetti, book, follow, end (url + cta, moldura art déco), kinetic (palavras grandes entram uma a uma; destaque highlight em dourado; size, stagger quadros - melhor para a linha de gancho), splitflap (dado estilo aeroporto, máx. 10 caracteres, label opcional - melhor para números do gancho).
• Os cartões são de vidro fosco (glassmorphism) automaticamente. Visualização do kit de estilo: a composição StyleTest.
• Preencha os itens com conteúdo real (código real, saída real de terminal, números reais), nunca com preenchimento.

Regras de layout aprendidas da maneira difícil (1080×1920):

• Barra superior (rótulo EP + capítulos) termina ~y 215: os topos dos itens devem ficar abaixo de ~230 (lembre-se de que o zoom da cena empurra os itens para cima).
• Chão y 1440; legendas em y 1490; mantenha margens laterais de 60 px.
• Escala do ator 0.9 → topo da cabeça ≈ y 570; 0.8 → ≈ 670; 0.7 → ≈ 760. Itens grandes (window, waveform, end card) precisam de ator 0.58-0.8 ou o ator na lateral (x≈790, facing left).
• Os rótulos têm ~38 px por caractere no tamanho padrão: mantenha-os curtos ou eles sairão da tela.
• Nunca cubra o rosto dele com um item; coloque rótulos ao lado ou abaixo das janelas.

5. Prévia - PARE para aprovação

1. Estúdio: npx remotion studio → http://localhost:3000/Episode (pode já estar em execução).
2. Renderize um still de cada cena (escala 0.4) e verifique você mesmo primeiro: sobreposições, texto fora da tela, rosto coberto, tempo dos itens. Corrija, reconstrua, verifique novamente.
3. Mostre ao criador o link do Estúdio (e mencione qualquer coisa que você não pôde verificar, ex. pronúncia). Aguarde aprovação ou feedback com captura de tela - corrija exatamente o que ele apontar.

6. Renderizar

npx remotion render Episode out/<date>/video.mp4 --codec=h264 --crf=18

(Defina a prop padrão episodeFile da composição Episode em src/Root.tsx para a nova pasta, ou passe --props='{"episodeFile":"episodes/<date>/episode.json","episode":null}'.) Verifique: ≤ 60 s, 1080×1920, 30 fps, tem áudio e a voz está claramente mais alta do que todos os efeitos sonoros (voz ≈ -16 LUFS). Escreva out/<date>/caption.txt (IG/TikTok) e out/<date>/caption-linkedin.txt.

7. Rascunhos no Buffer (o criador anexa o vídeo)

A API do Buffer só aceita vídeos de uma URL pública, então crie rascunhos já cronometrados para as 19:00 Ásia/Riyadh; o criador abre cada rascunho no Buffer, anexa out/<date>/video.mp4 e pressiona Agendar.

• Organização <seu id da organização Buffer> (obtenha com o MCP do Buffer get_account; o plano gratuito permite 10 posts agendados).
• Canais: Instagram <id>, TikTok <id>, LinkedIn <id> (obtenha com list_channels).
• create_post com mode: "customScheduled", dueAt: "<date>T19:00:00+03:00", saveToDraft: true, schedulingType: "automatic".
  • Instagram: metadata.instagram = { type: "reel", shouldShareToFeed: true, isAiGenerated: true }.
  • TikTok: metadata.tiktok = { title: "<short hook>", isAiGenerated: true } (a voz é um clone de IA - sempre divulgue).
  • LinkedIn: legenda profissional, nenhum metadado necessário.
• Se 19:00 já passou, pergunte ao criador o horário em vez de adivinhar. Nunca publique ou agende nada sem a aprovação dele.

8. Finalização

• Acrescente o episódio a topics-log.json (data, episódio, título, tópicos, a promessa "próximo", fontes).
• Informe ao criador: caminho do vídeo, os três rascunhos do Buffer e que ele deve anexar o vídeo, e o tópico prometido para o próximo episódio.