mr0ibrahim/motion-graphics

Estúdio de motion graphics

Os vídeos são renderizados a partir de código: uma página HTML com um seek(t) puro é capturada quadro a quadro com Playwright e codificada com ffmpeg. Texto, UI, gráficos, diagramas e movimento são sempre código. Modelos de IA fornecem ilustrações, placas filmadas e narração (references/ai-assets.md).

Portões de estágio (nunca pule; obtenha aprovação em cada ✋)

1. Briefing: objetivo, público, plataforma/formato, duração, idioma + dialeto, CTA, marca, narração sim/não, fatos. Escolha o gênero (references/genres.md); ele define a estrutura, o preset de energia e o gancho inicial.
2. Conceitos ✋: três ideias genuinamente diferentes, cada uma com uma linha mais seu gancho. O usuário escolhe uma.
3. Roteiro + storyboard ✋: um quadro de cenas (uma mensagem por cena, gancho ≤ 1,5 s), a bíblia de estilo e os assets principais (GenerateImage → cut2.py). Construa as cenas como styleframes, depois node scripts/storyboard.mjs film.html storyboard/name --template templates/storyboard.html --title "…" gera html/png/pdf/json a partir do próprio filme (references/storyboard.md). Nada é animado por completo até que o storyboard seja aprovado.
4. Animático ✋: node scripts/render.mjs film.html checks_layout.txt --check deve resultar em 0 problemas de layout, 0 indicações perdidas e 0 erros de página. Em seguida, faça um rascunho sem desfoque a 30 fps (render_chunks.mjs film.html out_draft 30 1) com a mixagem de SFX, para revisão de ritmo.
5. Final: render_chunks.mjs film.html out 60 4 → sfx.mjs → mix.sh → export.sh → qa.sh no master e no arquivo social. Em seguida, veja a folha de contato e a folha de transições (references/render-qa.md). Apenas revisões pontuais após isso: altere somente o que foi solicitado.

Regras rígidas (cada uma é uma lição de uma falha real)

1. Granulado é estático: um tile semente desenhado uma vez, nunca re-randomizado por quadro. O teste FLICKER da varredura de tremulação deve estar ok.
2. Nenhuma música por padrão: SFX sincronizado com o movimento + narração. Música apenas sob solicitação e licenciada (references/sound.md).
3. Um sistema de movimento: durações apenas dos tokens ENERGY. Molas z ≥ 0,78 (overshoot ≤ 2 %), sem tremor, sem quique em texto, arcos para movimentos longos, um cross-fade em cada mudança de estado (references/motion-system.md).
4. Renderize com o renderizador em chunks (render_chunks.mjs): um navegador novo por chunk, tentativas e retomada ao executar o mesmo comando novamente. Nunca uma renderização longa de processo único para filmes com mais de ~20 s.
5. Transcreva corretamente: align.py (large-v3, passadas VAD ligado/desligado, passadas de lacuna, forçado ao roteiro) → words.json. Nunca use uma única passada do whisper.
6. As legendas pertencem à sua cena: elas desaparecem e avançam com ela e usam suas cores. Um elemento está 80 % visível na palavra falada correspondente (±2 quadros).
7. Estilo: ilustrado, personagens consistentes (uma imagem de referência → cada pose). Explicadores técnicos usam visuais conceituais (fluxos, diagramas, tabelas, comparações, linhas do tempo) planejados por frase falada, não stock decorativo.
8. Duas exportações: o master a 60 fps + um arquivo social/telefone a 30 fps. Envie-os como anexos. Um link de download direto, um upload ou uma postagem apenas com a autorização explícita do usuário.
9. Formato longo (3–10 min): planeje capítulos, contagem de cenas (≈ 1 a cada 4–7 s), um ciclo de variação de ritmo e variação visual, uma página por capítulo (references/genres.md → Long-form).
10. Mantenha o pacote dividido: scripts/, references/, templates/. Não crie um único arquivo gigante.

Também: árabe anima por palavras inteiras apenas (references/arabic-rtl.md) · nenhum texto gerado por IA no quadro · produtos, preços e avaliações fictícios são rotulados como SAMPLE · fatos vêm apenas do usuário · o herói preenche 60–70 % do quadro · ≥ 3 transições diferentes em um anúncio, nunca a mesma duas vezes seguidas (references/transitions.md) · nenhum silêncio superior a 1 s.

Padrões (diga o que você escolheu)

9:16 1080×1920 para social, 16:9 para web/YouTube · energia ad para anúncios e reels, explainer para explicadores com narração, calm para luxo/capítulos longos · master 60 fps + social 30 fps · −14 LUFS, pico verdadeiro ≤ −1,5 dBTP · SFX + narração, sem música · granulado estático 0,06 · estilo ilustrado plano, uma cor de destaque, Noto Kufi Arabic / Cairo + Figtree.

Configuração

Todos os caminhos scripts/, templates/ e references/ são relativos à própria pasta desta skill (a pasta que contém este SKILL.md, onde quer que tenha sido instalada: .claude/skills/motion-graphics, .agents/skills/motion-graphics, ~/.cursor/skills/motion-graphics, …). Chame isso de $SKILL_DIR e execute scripts como node "$SKILL_DIR/scripts/render.mjs" … a partir da pasta do projeto. Execute npm i uma vez dentro de $SKILL_DIR. npm i (Playwright), depois npx playwright install chromium uma vez. Você também precisa de ffmpeg/ffprobe, Python 3 com numpy/scipy/pillow (QA, cut2) e pip install faster-whisper para align.py.

Exemplos práticos (no repositório GitHub mr0ibrahim/motion em examples/, não copiados na instalação): demo-ar/ (um anúncio de app em árabe do Golfo com 13 s: texto cinético RTL, personagens IA, paralaxe, empurrão de câmera, zoom/push/iris/split) · demo/ (um anúncio SAMPLE em inglês com 10,5 s).