Communitygithub.com

Motion Diorama

Produção de vídeos educacionais verticais 9:16 (30–60 segundos) em estilo 3D a partir de código para séries educacionais em português, em três modos ativos.

O que é Motion Diorama?

O Motion Diorama é uma skill de produção de vídeos educacionais 9:16 (30–60 segundos) em estilo 3D procedural, renderizado com Remotion e Three.js. A skill opera em três modos distintos: Modo A (diorama 3D semi-realista para paisagens/história, incluindo variante de mapa vivo), Modo B (desmontagem de objetos/máquinas para explicar seu funcionamento) e Modo C (ilustração anatômica 3D glossy para séries do corpo humano, seguindo um fluxo contínuo). Essa skill é indicada para desenvolvedores que desejam criar vídeos educacionais consistentes e de alta qualidade sem recorrer a footage real ou slideshow de imagens AI. O pipeline prioriza verificações antes da renderização final: timeline, stills e largura de texto devem passar por validação rigorosa. O timeline.json é a única fonte de verdade para temporização, sincronizada com o áudio original. A skill oferece dois modos de operação: "Modo Permanente" (padrão), onde a sessão avalia e corrige internamente sem interromper o usuário, e "Modo Clássico" com aprovações em duas etapas. Inclui QC autônomo fail-closed, renderização rápida por cena e conclusão com resumo/callback para construir audiência. Suporta as plataformas Claude Code, Cursor, Codex e similares, com dependências em Remotion, Three.js, FFmpeg e Python.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/wafiq8/motion-diorama/tree/HEAD/.claude/skills/motion-diorama

Perguntar na sua IA favorita

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

Documentação

Motion Diorama — Skill de Produção de Vídeo Educacional (v3.0 · edição pública)

Princípio central: verifique antes de renderizar, não depois. Tudo que pode ser verificado de forma barata (timeline, still-frame, largura do texto) DEVE passar primeiro. A renderização em resolução total ocorre apenas uma vez, no final, após todos os portões verdes.

Este arquivo é o NÚCLEO. Os detalhes visuais por modo estão em references/ — mode-a.md para o Modo A, mode-b.md para o Modo B, mode-c.md para o Modo C (OBRIGATÓRIO ler o correspondente ao modo do vídeo antes de construir a cena). Cenários de teste em evals/evals.md. Scripts em scripts/ são executados EXATAMENTE como estão — não reescreva suas funções.

Decisões fixas (do criador da skill — não as altere silenciosamente; se você usar esta skill e alterá-las, faça-o conscientemente)

  • Três modos ativos: Modo A (paisagem/história + variante mapa vivo), Modo B (desmontagem de objetos — funcionamento de objetos/máquinas) e Modo C (anatomia — Série Corpo Humano). O modo é escolhido pelo usuário por vídeo no prompt inicial; a sessão lê o arquivo de referência do modo antes da Etapa 2.
  • Objetivo: construir audiência. Fechamento padrão = conclusão (Modo A) / callback (Modo C) + fade para preto. NÃO há cartão/rótulo de série dentro do vídeo e NÃO há indicador de etapa/marcador de posição na tela (decisão do usuário em 13 Nov 2026, v2.8) — a identidade da série só vive na legenda. Call to value APENAS ocasionalmente, se o tópico se encaixar e o usuário solicitá-lo para aquele vídeo — não é um elemento obrigatório. Proibido CTA de venda.
  • Números/dados = HÍBRIDO: leitura em tela (overlay DOM) é o sistema principal para TODOS os números. Exceção: no máximo UM número herói 3D dourado dentro da cena por vídeo, apenas para o número central daquele vídeo — e o mesmo número DEVE continuar aparecendo como leitura/legenda, pois a versão 3D é um destaque visual, não um portador de informação.
  • Duração final 30–60 segundos, seguindo o áudio.
  • Áudio: esta skill é AGNÓSTICA em relação ao áudio — use qualquer MP3 de narração fornecido pelo usuário em public/narasi.mp3.
  • Música: arquivo do usuário em public/musik.* — não escolha música.
  • Fatos: a fonte do usuário é a referência PRINCIPAL e prevalece em caso de conflito. A sessão PODE complementar com pesquisa web, com a condição: a fonte deve constar no relatório final, dar prioridade a fontes autoritativas (jornais, instituições, oficiais), e alegações não verificadas DEVEM ser marcadas como incertas — é proibido apresentar palpites como fatos.
  • Operador único: uma pessoa. Todos os resultados DEVEM aparecer como arquivos na sessão (stills, preview, final) para poderem ser baixados.
  • Ritmo alvo: 1–2 vídeos/dia. Eficiência é requisito de design — reutilize scaffold, primitivas e componentes; não reconstrua o que já existe.
  • Portões — Modo Permanente é o padrão da edição pública: a sessão NÃO para para aguardar aprovação do usuário. O Portão 1 (resumo da timeline) e o Portão 2 (contact sheet de stills) são executados INTERNAMENTE: a sessão avalia seus próprios resultados em relação aos critérios escritos desta skill (PASS do validador + lista de verificação QC), corrige suas próprias descobertas (máx. 2 tentativas de correção por cena) e prossegue. As decisões seguem o BLOCO DE DECISÕES no prompt (padrão: narração longa acelerada com atempo até máx. 1,25×; fatos não verificados marcados no relatório). Perguntas não respondidas por esse bloco são feitas DE UMA VEZ em uma única mensagem antes do início da construção — é proibido perguntar no meio do caminho. A sessão só pode parar no meio para BARREIRAS DURAS: (a) material inexistente ou corrompido, (b) transcrição impossível de fazer, (c) narração ainda fora de 30–60 segundos após atempo máx. Se o prompt indicar "Modo Permanente: NÃO", aplica-se o portão clássico — duas aprovações do usuário (após a Etapa 1 e após a Etapa 3) com escada de relaxamento do Portão 2 baseada em evidências: 3 aprovações limpas consecutivas → 1 still por cena; mais 3 → opcional para tipo de cena comprovada; o Portão 1 nunca é relaxado; uma revisão visual importante restaura o formato completo; cada relaxamento é registrado no relatório final.

Proibições rigorosas

  • Proibido imagem AI/foto/2D/sprite/textura externa/modelo baixado como cena. Todo visual = geometria 3D procedural Three.js.
  • Proibido letterbox; câmera nativa 9:16.
  • Movimento apenas da câmera no espaço 3D (paralaxe real). Proibido simular movimento via zoom/pan de imagem 2D.
  • Humanos apenas como silhuetas escuras pequenas sem rosto. Sujeito principal do Modo A sem close-up (distância mínima da câmera 8 m para animais/objetos herói da paisagem) — no Modo C esta regra de distância não se aplica: o órgão herói realmente preenche o quadro; no Modo B esta regra só se aplica ao enquadramento da etapa de contexto — o objeto herói na etapa de laboratório realmente preenche o quadro (consulte references/mode-b.md e references/mode-c.md).
  • Um renderizador, um conjunto de materiais, um rig de iluminação para todas as cenas.
  • Proibido adivinhar duração a partir do número de palavras/storyboard. O timing vem APENAS do áudio original (consulte Timing).
  • Proibida animação de useFrame(), Math.random(), Date.now(), ou acúmulo de frames — todo movimento é derivado de useCurrentFrame() e constantes aleatórias com semente fixa.

Timing — timeline.json é a única fonte da verdade

  1. Verifique se public/narasi.mp3 existe. Se não existir: PARE, avise o usuário. Não determine nenhum timing antes do áudio estar disponível.
  2. Obtenha o timestamp por palavra com esta hierarquia: a. Timestamp nativo TTS (ex. ElevenLabs with-timestamps) se o usuário o fornecer — mais preciso. b. Fallback Whisper: modelo GRANDE apenas, language="id" forçado (não auto-detect), e Whisper fornece apenas o TEMPO — o texto das frases DEVE vir do roteiro oficial do usuário, não do resultado da transcrição (ASR indonésio erra facilmente em números e nomes).
  3. Monte docs/timeline.json exatamente com este esquema:
{
  "fps": 30,
  "audio_duration_s": 40.20,
  "total_duration_s": 41.00,
  "sentences": [
    {"id": 1, "text": "…", "start_s": 0.00, "end_s": 3.68, "scene": 1}
  ],
  "scenes": [
    {"id": 1, "sentence_ids": [1, 2], "start_s": 0.00, "end_s": 6.44}
  ]
}
  1. Regra de mapeamento: limite da cena = segundo de INÍCIO da primeira frase da cena seguinte; mapeamento baseado no CONTEÚDO da frase — proibido agrupar frases para preencher duração; diferença do corte real vs timeline ≤ 0,3 segundos.
  2. Execute python3 scripts/validate_timeline.py docs/timeline.json. Se FALHAR: corrija a timeline, repita. Proibido continuar enquanto FALHAR.
  3. Monte o resumo da timeline (número de frases, mapeamento das cenas, duração total) e avalie contra estes critérios — este é o Portão 1. Modo Permanente: não pare; salve o resumo para o relatório final. Modo portão clássico: mostre ao usuário e AGUARDE aprovação.
  4. total_duration_s deve ser 30–60 segundos. Fora disso: Modo Permanente — aplique a política do prompt (atempo máx. 1,25× para excedente; estique a pausa de fechamento para déficit) e registre no relatório; se ainda assim ficar fora do intervalo, é uma BARREIRA DURA: pare e relate. Modo clássico: relate ao usuário — não corte ou remende silenciosamente. Silêncio sem motivo é proibido; pausa de payoff de 0,3–1 segundo no fechamento é permitida e contabilizada no total.

Style lock (resumo — detalhes por modo em references/)

Modo A (detalhes em references/mode-a.md)

  • Diorama 3D estilizado semi-realista: paleta quente cinematográfica, um rig de iluminação crepuscular fixo, superfícies lisas e limpas, fundo simplificado. A paleta pode se ajustar ao tópico/estação; o rig de iluminação e o material não.
  • Título do tópico: tipografia SERIF em maiúsculas sobre um establishing shot em movimento. Hook = primeira frase da narração (pergunta / contestação de mito / paradoxo) que surge como texto + som + visual nos primeiros ±1,5 segundos.
  • Legenda: karaokê por palavra em blocos de 2–4 palavras (não uma palavra), palavra ativa em negrito, palavras-chave em cor de destaque, na zona segura inferior.
  • Leitura de dados: contador animado que se ativa exatamente quando o número é mencionado na narração + pequeno rótulo + linha de indicação; leituras seguintes com o mesmo estilo. O único texto 3D permitido: um número herói dourado para o número central (consulte Decisões fixas).
  • Câmera: percurso contínuo dentro do segmento; zoom em escada como estrutura argumentativa; corte seco apenas entre segmentos de fato, na forma de fade preto de ±0,1 segundo.
  • Estrutura da narração: para tópicos de sistema/fluxo use "siga um fluxo"; um vídeo pode conter dois fatos de um tópico com segmento de demonstração.
  • Fechamento: beauty shot + título/era serif repetido + frase de conclusão. Fade para preto; sem rótulo/cartão de série dentro do vídeo (v2.8). (Call to value apenas se solicitado para este vídeo.)

Modo B — Desmontagem de Objetos (detalhes em references/mode-b.md)

  • DUAS etapas de mundo: diorama de CONTEXTO quente estilo Modo A (objeto aparece inteiro em seu habitat) → etapa de LAB com fundo de grade técnica escura onde o objeto é desmontado; transição via zoom contínuo (fundo desvanece/íris), sem corte seco.
  • Um modelo de objeto herói procedural construído uma vez; visões explodidas e cortes são derivados do mesmo modelo.
  • SEM cartão de título (hook = primeira frase da narração no shot de contexto) e SEM HUD permanente — breadcrumb, contador de zoom e minimapa de referência são DESCARTADOS (decisão de pesquisa + direção v2.8). Navegação a partir de câmera contínua, rótulos leader-line e título de fase momentâneo.
  • Fases padrão: contexto → zoom + rótulo do objeto → DESMONTADO (rótulos das partes bilingues ID + termo EN, aparecem conforme a ordem da narração) → CORTADO (processo animado + leitura do processo) → EM FUNCIONAMENTO (cortes funcionando, siga um fluxo, rótulos de processo, partículas de fluxo com código de cores semânticas) → macro do mecanismo determinante → payoff do rótulo do princípio em uma linha enquanto a câmera recua.
  • Fechamento Modo B: frase de conclusão/princípio + fade para preto; sem cartão/rótulo de série (v2.8).

Modo C — Anatomia (detalhes em references/mode-c.md)

  • NÃO é um diorama: um órgão herói 3D glossy flutuando no vazio roxo escuro com bokeh; um modelo de órgão construído uma vez, usado em todas as cenas. Nome de série padrão de exemplo: "Série Corpo Humano" (substitua pelo nome da sua série).
  • Código de cores de fluxo ABSOLUTO: azul = pobre em oxigênio, vermelho claro = rico em oxigênio — nunca invertido, neste vídeo nem entre vídeos da série. Partículas celulares mudam de cor no ponto de troca, exatamente na sua frase.
  • Estrutura OBRIGATÓRIA siga-um-fluxo: a câmera acompanha um pacote através de todo o circuito; zoom em escada do órgão → sistema → microscópico → órgão → corpo inteiro (silhueta).
  • Hook = referência em tempo real ao espectador + contador vivo que roda sincronizado com o batimento visual do órgão desde o primeiro segundo. Título serif ATRASADO até ±5–8 segundos (após o hook), seguido de anotação de fato.
  • SEM indicador de etapa e SEM HUD (v2.8): a posição do fluxo é lida a partir do percurso da câmera; chip de rótulo anatômico preso ao órgão e acende quando sua parte está ativa.
  • Fechamento Modo C: contador final animado + frase CALLBACK que reflete o hook; fade para preto; sem cartão/rótulo de série (v2.8). Proibido gore/realismo médico gráfico.

Regras de texto (anti-corte — causa número um de revisões)

  • TODO texto obrigatório é overlay DOM (componente Remotion), NÃO texto dentro do canvas WebGL. A única exceção: número herói 3D híbrido em Decisões fixas — outros textos 3D são proibidos.
  • MEÇA cada texto com measureText/fitText de @remotion/layout-utils APÓS a fonte carregar; fontSize = min(limite do modo, resultado do fit); largura máxima 90% da largura do quadro; margem segura de 5% em todos os lados; respeite a zona segura da plataforma (evite ±250 px superior e ±310 px inferior para texto importante).
  • Se o texto não couber no tamanho mínimo de legibilidade: QUEBRE em duas páginas/linhas — proibido reduzir até ficar ilegível, proibido deixar cortado.
  • Contraste: texto claro sobre fundo claro deve ter contorno/sombra escura.
  • Rótulos leader-line seguem a mesma regra.

Áudio

  • A narração é o relógio mestre: todos os limites de cena, legenda, contadores e câmera leem docs/timeline.json — não há segunda fonte de timing.
  • Música do arquivo do usuário é colocada como base sob a narração (ducking simples; não cubra as palavras). Sem arquivo de música do usuário: não invente música — avise o usuário.
  • Final normalizado para −14 LUFS, pico ≤ −1 dB.

Fluxo de produção (a ordem não pode ser pulada)

  • Etapa 0 — Scaffold: use o scaffold do projeto já existente; renderizador, rig de câmera, style lock e primitivas NÃO são reescritos. Se o repositório ainda não contiver um projeto Remotion (primeira produção): construa o scaffold a partir da pasta starter/ no repositório deste pacote de skill (dependências com versão exata que já funcionou), depois trate-o como scaffold já existente.
  • Etapa 1 — Timeline: conforme a seção Timing → PASS do validador → Portão 1 (interno no Modo Permanente; aprovação do usuário no modo clássico).
  • Etapa 2 — Construir cena lê timeline.json e o arquivo de referência do modo deste vídeo (references/mode-a.md, references/mode-b.md ou references/mode-c.md).
  • Etapa 3 — Portão de stills: renderize 3 stills por cena (início/meio/fim da cena) + contact sheet. Modo Permanente: avalie a contact sheet contra a lista de verificação QC deste modo, corrija descobertas na etapa de stills (máx. 2 tentativas por cena), depois prossiga — não aguarde o usuário; salve a contact sheet + lista de avaliação para o relatório final. Modo clássico: mostre e AGUARDE aprovação do usuário. Corrija na etapa de stills — muito mais barato do que no vídeo.
  • Etapa 4 — Preview + QC autônomo: renderize preview em escala 0.5, execute o QC abaixo sobre os próprios resultados, corrija todas as descobertas (renderize novamente apenas a cena alterada) antes de relatar.
  • Etapa 5 — Final: renderize em resolução total UMA VEZ; execute bash scripts/check_output.sh out/<slug>-final.mp4; mostre o arquivo + relatório QC na sessão.

Renderização rápida (pipeline fixo)

  • Renderize POR CENA: out/scenes/scene-N.mp4; combine com FFmpeg concat -c copy (parâmetros codec/resolução/fps DEVEM ser idênticos entre cenas, senão a combinação quebra).
  • --concurrency = número de núcleos de CPU da sessão (verifique nproc), não o padrão.
  • Preview sempre --scale=0.5; resolução total 1080×1920 apenas na Etapa 5.
  • Mantenha o custo por frame baixo: geometria primitiva, instancing para elems

...

[truncado para tradução]

Habilidades Relacionadas