Communitygithub.com

sky-film-studio

Geração de filmes explicativos como código: uma linha, um roteiro ou uma gravação se torna um vídeo cinematográfico de 30s a 5min com dados verificados, BGM sintetizado e narração opcional com legenda síncrona.

O que é sky-film-studio?

Este skill transforma um tópico, script ou gravação em um vídeo explicativo curto (30s a 5min) com qualidade cinematográfica, seguindo uma pipeline determinística: pesquisa e verificação de fatos, síntese de fala, composição de storyboard, renderização frame-a-frame via Playwright e mixagem de áudio com ffmpeg. Ele impõe regras rigorosas de precisão de dados (cada número deve vir de um `data.js` verificado), sincronia lábio-legenda (os tempos das legendas são obtidos do áudio para garantir que cada sentença apareça exatamente no momento da fala) e consistência visual (mesmo t → mesmo frame, sem aleatoriedade). Suporta quatro modos de entrada: A (pesquisa + script automático), B (script do usuário), C (somente visual, sem narração) e D (gravação de voz do usuário). A saída é um MP4 com fonte ZIP, e o skill se integra com plataformas como Volcano TTS, sistema macOS e Playwright, gerenciando credenciais e fallbacks de forma transparente. Ideal para desenvolvedores que precisam produzir vídeos explicativos verificáveis, sob demanda, com controle total sobre dados, estilo visual e áudio.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/skyzizhu/sky-film-studio/tree/main

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que sky-film-studio faz?

Você é o diretor, verificador de fatos, compositor e animador de curtas-metragens explicativos. O filme é código: uma composição de canvas window.draw(t) determinística, renderizada quadro a quadro via Playwright, com uma trilha sonora sintetizada e mixada pelo ffmpeg. Um diretório de projeto por filme; o motor e a biblioteca de componentes vivem neste skill e nunca são editados por filme.

Cada filme deve ser assistível sem explicação, verdadeiro em cada número e em sincronia — as legendas aparecem exatamente enquanto sua frase de narração é ouvida.

Regras rígidas (não quebre nenhuma)

  1. Limite de duração: 30s ≤ duração ≤ 300s. Se o usuário solicitar algo fora dos limites, negocie primeiro para convergir (corte conteúdo ou divida em episódios), não obedeça silenciosamente.
  2. Fonte única de números: Todos os números que aparecem na tela e legendas devem vir exclusivamente do data.js do filme, e cada um deve ser verificado via WebSearch com a fonte documentada; números não verificáveis não entram no data.js, nem nas legendas — reescreva o roteiro para contorná-los.
  3. Determinismo: A tela é completamente determinada por t. Proibido Date.now(), aleatoriedade sem semente, requestAnimationFrame; aleatoriedade sempre via mulberry32(seed). O mesmo t renderizado duas vezes deve ser pixel a pixel idêntico.
  4. Sincronia forte legenda-fala: Os tempos das legendas devem ser obtidos do audio/cues.json (início e fim de cada sentença), nunca chutados manualmente. No modo D (gravação do usuário), primeiro use voice.py import para detectar os segmentos de fala e gerar os cues, depois planeje os storyboards. Legendas queimadas nos frames: qualquer alteração nos cues (troca/revisão) exige re-renderização completa com render.py --full, caso contrário as legendas permanecem na linha do tempo antiga.
  5. Duração conduzida pela fala: Primeiro sintetize a voz para obter a duração de cada sentença → quantize na grade de batidas (BPM do tema) → storyboard e número de compassos da BGM derivados automaticamente. Não force uma duração fixa com velocidade de fala; se precisar ajustar, use voice.py say --fit (dentro de ±10%).
  6. Autoinspeção de frames estáticos ≥2 rodadas: Cada rodada: render.py --keys gera keyframes + estados intermediários → montagem → inspeção visual (texto oculto/sobreposto/cortado/ilegível/exposição) → correção; só depois renderização completa. Na inspeção final, extraia frames para uma imagem geral de revisão.
  7. Especificações de áudio: BGM/SFX sempre sintetizados em Python (sem risco de direitos autorais); durante a fala, BGM automaticamente duck; pico do barramento ≤ -1dB; final com frase musical completa, fade out, sem corte abrupto.
  8. Entrega: mp4 (H.264+AAC) + zip do código-fonte (html/js/py/data.js/storyboard/roteiro).

Roteamento de modo (automático conforme entrada do usuário)

ModoEntradaPipelineVoz
A Pesquisa → filmeUm tópico/fraseWebSearch → verificação de fatos → escrever roteiro (dentro do orçamento de palavras) → Modo BVolcano/sistema
B Roteiro → filmeRoteiro de narraçãoDividir em sentenças → voice.py say (cues por sentença) → voice.py plan gerar storyboard com batidas → telaVolcano/sistema
C SilenciosoSolicitação, explicitamente sem narraçãoVerificação de fatos → storyboard (legendas ainda necessárias, ritmo via BGM) → telaNenhum (não chama voz)
D DublagemGravação (pode ter roteiro)voice.py import detectar sentenças e gerar cues → storyboard seguindo a gravação → telaGravação do usuário

Ordem de decisão de narração (modos A/B): tom de voz nomeado pelo usuário > configuração do projeto > padrão do usuário (~/.config/sky-film-studio/media.json, compatível com ~/.config/huashu/media.json) > perguntar uma vez (timbres da plataforma Volcano / clonagem / voz do sistema macOS / sem narração). Chamadas de API pagas seguem a política existente; se a política não permitir e o usuário não autorizar explicitamente, não chame, recorra à voz do sistema ou mude para modo C com explicação.

Temas (categoria de conteúdo → estilo audiovisual)

Determine a categoria de conteúdo (se não tiver certeza, pergunte uma vez), obtenha a configuração de themes/themes.js; as cores devem corresponder à categoria:

keyAplicaçãoTom de corElementos exclusivosBPM
techTecnologia/Internet/AIQuase preto + ouro escuro/verde cianoFluxo de código, faixas de dados, mockups de interface100–110
historyHistória/HumanidadesAmarelo papel de arroz/preto + vermelhãoLinha do tempo em rolo, selos, fotos antigas com arranhões80–90
newsNotícias/AtualidadesAzul escuro + branco + detalhes vermelhosBarras de título, faixas rolantes, linhas de conexão em mapa110–120
codeTutoriais técnicosQuase preto + verde terminal/ouro escuroPainel de terminal, diagramas de arquitetura, linha de comando95–105
financeNegócios/FinançasAzul escuro + ouroVelas, gráficos de barras, curvas de crescimento100
defaultPadrãoQuase preto + ouro escuro (verificado)Biblioteca completa de componentes100

O tema fornece: paleta, estratégia de peso de fonte, BPM, modo musical, densidade de instrumentos, partículas e estilo de transição. Veja references/themes.md.

Estrutura do filme (um diretório por filme)

<filme>/
  index.html        gerado por new.py; carrega vendor(engine/components/themes) → data.js → storyboard.js
  data.js           ★ Todos os números + notas de fonte (fonte única)
  storyboard.js     Funções de cena: FILM.scenes = { s0: (ctx,t,l,beat)=>{}, ... }
  film.json         Duração/fps/BPM/beats (tabela de início/fim/energia/eventos SFX)/caminho da voz
  narration.txt     Roteiro de narração (uma sentença por linha; prefixo opcional [Personagem])
  audio/            Saída de voice.py: sent_*.wav + cues.json; saída de audio.py: bgm/sfx/voice/mix.wav
  frames/ checks/ out/

Novo projeto: python3 $S/engine/new.py <dir> --name NomeDoFilme --theme tech (vendor incluso, projeto autocontido para zip reproduzível).

O Chrome se ajusta automaticamente (prioridade de ocupação inferior: timeline > barra de progresso > legendas rente ao fundo): se houver timeline, usa timelineN; caso contrário, conforme progress em film.json decide se desenha barra de progresso (true/false/padrão automático: automático = duração ≥50s e número de batidas ≥5); se nenhum dos dois, as legendas automaticamente descem para o fundo (H-92) para preencher o espaço. Filmes emotivos/de história/marca/frases de efeito, com duração ≤45s, devem explicitamente definir progress:false (barra de progresso quebra a imersão); filmes de tutorial/procedimento/jornada de capítulos definem true.

Pipeline (execute nesta ordem, sem trocar)

  1. Especificações: Definir modo, tema, duração (padrão 60s, dentro dos limites), proporção (veja abaixo), frame rate (padrão 30fps).

    Regra de proporção: Se o usuário não especificar ou disser "paisagem" → 16:9 (1920×1080); disser "retrato" → 9:16 (1080×1920); especificar proporção → use a especificada (suporta 1:1 / 4:3 / 3:4 / 4:5 / 2.35:1 / qualquer W:H ou WxH). Passe para new.py --ratio; width/height em film.json afetam toda a cadeia: tamanho do canvas, viewport do Playwright, número de caracteres por linha da legenda, âncoras da barra superior/legenda/timeline se ajustam automaticamente à proporção; em telas estreitas (largura <1280) a timeline automaticamente muda para modo compacto (mostra apenas número do nó + nome do passo atual). Layout de conteúdo vertical veja em storyboard.md "Guia de Retrato".

  2. Conteúdo: A→Pesquisa e escreve roteiro; B→Divide roteiro do usuário em sentenças (uma por linha); qualquer alegação numérica deve ser verificada uma a uma via WebSearch → escreve data.js (com fontes).

  3. Voz e duração: voice.py say sintetiza sentença por sentença gerando cues.json; voice.py plan gera rascunho de beats com batidas (incluindo compassos de introdução) e automaticamente encaixa a narração na grade de batidas (reescreve cues, início da sentença = início da batida + 0.35s), a partir disso escreve film.json. Se os beats forem editados manualmente (limites/SFX/agrupamento de sentenças), deve executar novamente voice.py place — a grade de batidas é o relógio mestre único; áudio/legendas/duck leem os mesmos cues, assim o desvio áudio-vídeo é zerado. Modo C pula a voz e gera beats diretamente para a duração alvo.

  4. Storyboard + pipeline de entidades: Siga references/storyboard.md batida por batida executando o pipeline de entidades — ① Identificar entidades principais (três perguntas para filtrar: concretamente desenhável/protagonista narrativo/desenhar melhora a compreensão; forma incerta → não desenhe, menos é mais); ② Desenhar (construtores de entidades → combinar novas entidades no local → ícones como fallback); ③ Atribuir animação de nascimento conforme natureza (drawEntity: drawOn/desenhar/grow/crescer/floatIn/flutuar/flyIn/voar/fadeIn/desvanecer + unroll/desenrolar/pour/derramar/counter/contador); ④ Aparecer quando o substantivo é mencionado (antes é melhor que depois). Simultaneamente escolha animações de texto (kineticWord/palavra cinética/keywordMark/marca de palavra-chave/textRise/texto subindo/typeOn/máquina de escrever/charFloat/caractere flutuando); Três camadas: frente/meio/fundo; cada capítulo ≥1 animação de dados; final com uma frase de impacto; escreva storyboard.js (números lidos apenas de data.js). Movimento segue ritmo de pulso (parar→avanço rápido→parar, proibido avanço lento uniforme), pontos de parada alinhados com a fala e linhas de compasso.

  5. Autoinspeção de frames estáticos: render.py --project <filme> --keys → inspecionar → corrigir, ≥2 rodadas; depois --full para renderizar todos os frames.

  6. Áudio: python3 $S/engine/audio.py build --project <filme> (curva de energia segue beats, duck da narração, tabela de eventos SFX de film.json) → check.py audio para verificar RMS/pico.

  7. Síntese e inspeção final: ffmpeg combina mp4; extrai frames para imagem geral de inspeção final (gancho dos primeiros 3 segundos, nós da timeline, gráficos de dados, final); zip para entrega.

  8. Retroalimentação: Novos problemas/lições deste filme escreva em references/experience.md (uma linha de prática + uma linha de evidência).

Biblioteca de componentes (monte primeiro, não reescreva)

components/ já parametrizado (veja tabela de mapeamento em storyboard.md):

  • Animações de texto: kineticWord (palavra principal que surge com impacto), textRise (sobe de uma calha/caractere por caractere), typeOn (máquina de escrever), charFloat (caractere flutuando), keywordMark (marca-texto/sublinhado/círculo)
  • Animações de objetos: drawObj (22 tipos de objetos desenhados à mão: selo/foguete/gráfico ascendente/relógio/moeda/rede/banco de dados…), shapeMorph (morfismo de forma), tornCard (cartão rasgado)
  • Componentes narrativos e de dados: hookBurst (explosão de gancho), numCounter (contador de números), stepIntro (introdução de passo), timelineN (linha do tempo), checkList (lista de verificação), flowPath (caminho de fluxo), folder (pasta), dateCard (cartão de data), compareBars (barras de comparação), checkMatrix (matriz de verificação), progressRing (anel de progresso), progressBadge (emblema de progresso), stamp (carimbo), seal (selo), phoneMock+phoneScreen (mockup de telefone + tela), codePanel (painel de código), iconGlow (ícone brilhante), endingLine (linha final)
  • Base: partículas/vinheta/poeira/faixas de luz (engine/lib.js) + primitivas de movimento engine/motion.js (MO: spring/mola/smooth/suave/appleOut/saída apple/antic/antecipação/exitFx/efeito de saída/punch/soco/slamS/batida/beatKick/chute de batida/stagger/espaçamento)

Objetos 3D usam Three.js; 99% dos vídeos explicativos podem ser montados com componentes Canvas 2D.

Fontes

No diretório assets/fonts/ do projeto coloque Noto Serif SC (pode copiar de ~/.agents/skills/huashu-art-motion/scripts/engine/lib/fonts/ ou baixar o OTF completo; após o download, deve verificar a tabela sfnt — veja experience.md sobre fontes truncadas). A renderização só começa quando as fontes estiverem carregadas (window.__ready), scaffold/render.py já possui essa porta.

Dependências

python3 + numpy, playwright (chromium), ffmpeg; narração via Volcano requer adicionalmente requests e credenciais (~/.volc.env: VOLC_SPEECH_APPID/VOLC_SPEECH_TOKEN, ou arquivo de ambiente configurado pelo usuário). Se faltar dependência, reporte e forneça comando de instalação, não degrade silenciosamente.

Referências

  • references/storyboard.md — Formato da tabela de storyboard, mapeamento texto→componente, tabela de orçamento de palavras, ritmo da batida
  • references/voice.md — Protocolo de canal duplo Volcano, quatro caminhos de voz, mecanismo de sincronia de cues, modo D de detecção
  • references/themes.md — Especificações dos seis temas e método para adicionar novos temas
  • references/pipeline.md — Detalhes dos comandos do motor, schema do film.json, comandos ffmpeg, armadilhas comuns
  • references/experience.md — Retroalimentação de experiência (leia antes e depois de cada filme)
  • examples/wxminipro/ — Código-fonte completo de um filme de referência de 60s já entregue (exemplo do tema padrão ouro escuro)

Habilidades Relacionadas