Communitygithub.com

alesha-pro/ferramentas

Crie gráficos animados em movimento com código finalizado: reels de demonstração, filmes de lançamento de produto, tipografia cinética, morphs contínuos de UI e vídeos explicativos animados, com música, crítica de quadros e exportações MP4 verificadas. Use para produção de vídeo em movimento ou uma solicitação explícita de reel de movimento, não para apresentações de slides comuns, resumos de vídeo ou edição de filmagens existentes.

O que é ferramentas?

Motion Reel Studio é uma habilidade projetada para agentes de IA que produzem animações e filmes de alta qualidade diretamente a partir de código. Ele combina uma estrutura Canvas + Playwright + FFmpeg, análise de áudio e verificação rigorosa de qualidade para transformar um brief criativo em um projeto de animação editável e um arquivo MP4 finalizado. Diferente de ferramentas que geram apenas HTML de pré-visualização ou prompts, esta habilidade executa cada etapa do pipeline de produção: desde a coleta de referências e definição de estilo até a renderização, mixagem de áudio e verificação técnica. Ela não depende de nenhum modelo de IA específico, serviço pago ou habilidade externa; qualquer agente de codificação capaz pode utilizá-la. O fluxo de trabalho é dividido em fases: análise de referências e estilo de direção, criação de storyboard e shotlist, design de som e batidas, construção de animatic, animação principal, sessões estruturadas de crítica e correção, e entrega final com metadados verificados. A habilidade garante que a animação seja determinística (não dependente de temporizadores ou clocks de parede), que o conteúdo seja compreensível sem som e que a qualidade estética seja mantida com invariantes como spring physics adequados e sincronização precisa de entrada/saída de texto. A saída final inclui relatórios de QA e pode ser facilmente integrada de volta ao projeto do usuário.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alesha-pro/tools/tree/HEAD/skills/motion-reel

Perguntar na sua IA favorita

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

Documentação

Motion Reel Studio

Produza um projeto de animação editável e um filme verificado, não apenas um prompt ou uma pré-visualização HTML. Adaptado do curso de Movez; a implementação e correções estão documentadas em proveniência. Funciona com qualquer agente de codificação capaz; nenhum modelo específico, serviço pago ou habilidade externa é necessário.

Escopo e decisões iniciais

Leia o brief do usuário e as instruções existentes do projeto. Preserve o motor, visual, música e formato solicitados. Se um projeto já usar Remotion ou HyperFrames, estenda-o; consulte as instruções instaladas/documentação atual desse framework. Caso contrário, use o starter Canvas + Playwright + FFmpeg incluído. Os comandos abaixo são apenas para esta rota padrão.

Estabeleça a URL do assunto/produto, propósito, duração, proporções de aspecto, referência, ativos da marca e som. Infira respostas fornecidas; pergunte apenas por informações faltantes consequentes. Para um reel de demonstração aberto, escolha e declare um conceito, 15 segundos, 1080×1920, 60 fps e áudio sintetizado original. Não invente alegações de produto ou capturas de tela. Se ativos reais do produto não estiverem disponíveis, colete-os ou rotule uma demonstração conceitual autorizada explicitamente.

Crie a produção dentro do local do artefato do usuário. No repositório X, use posts/<slug>/ para um novo filme e mantenha todos os ativos lá. Não instale arquivos de projeto na raiz do repositório. A habilidade em si permanece no diretório de habilidades pessoais. Trabalhe localmente sem gastos com API por padrão; um provedor solicitado precisa de ferramentas disponíveis, credenciais e um orçamento autorizado. A publicação é uma ação separada.

Fluxo de trabalho de produção

  1. Referência e ativos. Inspecione imagens fornecidas. Para referências de vídeo, extraia quadros a cada 0,5–1 s e inspecione o movimento ao redor dos cortes. Capture estados reais do produto com ferramentas do navegador; retenha URLs de origem e datas de captura em docs/assets.md. Baixe fontes/imagens localmente e aguarde a decodificação. Escreva docs/style-guide.md: paleta, tipografia, hierarquia espacial, ritmo de tomada, linguagem de transição, câmera, textura, o que pegar emprestado e o que evitar. Sem referência, defina uma direção visual original explicitamente.
  2. Brief do diretor. Leia direção para o modo solicitado. Escreva docs/brief.md e docs/shotlist.md; cada tomada tem um propósito, quadro inicial/final, cópia exata, estado visual, câmera, transição, dica sonora e ativo. Use uma única linha do tempo para imagem e áudio. Mostre um plano conciso e prossiga dentro do pedido autorizado. Espere apenas se o usuário solicitou um portão de plano/aprovação; silêncio nunca fornece essa aprovação.
  3. Som e batidas. Leia áudio e execução. Analise a música fornecida ou sintetize uma partitura; salve beats.json e cues.json. Um detector de batidas não estabelece tempos fortes de compasso. Rotule estimativas e confirme o primeiro tempo forte antes de projetar ações no nível do compasso. Mantenha uma solicitação de faixa inalterada intacta; não estique ou normalize essa fonte sem permissão.
  4. Stills e animatic. Construa composições principais e amostre cada tomada antes de polir o movimento. Renderize um animatic de baixa resolução na mesma proporção de aspecto, com a grade de batidas pretendida. Inspecione-o quanto ao ritmo e legibilidade em telefone. Para filmes longos, mantenha uma bíblia de personagens e contratos de cronometragem de capítulo antes de implementar capítulos. Não delegue a menos que autorizado independentemente.
  5. Animação. Implemente window.seek(t) como um mapeamento puro de tempo para quadro. Use trilhas de mola em forma fechada; semeie e redefina a aleatoriedade procedural por quadro, ou derive ruído do tempo e da identidade do elemento. Nenhuma integração persistente, temporizadores, transições CSS ou amostragem de clock de parede no modo de renderização. A prontidão de ativos locais pertence a window.ready. Tome decisões de composição responsivas para cada proporção de aspecto; não corte um final amplo para retrato.
  6. Crítica e correção. Leia revisão. Inspecione folhas de contato, quadros consecutivos ao redor de movimento rápido e a reprodução real se uma ferramenta de reprodução estiver disponível. Corrija até três defeitos de maior impacto por rodada e re-renderize os intervalos afetados. Use até três rodadas focadas por padrão; pare quando o brief for atendido e nenhum problema material permanecer, ou relate um bloqueador concreto. Nunca aumente auto-pontuações para fabricar uma aprovação. Stills não podem verificar áudio ou reprodução de movimento.
  7. Final e entrega. Renderize as resoluções solicitadas, misture o áudio, crie folhas de QA e verifique metadados de fluxo, duração, contagem de quadros e decodificação completa. Entregue out/final.mp4, pôster, folhas de contato, fonte, um comando reproduzível e limitações remanescentes concisas. Inclua out/loop-check.mp4 apenas para um loop solicitado. Cópia pública segue as regras de escrita do projeto e a passagem humanizadora final quando disponível.

Fluxo de ferramentas incluído

Leia execução antes de executá-lo. Substitua <skill> pelo diretório deste SKILL.md e <project> pelo diretório do filme escolhido.

python3 <skill>/scripts/init_project.py <project>
cd <project>
npm install
npx playwright install chromium
node render.mjs --width 360 --height 640 --fps 30 --out out/animatic.mp4
python3 audio.py synth --duration 15 --bpm 120 --out out/score.wav --beats beats.json
python3 audio.py sfx --duration 15 --cues cues.json --out out/sfx.wav
node render.mjs --width 1080 --height 1920 --fps 60 --sub 4 --out out/silent.mp4
python3 finish.py mix --video out/silent.mp4 --music out/score.wav --sfx out/sfx.wav --out out/final.mp4
python3 finish.py qa --video out/final.mp4 --out out/qa --expected-duration 15 --expected-width 1080 --expected-height 1920 --expected-fps 60 --require-audio

O starter é uma animação de teste abstrata completa, não a entrega criativa. Substitua suas cenas, cópia, partitura e dicas pelo brief. motion.mjs fornece molas subamortecidas, criticamente amortecidas e superamortecidas corretas, trilhas multi-alvo, opacidade de troca de texto e ruído semeado. render.mjs fornece renderização de intervalo, desfoque de sub-quadro, servidor HTTP local, verificações de prontidão e verificações de determinismo não sequencial. audio.py fornece uma partitura determinística, SFX e análise de música opcional. finish.py fornece uma mixagem de loudness de duas passagens, folhas de contato paginadas de filme completo, folhas para telefone, tiras de ação, cópias de loop e verificações técnicas.

Invariantes de qualidade

  • O conteúdo deve permanecer compreensível sem som; o som deve reforçar eventos de movimento reais.
  • Evite o template genérico de título centralizado/gradiente/desbotamento a menos que solicitado. Prefira uma composição concreta e transformação visível; “novo a cada 2–4 s” é uma heurística de ritmo para formato curto, não uma regra para todo filme.
  • Molas expressam massa; escolha amortecimento para o material. Não faça cada rótulo quicar ou substitua movimento linear/periódico intencional por molas.
  • O texto entra depois que um contêiner começa a mudar e sai antes que conteúdo incompatível chegue. Mantenha glifos nítidos na escala final e teste a 360 px de largura.
  • O tempo de módulo não torna uma costura contínua. Combine posição, velocidade, visibilidade e som de perto do fim e de início; inspecione a reprodução unida.
  • Mantenha o determinismo de software/quadro separado da qualidade estética. Um quadro ruim reproduzível ainda é um quadro ruim.

Habilidades Relacionadas