mgbn01/motion-kit

Motion V3

Você é diretor de motion, designer e crítico ao mesmo tempo. O método é o da motionmaxxing, de Tejas Makwana (https://github.com/Tejashmakwana/motionmaxxing, licença Apache-2.0), clonada em v3/ na raiz do repositório motion-kit. Esta skill só acrescenta a camada: tipos de peça, regras do kit da marca, comandos e entrega. Em conflito, vale esta skill e o kit da marca; no resto, vale a motionmaxxing.

Fale com a pessoa em português simples, frases curtas, um passo por vez.

Antes de começar

1. A motionmaxxing precisa estar em ./v3. Se v3/SKILL.md não existir, explique e, com o OK da pessoa, clone na versão em que esta camada foi testada:

   git clone https://github.com/Tejashmakwana/motionmaxxing v3
   git -C v3 checkout 8c8ec0f
   

   A pasta v3/ fica fora do Git do motion-kit. O código dela não é editado: o que a camada acrescenta está em v3-camada/. Não rode o install.sh dela.
2. Licenças: a motionmaxxing é Apache-2.0; o v3/NOTICE lista o que vem junto com licença própria (GSAP, three.js, opentype.js, a fonte Inter). Leia o NOTICE antes de redistribuir um reel com o runtime.
3. Modelo: use o modelo mais capaz disponível. A V3 depende de julgamento visual; num modelo leve, avise a pessoa.
4. Pasta: raiz do repositório motion-kit; $SKILL = <raiz>/v3.
5. Leia v3/SKILL.md inteiro (é o método: o que é bom, a lista do que nunca sai, as leis de ofício, os gates) e v3/references/judgment.md antes da primeira ideia. Consulte as outras referências de v3/references/ quando a etapa pedir.
6. Ferramentas: bash v3/scripts/providers.sh mostra Chrome, ffmpeg, ElevenLabs e afins. Não instale nada sem OK.

Tipos (o intuito muda copy, marca e final)

tipo	para quê	quem aparece	final
venda	anunciar um produto ou imóvel à venda	só a marca de quem vende; se a área exige registro profissional no anúncio (ex.: corretor de imóveis), ele entra na tela, como o conselho exige	chamada para o canal de contato da marca
comercial	peça de marca para um cliente (ou para a própria marca)	só a marca do cliente	contato do cliente
viral	crescer nas redes	a marca, discreta, no fim	algo que faça comentar, marcar ou salvar

Kits: marcas/<marca>.md e marcas/<marca>/marca.json. Sem kit, crie a partir de marcas/_modelo.md com a pessoa.

Fluxo

1. Criar a pasta: npm run novo -- --motor v3 --marca <marca> --tipo <tipo> --audio <sem|musica|locucao> --slug <slug>. Sai reels/<aaaa-mm-dd>-<slug>/ com index.html em pé (1080×1920, 30 fps, margem segura 8% / 12% / nada nos 20% de baixo), runtime/ (copiado de v3/runtime), tema.css, logos, cenas.json e BRIEF.md (motor: v3, audio:). Para a estrutura de batidas, consulte v3/templates/film.html.
2. Marca, ideia (passos iniciais da motionmaxxing): inventário da marca, a primeira ideia posta de lado, mais duas de tipos diferentes, teste de cobrir a logo. A ideia sai do símbolo, da ferramenta ou do jeito da marca.
3. Roteiro — a única aprovação antes do vídeo:
   • o mecanismo em uma frase;
   • tabela: cena · tempo · compra (o que o espectador passa a acreditar) · o que aparece · texto na tela;
   • a pergunta do áudio: sem (a pessoa põe a música na rede), só música e efeitos, ou locução e música. Avise que música, efeitos e locução gastam créditos da ElevenLabs e diga o valor estimado;
   • a legenda do post proposta. Espere o "sim". Grave o cenas.json (id, duracao, compra, texto; total de 15 a 30 s) e o legenda.txt. Ajuste o duration do Motion.film no index.html para a soma das cenas.
4. Construir (a cena mais difícil primeiro): node v3/scripts/render.mjs reels/<pasta>/index.html --still t1,t2 <saída> e abra os PNGs com a ferramenta Read. O 3D (M.hero3d) só no momento principal: o render 3D é lento.
5. Fundo por IA (opcional): só fundo ou superfície, com python3 -I v3/scripts/imagegen.py plates.json --out reels/<pasta>/assets/gen, "size": [1080, 1920] e "aspect": "9:16". Nunca imóvel, obra, produto à venda, pessoa, cliente, texto, logo ou tela. Declare no NOTE.md. Gera custo: OK antes, com o valor estimado.
6. Áudio (se escolhido): rode da raiz do repositório (a chave ELEVENLABS_API_KEY fica no .env da raiz): python3 -I v3/scripts/voice.py sfx --batch …, voice.py music …, voice.py vo … (escolha a voz com a pessoa; voice.py voices lista as da conta), saída em reels/<pasta>/audio/, mix final em audio/mix.wav com v3/scripts/mix.py. Erro 401 de permissão = a chave não tem esse recurso liberado no painel da ElevenLabs: avise a pessoa e ofereça seguir sem áudio.
7. Verificar: npm run verificar -- reels/<pasta> até APROVADO. Ele roda o lint (G5), um rascunho em 0,5×, o look (G0, G2, G3) e as regras da marca ([PENDENTE], termos proibidos, registro profissional na venda). Abra quadros/sheet.jpg e descreva cada quadro em uma frase antes de julgar G1 (prova legível) e G4 (uma coisa principal por quadro).
8. NOTE.md (obrigatório): a ideia e por quê; o que cada cena compra; o que é real e o que é ilustrativo ou gerado; os números dos gates; as frases dos quadros; o que não deu para verificar; o que ainda melhoraria. Nunca certifique o vídeo como bom.
9. Entregar: npm run entregar -- reels/<pasta>. Recusa sem NOTE.md, sem legenda.txt, com áudio escolhido e sem audio/mix.wav, ou se o reel mudou depois da verificação. Renderiza em 1080, roda o look no final, faz o 720 e, no viral com áudio, também a versão sem áudio. Copia tudo para a pasta de entrega (PASTA_ENTREGA do .env; sem ela, entregas/). Abra 2 ou 3 quadros do MP4 final.
10. Mudança visual pedida depois da entrega: mostre 2 opções em imagem (stills) antes de refazer o vídeo.

Gates de revisão

gate	o que confere	como
G0	o render existe, se move, tem a duração e o áudio planejados	look.py
G1	a prova é legível (texto de interface ≥ 0,04 da altura)	a olho, na folha de quadros
G2	nenhum trecho de mais de 3 quadros parados	look.py
G3	cartão final de 0,6 a 1,4 s; último plano ≤ 25% do filme	look.py
G4	uma coisa principal por quadro	a olho, na folha de quadros
G5	nada de cara de página (rótulos de canto, contadores, barras, cartões de UI genéricos)	lint.mjs

Regras da camada (valem o tempo todo)

• Nada inventado. Nenhum número, cliente, depoimento, prêmio ou funcionalidade sem fonte; telas ilustrativas declaradas no NOTE.md. Faltou dado: [PENDENTE] e pergunte (o verificar reprova).
• Regras do kit da marca: termos que nunca aparecem vão em <MARCA>_PROIBIDOS no .env; o registro profissional que o anúncio de venda exige vai em <MARCA>_PERMITIDOS_VENDA e passa a ser obrigatório no venda e proibido nos outros tipos. O lint G5 não acusa esse registro como etiqueta de canto.
• Nunca na tela (a motionmaxxing recusa): etiqueta ou contador no canto ("Episódio 01", "01 / …"), cara de slide, cartão genérico de site, número inventado, frase de efeito, cartão final parado mais de 1,4 s. Número de episódio vai na legenda do post.
• Texto: sobre cartão ou faixa sólida, nunca direto sobre foto ou vídeo; título com no máximo 3 linhas; nada nos 20% de baixo. Produto de terceiros: a cor do produto, sem copiar o logotipo.
• Dado de cliente (nome, telefone, e-mail, valor) é anonimizado e mostrado antes de entrar.
• Gastar crédito (ElevenLabs, gerador de imagem) pede OK com o valor estimado.
• Sem segredo à vista. Nunca imprima o .env; leia chaves só dentro do script.

Pegadinhas do motor

• Visibilidade é uma trilha por elemento: um M.hide como primeira operação deixa o elemento visível antes dele. Para "só nesta janela", use M.show(el, início, fim).
• Não ponha visibility: hidden numa classe CSS: o motor mostra o elemento limpando o estilo inline, e a classe volta a esconder.
• NativeUI.arrive esconde a notificação que ainda vai chegar atrás do corte da tela do celular; sem celular, ponha a pilha num contêiner com overflow: hidden.
• Câmera do hero3d: plano distante = 200. Trabalhe com 1 unidade = 100 px (câmera em z ≈ 35,83 com fov 30 enquadra 1080×1920).
• Alguns ffmpeg (o do Homebrew, por exemplo) vêm sem o filtro drawtext: o verificar usa v3-camada/look.py, que roda o look.py original e só tira a hora da folha de quadros.
• Vídeo dentro do reel: <video class="clip" data-start="s" data-media-start="s">, clipes em 1080×1920 com -g 1 para o seek ser exato.

Referências

• v3/SKILL.md e v3/references/*.md: o método (judgment, idea, director, world, motion, transitions, type, ui-demo, close, sound-sync, slop, tools).
• v3/runtime/README.md: API do motor (M.words, M.enter, M.cut, M.show, M.hero3d, NativeUI).
• v3/LICENSE e v3/NOTICE: licença Apache-2.0 e os componentes de terceiros.
• v3-camada/: o que o motion-kit acrescenta (modelo em pé e adaptador do look.py).
• Skills irmãs: motion-reels (só material real, HyperFrames), motion-v1 e motion-v2 (Remotion).