twodorz/motion-studio

Motion Studio

Crie filmes curtos (normalmente 9:16 1080×1920 reels, também 16:9 / 1:1 / 4:5) inteiramente em código.

• Imagem. Uma página HTML (comp.html) cujo window.renderAt(t) desenha o quadro exato para o tempo t.
• Captura. Chromium headless captura cada quadro; ffmpeg os codifica.
• Som. Sintetizado em Python a partir da mesma linha do tempo: música, efeitos sonoros e ambiente, masterizado para −14 LUFS.
• 3D (opcional). Os planos vêm de um pequeno path tracer GPU (pt.js), com luz suave, reflexos reais, profundidade de campo e desfoque de movimento.

Tudo que um espectador vê é uma função pura de t. É isso que torna as renderizações repetíveis, buscáveis e retomáveis.

Se a solicitação for para editar, legendar, comprimir ou corrigir cor de um vídeo que já existe, ou para construir slides ou animação de site, diga que esta skill não é a ferramenta adequada e ajude diretamente. Um promo cortado a partir de filmagens fornecidas (um evento, um DJ, a festa do ano passado) ESTÁ no escopo: use templates/footage/ e references/footage-promos.md.

O que está nesta skill

Caminho	O que é	Leia quando
references/setup.md	Instalação única do estúdio (Node, ffmpeg, Playwright, Python venv, verificação de GPU)	Primeiro uso em uma máquina
references/render-pipeline.md	O contrato de renderização, modos do render.mjs, renderizações em blocos, pegadinhas do ffmpeg, determinismo, folhas de contato	Construindo ou renderizando qualquer filme
references/design-rules.md	Regras de narrativa, layout, tipografia, movimento e transição aprendidas com feedback real de clientes; auditorias	Antes de storyboard e antes de cada revisão
references/sound.md	Trilha sonora orientada a eventos + design de som, alvos de mixagem, medições, finalização de loudness	Ao trabalhar com áudio
references/path-tracer-3d.md	O path tracer 3D: cenários, materiais, luzes, modelagem de produto em dimensões exatas, câmeras, match cuts, custos	Apenas quando o filme precisar de cenas 3D
references/claims-and-sources.md	Obtendo fatos corretos: fontes oficiais, CLAIMS.md, o que nunca afirmar, capturando sites com segurança	Qualquer filme com fatos, preços, especificações de produto ou marca de cliente
references/footage-promos.md	Promos de evento/clube/artista cortados a partir de filmagens fornecidas: o que os clientes pediram, grade de batida musical, transições de DJ, enquadramento de rosto, técnicas de gráficos	Qualquer promo construído a partir de filmagens reais
templates/film/	Um reel 2D completo e funcional (15 s, tipografia cinética, cartão de produto, contador, gráfico, CTA) + scripts de renderização, som e finalização	Comece cada filme 2D a partir daqui
templates/film-3d/	O path tracer + cenários de exemplo (estúdio, sala, casa) + um filme 3D funcional e ferramentas de look-dev	Comece um filme 3D a partir daqui
templates/footage/	Pipeline de promo de filmagens: lista de planos na grade de batida (cortes, grades, divisões, tiras, rampas, íris), enquadramento de rosto, BPM / fase do kick / drops medidos, transições de DJ, um kit de ferramentas gráficas (máscaras de texto, texto atrás de pessoas, tickers, centralização óptica) + um exemplo	Comece cada promo de filmagens a partir daqui
scripts/setup_studio.ps1 / .sh	Cria uma pasta de estúdio e instala tudo (pergunta antes de baixar)	Primeiro uso
scripts/new_film.mjs	Copia um template para <studio>/films/<nome>	Cada novo filme

O fluxo de trabalho

Siga estas etapas em ordem. Cada uma existe porque pulá-la já custou uma revisão de cliente.

1. Briefing.
   • Obtenha a duração, formato(s), fps (30 padrão; 25 para editores PAL), idioma, CTA e onde o filme será postado.
   • Peça os arquivos da marca (logo SVG/PNG, fontes, cores, posts existentes). Sem eles, leia a marca a partir do site deles.
   • Se a pessoa disser "manda ver", ainda assim confirme qualquer coisa que mude o produto ou as alegações. Ritmo e estilo são seus para decidir.
2. Pesquisa e fatos (references/claims-and-sources.md).
   • Colete cada número e alegação de fontes oficiais em CLAIMS.md antes de escrever qualquer texto.
   • Quando duas fontes conflitarem, deixe o número de fora e avise. Uma especificação errada em um anúncio é pior do que nenhuma especificação.
3. Storyboard em uma grade de batida.
   • Escolha um BPM para que a duração seja um número inteiro de batidas (ex.: 30 s = 48 batidas a 96 BPM; 15 s = 30 batidas a 120 BPM).
   • Coloque cada mudança de cena, legenda e evento sonoro nessa grade (bar(n, beat) / bt(b)).
   • Escreva o storyboard como uma tabela curta (batida → imagem → texto → som) e compartilhe antes de construir, se a pessoa estiver acessível.
4. Estruturação. Execute node <skill>/scripts/new_film.mjs <studio> <nome> [film|film-3d|footage], depois edite comp.html (2D), film.js + world.js + comp.html (3D), ou sources.json + edit.json + comp.html (filagens; siga references/footage-promos.md).
5. Construa em loops pequenos. Renderize folhas de contato em baixa qualidade (node render.mjs beats 0.5,4,8,… 0.25 sheet) e olhe para elas. Corrija, refaça a folha. Nunca julgue movimento a partir de um quadro. Faça folhas de cada batida (ou meia batida) em todo o filme antes de qualquer renderização final.
6. Auditoria (node render.mjs audit 0.25). O texto nunca deve se sobrepor ao produto ou a outro texto, e deve permanecer dentro da área segura da plataforma. Corrija cada ocorrência; não discuta com a auditoria.
7. Som. Execute python audio.py out/mix.wav out/stems, depois python check.py: loudness por seção, espectro, teste de sirene/glide, cliques.
8. Renderização final. Pergunte primeiro (veja "Etiqueta de renderização").
   • Filmes 2D levam minutos: node make.mjs frames + encode.
   • Filmes 3D levam horas: node render.mjs chunks + concat.
9. Finalização. node make.mjs finish normaliza o loudness (−14 LUFS, −1.5 dBTP), multiplexa sobre a imagem (a imagem é o relógio mestre, nunca -shortest) e escreve uma cópia leve -share. Verifique contagem de quadros, duração e loudness na saída.
10. Revise o arquivo final, não a composição. Extraia quadros do mp4 codificado (a cada 0.5 s) em uma folha e olhe cada um. Depois entregue com uma nota curta (romeno/inglês conforme o cliente falar): o que contém, de onde vêm os fatos, o que o cliente deve confirmar.

Etiqueta de renderização (o computador da pessoa é dela)

Uma renderização 3D mantém a GPU a 100% por uma hora ou mais e deixa a máquina lenta. Escrever centenas de imagens de quadro também faz o Windows Defender revistar cada arquivo. Alguém já teve que gritar "pare, você está fritando meu PC". Então:

• Antes de qualquer trabalho que carregue a máquina por mais de alguns minutos, diga o que é, quanto tempo leva e como vai se sentir, e então espere por um sim. Ofereça:
  • modo suave (NICE_MS=25 DUTY=.35): pausas entre passes de GPU, para que a área de trabalho permaneça utilizável;
  • velocidade máxima;
  • mais tarde / durante a noite.
• Prefira render.mjs chunks (blocos mp4 de 1 segundo, retomáveis) em vez de escrever cada quadro como PNG.
• Inicie renderizações longas como processos desanexados, para que um chat fechado não os mate no meio do caminho (Windows: Start-Process node -ArgumentList 'render.mjs','chunks' -WindowStyle Hidden).
• Quando for mandado parar, pare imediatamente. Mate a árvore de processos (Windows: taskkill /T /F /PID ...), confirme com uma lista de processos que nada restou e diga o que ainda está usando a máquina (ex.: Defender escaneando arquivos escritos) sem culpar a pessoa.
• Folhas curtas e quadros de teste únicos não precisam de permissão. Eles levam segundos.

Inegociáveis (cada um já custou uma revisão)

• renderAt(t) é pura.
  • Sem estado entre quadros, sem Math.random() (use mulberry32 com semente), sem transições ou animações CSS, sem timers.
  • node render.mjs verify renderiza quadros fora de ordem; eles devem corresponder.
• Carregue cada peso de fonte antes do quadro 0 (document.fonts.load para cada face usada). Uma face usada no meio do filme pinta invisível por um quadro.
• Nunca permita que dois blocos de texto se sobreponham, ou que texto cubra o produto.
  • Um título de saída desaparece antes do próximo ocupar seu lugar.
  • Contadores trocam sequencialmente (sai o antigo, depois entra o novo); dois números um em cima do outro parecem quebrados.
• Legendas na tela por ≥ 1.5 s, ≤ 7 palavras cada, uma ideia por batida. Faça do quadro 0 uma miniatura legível.
• Nunca invente um número, cliente, avaliação ou resultado. Mostre preços apenas com uma prova datada na tela, e apenas com a aprovação do cliente.
• Som é levado a sério, a menos que seja solicitado o contrário. Nada de marimbas de brinquedo ou sinos para um produto de tecnologia, e sem glides tonais contínuos: o som de faísca de um reel foi chamado de "sirene do apocalipse".
• Use UI real e assets reais (cortes do Playwright do próprio site do cliente em alto DPR). Nunca redesenhe a UI ou o logotipo de um cliente à mão. Nunca clique em comprar, enviar ou enviar em um site real.