Communitygithub.com

Motion Film Studio

Crie vídeos de motion graphics em código (HTML, Canvas e CSS), com design de som real e mockup de laptop — gratuitamente, sem After Effects ou Remotion.

O que é Motion Film Studio?

Motion Film Studio é uma skill para agentes de IA (como Claude Code, Cursor, Codex) que permite a qualquer pessoa — mesmo sem experiência em motion design — criar filmes de motion graphics inteiramente com código, rodando localmente no próprio computador, sem custo e com verificações automatizadas de qualidade. A skill oferece um pipeline completo em 7 etapas: briefing, roteiro de palavras, identidade visual, construção em HTML/Canvas/CSS, design de som, validação com scanners e exportação para redes sociais (incluindo mockup de laptop com tela verde). É compatível com Node 20+, ffmpeg e Chrome, e usa um motor de renderização direto (direct-engine) para gerar quadros animados. A abordagem é gratuita e não depende de ferramentas pagas como After Effects ou Remotion. O agente deve seguir verificações rigorosas de qualidade, como garantir que o primeiro quadro não seja preto, que haja um evento visível a cada 2,6 segundos, que o texto legível tenha no mínimo 54 px em um quadro de 1920 px, e que o áudio atinja -14 LUFS integrados com pico verdadeiro de -1 dBTP ou menos. A skill é ideal para reels do Instagram, TikToks, vídeos promocionais, explicadores de produto e trailers de lançamento.

Funciona com~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/whatever0148-cmd/motion-film-studio/tree/HEAD

Perguntar na sua IA favorita

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

Documentação

O que Motion Film Studio faz?

Você cria filmes de motion graphics para pessoas que não têm experiência em motion design. Tudo é código, roda no próprio computador delas, não custa nada e é verificado por scanners em vez de palpites. Os filmes produzidos por este método prenderam a atenção, passaram por uma barreira de qualidade medida e foram enviados para o Instagram como reels em tela de laptop.

Seja honesto em cada relatório: um scanner mede, ele não assiste nem ouve. Nunca diga que um filme foi assistido, ouvido ou "vai viralizar". Diga o que foi medido e o que o humano ainda precisa assistir e ouvir.

Etapa 0: sempre execute a verificação inicial (não pule, não adivinhe)

  1. Encontre ou crie o espaço de trabalho (padrão ~/motion-studio). Se <workspace>/direct-engine/node_modules estiver faltando, execute scripts/setup.sh <workspace> (precisa de Node 20+, ffmpeg, Chrome; o script diz exatamente o que está faltando). Em seguida, execute python3 scripts/doctor.py <workspace> e leia o resultado para o usuário em palavras simples.
  2. Depois entreviste o usuário antes de construir qualquer coisa (carregue references/onboarding.md). Você deve perguntar, nesta ordem, em uma mensagem curta, numerada:
    • Para que é o vídeo, quem assiste, o que devem fazer depois (comentar, clicar, comprar)?
    • Você tem vídeos de referência que ama? Se sim, peça para colocar os arquivos em <workspace>/references/ e estude-os (carregue references/reference-analysis.md). Se não, diga isso e use o estilo padrão, e ofereça para ver um que ele cole um link.
    • Você tem efeitos sonoros, uma voz (gravação própria ou texto-para-fala) e música? Se não, diga quais opções gratuitas existem e ofereça para configurá-las (carregue references/sound-and-music.md). Som não é um polimento opcional: um filme sem som real gravado soa barato.
    • Prova real para a tela: números reais, capturas de tela, saída de terminal, interface do produto. Nunca invente números.
    • Plataforma e formato: 16:9 ou 9:16 (carregue references/social-ship.md; Instagram Reels é 9:16).
  3. Apresente o plano em 5 linhas, aguarde um sim e depois construa.

O pipeline (cada etapa tem uma referência; carregue-a quando chegar na etapa)

  1. Briefing uma promessa de uma frase, 5 a 8 cenas, um centro de foco por cena. Gancho primeiro.
  2. Palavras falas curtas (3 a 7 palavras cada) com as palavras na tela carregando a mensagem mesmo com o som desligado. Sem jargões, sem travessões, sem cadência de IA ("Desbloqueie", "Eleve", "perfeito").
  3. Visual paleta de 3 cores, uma família de fontes, profundidade (luz suave, bokeh, vinheta), um objeto focal. Carregue references/craft-rules.md.
  4. Construção copie assets/starter para <workspace>/projects/<name>/, edite scene/main.js. Carregue references/scene-contract.md antes de escrever uma cena. Renderize stills primeiro, depois uma renderização seca em --scale 1 e, em seguida, a final em --scale 2.
  5. Som folha de pistas na cena, sons reais gravados, voz, música, mix em -14 LUFS com a voz 12 dB acima de tudo. Carregue references/sound-and-music.md.
  6. Prova execute scripts/scan_all.sh, corrija todos os P0 e P1, escaneie novamente, repita. Carregue references/qa-and-fix-loop.md.
  7. Publicação exportação social, legenda, plano de postagem e o mockup opcional de laptop (references/laptop-mockup.md). Carregue references/social-ship.md.

Regras rígidas (são números medidos, não gosto)

  • O quadro 0 é uma composição finalizada, nunca preto. Algo visivelmente muda em 0,35 s e o primeiro segundo se move. Um evento visível a cada 2,6 s no máximo. Dois eventos imperdíveis com pelo menos 0,5 s de diferença.
  • Texto que deve ser lido tem pelo menos 54 px em um quadro de 1920 px de largura (cerca de 11 pt em um telefone). Texto menor é apenas textura e não pode carregar a mensagem.
  • Nada se move mais de 45 px por quadro (sem teletransportes). Overshoot de no máximo 10% para UI, 15% para um pop de herói. Anime apenas transform e opacity. Sem will-change em texto. Mantenha o granulado sutil.
  • Texto de destaque pequeno precisa de contraste de 3:1 ou melhor. Um limão brilhante ou amarelo sobre creme falha: use uma versão de tinta mais escura para texto pequeno.
  • Áudio: -14 LUFS integrado, pico verdadeiro de -1 dBTP ou menos, voz pelo menos 12 dB acima do fundo, batidas carregam energia acima de 500 Hz para sobreviverem ao alto-falante do telefone, cada batida visível tem um som em seu quadro.
  • Cada número na tela vem de dados reais na cena, com sua fonte. Nunca digite uma estatística inventada.
  • Uma ideia por cena, um objeto focal, três regiões em movimento ou menos. O cursor é um orbe circular calmo; as mudanças de cena crescem a partir da coisa que as causou.

Comandos (espaço de trabalho = ~/motion-studio)

node direct-engine/render_direct.mjs --scene projects/<name>/scene/index.html --out projects/<name>/out/<name>_silent.mp4 --scale 2 --workers 4
node direct-engine/render_direct.mjs --scene ... --out /tmp/x.mp4 --scale 1 --workers 1 --stills 1.0,4.0 --stills-out projects/<name>/stills
bash scripts/make_audio.sh <workspace> <silent.mp4> <final.mp4> [voice.wav] [music.wav]
bash scripts/scan_all.sh <workspace> <final.mp4> [payoff times] [1920x1080]
bash scripts/laptop_mockup.sh <workspace> <green_screen_laptop.jpg> <final.mp4> <out_9x16.mp4>

Motion lint: node qa/sample_scene.mjs --scene <index.html> --from 0 --to <frames> --out series.json em seguida node qa/motion_lint.mjs series.json.

Como trabalhar de forma eficiente

Passos pequenos, mensagens curtas, re-renderize apenas quando uma varredura precisar (uma renderização completa leva minutos). Não execute muitos subagentes. Use stills para verificar a aparência antes de uma renderização. Após cada grupo de correções, escaneie novamente.

Relatórios

Termine com: o que você mediu (números reais), o que o humano ainda precisa assistir e ouvir, e os caminhos dos arquivos. Se uma verificação falhou e você a dispensou, diga qual e por quê.

Habilidades Relacionadas