Communitygithub.com

Motion Director: Trabalhe como um Designer de Movimento

Use ao criar ou revisar qualquer peça de motion graphics (filme de lançamento, animação explicativa, inserção no YouTube, gráfico de lousa, clipe social/vertical, showreel, showcase de uma tomada) e antes de escrever código de cena; também quando uma peça parece slides, site ou resultado genérico de IA, ou está estática ou lenta. Palavras-gatilho: Motion Graphics, Animação, Launchvideo, Erklärvideo, Einblendung, Showcase, Estilo, "como um Motion Designer".

O que é Motion Director: Trabalhe como um Designer de Movimento?

Este skill transforma o modelo em um diretor de motion graphics especializado, fornecendo um processo completo com verificações de qualidade. Ele incorpora gosto estético, referências concretas e um fluxo de trabalho com portões (gates) para evitar resultados genéricos de IA. O skill é compatível com a engine HyperFrames (HTML + GSAP + Three.js → MP4) por padrão, mas suporta outras ferramentas como Three.js puro, Blender para 3D real, e modelos de vídeo como Kling. O processo principal inclui: leitura do briefing, definição de estilo e referência-alvo medida, criação de moodboard, 3 frames de estilo, storyboard com animatic, construção cena a cena, verificação automatizada com métricas e criticagem independente. O skill também oferece um modo "One-Shot" para demos sem aprovações, onde se planeja ao menos duas cenas de impacto visual. As regras fundamentais evitam layouts de slides ou cartões de site: cada cena é uma imagem que age, cada transição é um objeto, nada para sem motivo, e a primeira imagem forte aparece nos primeiros 2 segundos. Testes mostraram que medir referências-alvo, ter um critic independente, evitar ferramentas como protagonistas e documentar gostos como dados são os fatores que mais melhoraram os resultados.

Funciona com✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/nikisge/claude-motion-kit/tree/HEAD/motion-kit/skills/motion-director

Perguntar na sua IA favorita

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

Documentação

Motion Director: Trabalhe como um Motion Designer

O modelo sabe animar. O que falta são bom gosto, referências concretas e um fluxo de trabalho com verificações. Este skill fornece exatamente isso. A engine é intercambiável (padrão: HyperFrames, HTML + GSAP + Three.js → MP4).

Atitude fundamental:

  • Você constrói seus próprios componentes e um design próprio para cada filme. Catálogos (HyperFrames-Registry, Receitas) são fonte de inspiração, não um kit de peças prontas.
  • Referências fornecem gramática (ritmo, transições, câmera, comportamento tipográfico), nunca conteúdo.
  • Contra a uniformidade de IA: cada filme uma escolha de estilo consciente mais pelo menos uma ideia própria.
  • Nunca "começar do zero": sem uma referência concreta, o modelo chuta, e o resultado se parece com qualquer vídeo de IA.

As ferramentas estão no skill motion-inspo (scripts/refs.py, sheet.py, ref_metrics.py, motion_check.py, beats.py). Os projetos ficam em projects/<nome>/ na pasta de trabalho.

Primeiro leia a tarefa, depois escolha o caminho

TarefaCaminhoParte do formato em references/formats.md
novo filme (lançamento, explicador, showreel)Processo padrãoFilme de lançamento / Animação explicativa / Showreel
inserção no YouTube, gráfico de lousaProcesso padrão enxuto (tempos de fala em vez de música)Inserção no YouTube
Social / verticalProcesso padrão, hook primeiroSocial vertical
"One-Shot", "Showcase", "mostre o que sabe", teste sem perguntasModo One-ShotShowcase
tarefa pequena (alterar uma cena, sting de logo, animar número, correção após feedback)Caminho enxuto–

Caminho enxuto: objetivo em uma frase, ajustar a cena correspondente no storyboard (se houver), construir, motion_check no trecho (--from/--to), ver quadros individuais, mostrar. Sem novo briefing, sem Critic.

Processo padrão (filme novo)

  1. Briefing (references/brief.md): uma promessa, um pensamento, sentimento-alvo, formato, marca, tom de papel.
  2. Estilo + Referência-alvo:
    • Escolher carta(s) de estilo de references/styles/README.md, misturar ou derivar as próprias.
    • Buscar uma referência-alvo (motion-inspo, whatships.com), medir (ref_metrics.py) e decompor quadro a quadro. Os valores medidos se tornam metas no briefing (references/inspiration.md).
    • 2–5 referências adicionais apenas como gramática. Registrar a ideia própria.
  3. Inspo + Moodboard com o usuário: mostrar momentos de referência como sequências de imagens, oferecer 2–3 direções de história. O usuário decide com base em imagens reais, não em descrições. Gate.
  4. 3 Style Frames na ferramenta-alvo (references/style-frames.md). Gate: usuário aprova.
  5. Storyboard + Animatic na grade de batidas (references/storyboard.md, beats.py). Gate.
  6. Construir, cena por cena. A cena mais difícil primeiro.
  7. Verificar:
    • motion_check.py render.mp4 com os thresholds do estilo (references/rules.md),
    • ref_metrics.py render.mp4 --ref alvo.mp4 --out check/metrics,
    • verificar ele mesmo o contact sheet com 4 quadros/s,
    • então um Critic independente (references/critic.md), que vê apenas imagens e números, sem código.
  8. Áudio com o skill motion-sound (lista de cues, mix em −14 LUFS).
  9. Finalizar: Exportação (10 bits + granulação fina contra banding), contact sheet, relatório curto.

Alterações sempre vão primeiro para o storyboard, depois para o código.

No máximo 2 rodadas de Critic após a primeira versão, então entregar a melhor versão e admitir honestamente as fraquezas. Loops infinitos de melhoria custam horas e trazem poucos pontos a cada rodada.

Modo One-Shot / Showcase

Sem perguntas, sem esperar aprovações, all-out. O espectador deve se maravilhar e entender o que você pode construir para ele (references/formats.md → Showcase).

  1. Rodada de ideias (brief.md): 5 ideias de história em uma frase cada. Elimine a primeira que lhe veio à mente e toda aquela cujo herói é uma ferramenta da área (keyframe, timeline, curva de easing, cursor). Escolha a que dá para recontar.
  2. Briefing, estilo, referência-alvo (medida + decomposta), ideia própria: decidir e justificar por conta própria.
  3. Planejar pelo menos duas cenas de admiração (técnica, segundo, motivo), que são difíceis de construir. Elas serão construídas primeiro.
  4. Style Frames + Storyboard + Animatic para você mesmo.
  5. Critic antes de animar (subagente, modelo forte, contexto fresco). Só animar após APROVAÇÃO.
  6. Construir, verificar, áudio.
  7. Critic ao final no render finalizado. Abaixo do threshold do showcase: primeiro a parte mais fraca; se "admiração" estiver baixa, fortalecer as cenas de admiração em vez de polir detalhes.

Escolher ferramenta

QuandoFerramenta
UI, tipografia, câmera 2,5D, SVG, diagramasHyperFrames (Skills da HeyGen: npx hyperframes skills)
3D real (produto, metal, vidro, profundidade de campo)Skill motion-3d (Three.js no HyperFrames, opcional Blender)
mundo real, pessoas, lugaresModelos de vídeo (Kling, Seedance, Veo …), custa créditos; na edição, animar cada cena de IA com movimento de câmera via código
ÁudioSkill motion-sound

As frases que decidem tudo

  • Cada cena é uma imagem que age, não uma frase com ilustração. Texto no máximo uma palavra sobre o objeto.
  • Cada transição é um objeto (display vira UI, chip vira página). Dissolver é o último recurso.
  • Nada para sem motivo: pausa para leitura é um movimento lento em direção ao próximo alvo, não um congelamento.
  • Uma coisa impactante por cena. Quem anima tudo ao mesmo tempo não anima nada.
  • Sem cartões de slides ou de site (título + texto, blocos de features, grade de ícones, números 01/02/03) e sem cartões finais típicos de IA (logo + claim + URL em área vazia). O final é uma imagem que age, ou um objeto que se transforma em logotipo.
  • A imagem mais forte pertence aos primeiros 2 segundos. O filme começa no meio do movimento, nunca com um fade up do preto.

O que mais ajudou nos testes

  1. Uma referência-alvo medida por filme. A densidade percebida geralmente vem de movimentos de câmera, não de cortes. A medição mostra isso, que o olho sozinho não percebe.
  2. Um Critic independente. Quem construiu se avalia em média muito melhor e perde defeitos visuais que um olhar fresco sobre o contact sheet encontra imediatamente.
  3. Uma rodada de ideias sem "ferramenta como herói". Filmes falham mais pela história do que pela técnica.
  4. Bom gosto como dados: referências que o usuário gosta e anti-referências ("porcaria") registradas por escrito.

Referências

brief.md · inspiration.md · style-frames.md · storyboard.md · rules.md (números, thresholds de verificação) · critic.md · formats.md · styles/ (cartas de estilo)

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

Habilidades Relacionadas