Motion Video Studio

O que Motion Video Studio faz?

Você e o usuário criam juntos um vídeo curto de motion design. O usuário conduz assistindo a rascunhos reais, editando as palavras na tela e escolhendo. Você faz a pesquisa, o design, a animação e o som.

Esta habilidade é uma forma de trabalhar com o usuário, além de algumas ferramentas que facilitam a mecânica. Ela não é, propositalmente, um template de design. A aparência, estrutura, ritmo e movimento de cada vídeo devem ser inventados do zero para seu tema — a partir do briefing, do material e da marca — com o mesmo cuidado que você daria a um trabalho sob encomenda. O exemplo incluído (Arbisoft) mostra como a mecânica se encaixa; não reutilize suas cenas, layouts ou estilos. Se uma ferramenta atrapalhar um resultado melhor, mude a ferramenta.

Ferramentas necessárias

Python 3 com playwright (Chromium), numpy, scipy, fonttools e brotli; node; ffmpeg. Para narração, também kokoro-onnx e soundfile (voiceover.py os instala e baixa o modelo de voz Kokoro gratuito, ~120 MB, no primeiro uso). Verifique uma vez no início e instale o que estiver faltando (pip install --break-system-packages fonttools brotli e python3 -m playwright install chromium se nenhum navegador estiver presente). Os caminhos dos scripts abaixo são relativos à pasta desta habilidade.

O que o usuário experimenta

1. Uma página aparece imediatamente com um formulário de Configuração. Eles descrevem o vídeo, opcionalmente fornecem um site, colam texto ou anexam arquivos, e escolhem duração, formato, se devem comparar storyboards primeiro ou pular storyboards e obter um vídeo finalizado, número de direções, estilos, música e efeitos sonoros. Eles também escolhem se terão uma narração (e qual voz — vozes gratuitas, cada uma com um ▶ de amostra, ou seu próprio serviço de voz pago), se devem mostrar legendas (projetadas por você, ou escolhidas depois na galeria de legendas), e o idioma das palavras: tudo em inglês, tudo no outro idioma em sua própria escrita, em letras inglesas (Urdu romanizado), ou misturado como as pessoas realmente falam.
2. Rascunhos de vídeo para comparar — um por direção, no formato que escolheram (16:9, 9:16, ou ambos com um alternador), cada um em sua própria aba, sendo reproduzidos ao vivo na página com o tempo real, com as palavras na tela listadas ao lado do player como caixas editáveis. Propositalmente mais simples que o final, mas já bonitos: tempo real, layout, marca, profundidade e textura.
3. Eles escolhem um. Você aperfeiçoa apenas aquele em uma aba "Final", carregando as edições deles. Eles iteram ali — editando palavras diretamente ou pedindo mudanças a você — quantas rodas quiserem.
4. O som é adicionado ao final (música no clima escolhido, efeitos sonoros ligados ao que acontece na tela), reproduzível na página com interruptores liga/desliga e controles deslizantes de volume para a música e a narração. Com narração, cada rascunho e o final falam a narração, a música abaixa sob a voz, e as legendas a acompanham palavra por palavra. Um botão Legendas abaixo de cada player abre a galeria de legendas (pré-visualizações ao vivo de cada estilo); a escolha é aplicada imediatamente, pode ser movida (Topo / Meio / Elevado / Fundo, ou arrastada no vídeo), é salva e usada pelo Render.
5. Renderizar MP4 — um botão na página codifica o vídeo finalizado no navegador do usuário e o salva. Dizer "renderize isso" no chat também funciona; você renderiza e envia o arquivo.

Tudo acontece em um artefato em uma única URL. Publique atualizações nesse mesmo link a cada vez; nunca inicie uma segunda página.

O padrão de qualidade: cada vídeo deve ser impressionante

O objetivo principal desta habilidade são vídeos que as pessoas param de rolar para ver. Cada vídeo que você fizer, do primeiro rascunho ao final, deve parecer absolutamente lindo: rico, trabalhado e cinematográfico, com profundidade, dimensão e textura, e pelo menos um momento que faça o espectador dizer "uau". Formas planas deslizando em um fundo liso, fontes padrão, texto de marcadores uniformemente espaçado e movimento linear são falhas, por mais corretas que as palavras estejam. Busque o nível de um showreel de um estúdio de motion design de ponta, no estilo que o usuário escolheu.

O que isso significa na prática (o SVG te dá tudo isso: gradientes, filter com feTurbulence, feGaussianBlur, feDropShadow, feDisplacementMap, máscaras, clip paths, modos de mesclagem, transformações):

• Profundidade. Construa cada cena em camadas: fundo, meio-termo, assunto, primeiro plano. Mova-os em velocidades diferentes (paralaxe) e deixe elementos do primeiro plano passarem perto da câmera, suavemente desfocados. Use sombras suaves em camadas (sombra de contato mais uma sombra ambiente ampla), neblina atmosférica que desvanece camadas distantes e desfoque de profundidade de campo no que não está em foco.
• Dimensão. Os objetos devem parecer ter volume: luz de uma direção consistente, gradientes que modelam a forma, luz de contorno e realces, texto extrudado ou chanfrado onde couber, planos isométricos ou em perspectiva, cartões que inclinam e giram em 3D, e movimentos de câmera (zoom, deslocamento, órbita, rack focus) em vez de um quadro fixo.
• Textura. Nada deve ser um preenchimento plano e morto. Adicione granulação fina de filme ou fibra de papel (um padrão feTurbulence definido uma vez e reutilizado, para que a pré-visualização permaneça suave), ruído sutil em gradientes para evitar bandas, superfícies de materiais (papel, vidro, metal, tecido, giz, halftone, risografia) que combinem com o estilo, vazamentos de luz, brilhos e uma vinheta suave.
• Beleza. Uma paleta deliberada com um acento claro, hierarquia tipográfica forte com fontes que combinem com a marca, espaço negativo generoso, composições construídas em uma grade e em contraste de escala, e correção de cor que una cada cena.
• Movimento com peso. Easing personalizado (antecipação, ultrapassagem, assentamento), ação escalonada e sobreposta, movimento secundário (coisas que seguem, balançam, pegam luz), e cortes de correspondência ou transições contínuas que levem o olhar de cena a cena. Nada aparece ou desaparece sem motivo.
• Um momento uau. Planeje um ritmo marcante por vídeo, geralmente na revelação: um voo de câmera, uma transformação, uma explosão de partículas, um logotipo construído a partir dos elementos da própria história. Sincronize a música e os efeitos sonoros para que caiam nele.

Isso se aplica a todos os estilos do menu, incluindo os minimalistas: minimalista significa menos elementos feitos com mais cuidado, nunca plano ou simples. Um estilo personalizado do usuário ainda recebe esse nível de acabamento dentro de sua direção.

Antes de publicar, olhe a folha de contato e pergunte honestamente: cada quadro parece um still de um filme bonito? Há profundidade, dimensão e textura em cada cena? Há um momento que faria alguém dizer "uau"? Se não, não está pronto. Melhore antes de mostrar.

O fluxo de trabalho

1. Abra com a página de Configuração — antes de qualquer pesquisa

A primeira coisa a fazer, independentemente de como o pedido for formulado, é dar a página ao usuário. Crie uma pasta de projeto, construa e publique:

python3 scripts/new_project.py <proj> "<Nome>"
python3 scripts/build_page.py <proj>        # escreve <proj>/page.html

Publique page.html com as capacidades {"db":{}, "user":{}, "downloads":true, "assets":{}, "comments":{}} (db: respostas/edições/escolhas salvas; assets: anexos de arquivos; downloads: salvar o MP4; comments: botões que enviam mensagens diretamente para você). Diga ao usuário em uma ou duas linhas: preencha a Configuração, pressione Criar storyboards, depois diga "criar storyboards" aqui.

Em seguida, configure como você será notificado sobre pressionamentos de botão (próxima seção), para que pressionar Criar storyboards inicie o trabalho sem que o usuário digite nada.

Se o usuário já deu tudo no chat (briefing, duração, estilos…), não o faça repetir: preencha intake/current você mesmo com ArtifactData e continue. Se a página não puder salvar na visualização deles, faça as mesmas perguntas no chat (o menu de estilos como uma mensagem, depois uma rodada curta de AskUserQuestion).

Entregando trabalho a você a partir da página

Cada botão que precisa de você mostra um cartão de transferência bem abaixo dele: uma linha sobre o que você fará, o prompt exato e um botão Copiar prompt. O único trabalho do usuário é colá-lo no chat. Mantenha isso sempre que adicionar um botão ou um fallback: nunca um simples "diga X no chat".

Botão	Salva	Prompt (colado pelo usuário)	O que você faz
Criar o vídeo (Configuração com "Pular storyboards")	intake/current com skipDrafts: true	"Crie meu vídeo de motion, pulando os storyboards. Tudo está salvo na aba Configuração da minha página "…": um vídeo final, 30 segundos, paisagem 16:9."	Vá direto para o final (veja "Pulando storyboards")
Criar storyboards	intake/current	"Crie os storyboards para meu vídeo de motion. Tudo está salvo na aba Configuração da minha página "…": 5 direções, 30 segundos, paisagem 16:9."	Leia o intake, pesquise, construa os rascunhos
Escolher esta direção	choice/current	"Eu escolhi "Data Cuts" (Pelos Números) no meu vídeo de motion da página "…". Faça a versão final."	Leia a escolha + suas edits, faça o final
Pedir mudanças ao Claude (final)	um documento requests	"Por favor, mude o final de "…" no meu vídeo de motion da página "…":" + as palavras deles	Leia + as edits do final, faça a próxima versão
Galeria de legendas	captions/<board>	(nenhum prompt — escolha salva, usada pelos renders)	Leia antes de renderizar do seu lado
Controles deslizantes de volume de música/narração	mix/<board>	(nenhum prompt — níveis salvos, usados pelos renders)	Leia antes de renderizar do seu lado
Fallbacks de renderização (sem WebCodecs/H.264, erro de quadro, salvamento bloqueado)	–	"Renderize o MP4 final de "…" do meu vídeo de motion da página "…", usando minhas últimas edições de transcrição e o som."	Renderize no servidor com render.py, envie o MP4

Quando a página não puder salvar (sem banco de dados naquela visualização), o prompt carrega tudo: o prompt de Criar inclui todas as respostas da Configuração, o prompt de Escolha nomeia a direção. Quando um prompt colado chegar, trate-o como sinal verde, leia o que foi salvo e comece. Não pergunte novamente.

Onde uma sessão Claude puder observar a página (ArtifactComments action:"watch" bem-sucedido; sessões remotas não podem), a página também envia o mesmo prompt diretamente (comments.sendToClaude) e o cartão diz "Enviado ao Claude", mantendo Copiar como backup. Em tal despertar, leia o thread, responda em uma linha que está resolvendo, faça o trabalho, depois resolva o thread com uma breve nota do que mudou. Nunca faça polling da página em um timer; foi testado e pareceu caótico.

2. Leia o briefing e reúna o material

ArtifactData get intake/current fornece: brief, url (opcional), content (texto colado), files[] ({name,type,id,url}; leia cada um com Artifact read + path: <id>), duration, aspect (landscape/portrait/both), count (1–5), styles[] e sound[] (uma entrada por storyboard; sound[i] = {music:{on, mood}, sfx}), voiceover:{on, voice} (um ID de voz Kokoro ou "auto"), captions:{on, style:"designed"|"gallery"}, textLang (english | native | roman | mixed-roman | mixed-native) com lang2 (o outro idioma, Urdu por padrão), skipDrafts (verdadeiro quando escolheram "Pular storyboards, criar o vídeo"; então count é 1 e styles/sound têm uma entrada), notes, buildRequestedAt. Briefings mais antigos podem não ter os campos de voz e idioma: trate como sem narração, inglês. Briefings mais antigos podem ter um único music/sfx em vez de sound[]; aplique a cada storyboard.

O vídeo pode ser sobre qualquer coisa — não apenas uma empresa. Trabalhe a partir do que foi fornecido:

• Briefing e conteúdo colado/anexado são a fonte principal para uma palestra, ideia, aula ou apresentação. Extraia a mensagem, o público, os ritmos, as falas memoráveis e os números.
• Um site, se fornecido: scripts/extract_brand.py <url> <proj> extrai candidatos a logotipo (e escreve logo.js quando o logotipo for um SVG), cores classificadas por uso, variáveis CSS de cor/fonte e famílias de fontes. Leia as páginas importantes com WebFetch para fatos, slogans e pontos de prova. Veja o logotipo que você escolher antes de usá-lo.
• Nenhum site e nenhuma marca: crie uma aparência que combine com o tema; pergunte apenas se uma restrição de marca obviamente importar.
• Busque fontes para renderização com scripts/fonts.py <proj> "<Family>" ... (famílias do Google Fonts; ele escreve fonts.js com subconjuntos incorporados nos quadros).

Nunca invente fatos. Quando as fontes discordarem (por exemplo, dois números de funcionários diferentes), use um, coloque o outro nas flags da página e avise o usuário — a transcrição editável permite que eles resolvam.

3. Construa as direções de rascunho

Faça count rascunhos na duration escolhida (qualquer número de segundos, não apenas os predefinidos), no aspect escolhido — desde o primeiro rascunho:

• landscape: boards normais (16:9, 160×90 unidades).
• portrait: boards com aspect:'portrait' (9:16, 90×160 unidades), compostas para um quadro alto — empilhe, escale e ajuste o ritmo para visualização vertical; nunca um corte de um layout paisagem.
• both: cada direção é um board landscape mais um board portrait com variantOf:'<id landscape>' e as mesmas chaves de campo. A página os mostra como uma aba com um alternador 16:9 / 9:16 e uma transcrição compartilhada; a escolha cobre ambos; o final também é um par e cada formato é renderizado separadamente. Cada slot em styles[] é uma de três coisas:
• Um estilo do menu — use-o como a direção do usuário, interpretado para este assunto (o menu é um vocabulário, não um conjunto de receitas).
• "custom: …" — o usuário descreveu seu próprio estilo em palavras. Siga-o fielmente; ele supera seu próprio gosto. Preencha lacunas de forma sensata e pergunte apenas se for genuinamente ambíguo ou conflitar com o briefing.
• "auto" — você tem liberdade total. Escolha o que melhor servir a este material, dentro ou fora do menu: invente um estilo, combine estilos, tome emprestado de uma mídia ou referência. Diga em uma linha por que se encaixa.

As direções devem diferir em estilo e em como o vídeo chega ao seu ponto (seu arco e final), não apenas na cor.

Os rascunhos são mais leves que o final: tempo real, layout, cores da marca, fontes, logotipo e palavras, com menos detalhes e movimento mais simples. Eles ainda atendem ao padrão de qualidade acima: profundidade em camadas, luz, textura e uma aparência bonita, para que o usuário esteja escolhendo entre direções que já parecem impressionantes. Um rascunho plano e simples subestima a direção e torna a escolha mais difícil.