Instalação do plugin: Antes de executar comandos de configuração ou atualização, siga as regras de execução do plugin quando esta skill estiver dentro de um plugin do HyperFrames. Instalações autônomas mantêm as instruções de atualização abaixo.
Primeiro, mantenha esta skill atualizada — confirme com o usuário antes de executar:
npx hyperframes skills update motion-graphics. Uma operação rápida e segura quando tudo está atualizado; caso contrário, ela atualiza esta skill e as skills de domínio principal das quais ela depende, antes de você utilizá-las.
fonte figma: Se o logotipo/ativo/animação a ser construído vier de uma URL figma.com, execute
/figmaprimeiro — exportação de assets, tokens de marca e tradução Motion→GSAP se o gráfico for uma importação Figma Motion — e depois construa a partir da sua saída. Não utilize as ferramentas MCP diretamente para controlar o Figma: isso ignora a sanitização SVG, a proveniência de.media/manifest.jsonle a vinculação devar()do token de marca, de modo que uma alteração posterior da marca não pode ser propagada sem uma reimportação completa.
motion-graphics — ponto de entrada
A porta de entrada é
/hyperframes. Esta skill cria um gráfico animado curto, orientado por design e sem narração (o movimento é a mensagem; aproximadamente menos de 10s, sem voz). Qualquer coisa mais longa, narrada ou com múltiplas cenas — ou qualquer incerteza → leia/hyperframesprimeiro: a camada de intenção decide todas as rotas.
Este fluxo de trabalho é autônomo por design — no máximo uma pergunta de esclarecimento (agents/director.md), depois construa até a verificação sem revisão intermediária. A camada de intenção (/hyperframes → references/intent-interview.md) roteia diretamente aqui sem perguntas sobre a forma do vídeo; um storyboard e uma sessão de apoio acrescentam pouco a uma peça tão curta. A renderização ainda é controlada pelo usuário: depois que as verificações e as capturas de prova passarem, faça a pergunta canônica "pré-visualizar primeiro, ou renderizar?" do ../hyperframes/references/brief-contract.md. Quando um BRIEF.md existir, leia-o antes da pergunta do diretor.
Um gráfico animado curto e orientado por design. Primeiro os assets: decida a estratégia de assets e obtenha material real antes de projetar o shot, depois projete o shot em torno do que você tem, e então componha reutilizando as capacidades do catálogo. Todos os artefatos vão para PROJECT_DIR = videos/<nome-do-projeto>/ (criado no Passo 0); todos os caminhos abaixo são relativos a ele.
| Fase | Execução | Artefato primário | Fluxo detalhado |
|---|---|---|---|
| init | Bash | hyperframes.json | Passo 0 |
| plan | subagente — decidir busca? + classificar + estratégia de assets | shot-plan.json (rascunho: categoria, consultas asset_needs, brief) | agents/director.md (Parte 1) |
| source ◇ | Bash — resolver uso de mídia (pular se asset_needs estiver vazio) | assets/ + assets/index.md | phases/source/guide.md |
| design | subagente — design do shot em torno dos assets resolvidos | shot-plan.json (final: bloco(s) + layout + movimento + posições) | agents/director.md (Parte 2) |
| build | subagente — composição com reutilização em primeiro lugar | compositions/index.html | agents/builder.md |
| verify | Bash — lint, check, capturas de prova; reparo em caso de falha | snapshots/contact-sheet.jpg | Passo 5 |
| approve | Perguntar por pré-visualização ou renderização; aguardar a resposta | aprovação explícita da renderização | Passo 6 |
| render | Bash — hyperframes render (MP4, ou --format webm/mov para sobreposição) | renders/video.mp4 ou sobreposição transparente | Passo 6 |
◇ source é executado apenas quando a categoria escolhida declara assets. Categorias puramente de código/texto (ex.: kinetic-type, a maioria dos charts/stat) têm asset_needs: [] e pulam direto do plano para o design.
Categorias — divididas pela decisão de busca
A primeira decisão do plan é: isso precisa de uma busca? Essa bifurcação divide as categorias em dois grupos; em seguida, a categoria específica é escolhida — para as orientadas por busca, pelo tipo de conteúdo que a busca retorna. Cada categoria é um categories/<id>/module.md (suas regras de planejamento + construção); o vocabulário de movimento compartilhado está em references/motion-vocabulary.md (→ regras/blueprints de hyperframes-animation + blocos do registro).
Categorias de formulário — sem busca; o usuário fornece o conteúdo:
| Categoria | Intenção | Baseia-se em |
|---|---|---|
kinetic-type | linha/ citação/ título impactante, texto com foco em movimento | blocos caption-* + regras de animação |
stat | número herói único / contagem regressiva + anel | apple-money-count / rules/{counting-dynamic-scale, stat-bars-and-fills} |
charts | barras / linhas / pizza / corrida / % a partir de dados | bloco data-chart |
logo-reveal | vinheta de logotipo / apresentação de marca (logotipo do usuário) | logo-outro / rules/svg-path-draw |
lower-thirds | barras de nome/ título, chamadas, sobreposições sociais | caption-* + blocos de sobreposição do registro |
maps | movimento geográfico — destacar regiões, conectar lugares, zoom para um local (camada vetorial ou basemap) | família us-map / world-map + bake-basemap.mjs |
Categorias orientadas por busca — primeiro a busca, depois anime pelo tipo de conteúdo (caminho RWA):
| Conteúdo retornado | Categoria | Animação |
|---|---|---|
| página web / link | webpage | animação de página web / interface (scroll, revelar, cursor, chamadas) |
| artigo de notícia | news | revelar manchete + cartão de fonte + chamadas de fatos-chave |
| tweet | tweet | cartão de tweet animado |
| imagem / entidade | asset-fusion | a geometria do asset se torna o gráfico (fusão diegética RWA) |
Ordem de construção: um de cada vez, priorizando cobertura (rascunho está bom). kinetic-type portado do protótipo; os demais seguem.
Pré-requisitos
macOS Apple Silicon ou Linux x64. Ferramentas do sistema: brew install node ffmpeg. Execute npx hyperframes doctor uma vez. Renderização GPU no macOS: export PRODUCER_BROWSER_GPU_MODE=hardware.
Chaves opcionais (fallbacks locais se não definidas) — necessárias apenas para categorias que obtêm/geram assets via uso de mídia:
| Chave | Usado para | Fallback |
|---|---|---|
GEMINI_API_KEY / GOOGLE_API_KEY | geração de imagem (resolução de uso de mídia) | pular geração / apenas busca |
| (fornecedores de busca para assets) | busca de assets reais para webpage/news/tweet + asset-fusion | categoria degrada para sem assets |
Fluxo
Passo 0 — Inicializar
O diretório de trabalho atual é a raiz do workspace do agente; escreva todos os artefatos sob PROJECT_DIR = videos/<nome-do-projeto>/. <nome-do-projeto>: use o diretório que o usuário forneceu, senão um nome curto em kebab-case a partir da intenção (<assunto>-motion). Não use o nome base do workspace ou um timestamp.
Apenas quando $PROJECT_DIR/hyperframes.json estiver ausente:
PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<nome-do-projeto>}"
mkdir -p "$(dirname "$PROJECT_DIR")"
npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank --skill=motion-graphics
O comando init verifica as skills instaladas em relação às mais recentes no GitHub e atualiza o conjunto global se alguma estiver desatualizada.
Restrições: nunca execute hyperframes init na raiz do workspace; nunca aninhe outro hyperframes/ dentro de PROJECT_DIR; todo comando Bash (mestre + subagentes) é um subshell (cd "$PROJECT_DIR" && ...) — nunca cd simples.
Passo 1 — Planejar (subagente: Diretor Parte 1)
Despache um subagente. prompt = agents/director.md completo + ## Contexto de despacho (SKILL_DIR / PROJECT_DIR / a solicitação do usuário / Schema: <SKILL_DIR>/references/shot-plan-ir.md). Ele deve:
- Decidir: isso precisa de uma busca? (a primeira bifurcação)
- Não → escolha uma categoria de formulário (kinetic-type / stat / charts / logo-reveal / lower-thirds); o conteúdo é fornecido pelo usuário;
asset_needs: []. - Sim → emita um plano de busca em
asset_needs[](notícia / web / tweet / imagem; consultas de dois polos). A categoria orientada por busca específica (webpage / news / tweet / asset-fusion) é confirmada pelo tipo de conteúdo retornado no Passo 2 e finalizada no Passo 3.
- Não → escolha uma categoria de formulário (kinetic-type / stat / charts / logo-reveal / lower-thirds); o conteúdo é fornecido pelo usuário;
- Escreva um rascunho de
shot-plan.json(envelope + categoria de formulário escolhida ou intenção de busca +asset_needs+ um brief do shot de um parágrafo). Schema:references/shot-plan-ir.md.
Validação: [ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo missing.
Passo 2 — Obter fonte ◇ (Bash: uso de mídia, condicional)
Se shot-plan.json.asset_needs não estiver vazio, resolva os assets (buscar / gerar / obter → caminhos locais fixos do projeto + registro). Consulte phases/source/guide.md (contém media-use resolve; as categorias orientadas por busca usam a busca de notícias/web/tweet/imagem). Se asset_needs estiver vazio, pule para o Passo 3.
# ilustrativo — consulte phases/source/guide.md
(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)
Degrade graciosamente: se um mecanismo de busca/fornecedor estiver indisponível, a categoria cai para sem assets (anote em context.log).
Passo 3 — Projetar (subagente: Diretor Parte 2)
Despache um subagente (prompt = agents/director.md Parte 2 + contexto de despacho incluindo o assets/index.md resolvido se o Passo 2 foi executado + catalog-map.md). Ele projeta o shot em torno dos assets disponíveis: escolha o(s) bloco(s) do catálogo + as regras/blueprints de hyperframes-animation, o layout, o movimento, as batidas e (para asset-fusion) as element_positions + a paleta de conta-gotas. Finaliza shot-plan.json (content.block + content.customize + conteúdo por categoria).
Passo 4 — Construir (subagente: Construtor, reutilização em primeiro lugar)
Despache um subagente. prompt = agents/builder.md completo + contexto de despacho (shot-plan.json, catalog-map.md, o module.md da categoria, references/motion-vocabulary.md, references/builder-contract.md). Reutilização em primeiro lugar: npx hyperframes add <block> + personalize no local; escreva manualmente apenas lacunas + a funcionalidade de fusão de assets. Saída compositions/index.html respeitando o contrato HF (linha do tempo GSAP pausada em window.__timelines, class="clip" + IDs estáveis, tl.seek(0), determinístico).
Passo 5 — Verificar (Bash → subagente de reparo em caso de falha)
(cd "$PROJECT_DIR" && npx hyperframes lint .)
(cd "$PROJECT_DIR" && npx hyperframes check .)
(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <tempos-de-prova>)
Escolha tempos de prova que mostrem o estado inicial, o movimento característico e a pausa final. Inspecione a folha de contato ou as capturas geradas antes de continuar. Em caso de falha em lint, check ou na captura, despache o subagente de reparo (agents/finalize.md) para uma passagem de correção no local e, em seguida, reexecute a verificação que falhou. Nunca altere uma duração fixa apenas para esconder um defeito.
Passo 6 — Aprovar e renderizar (Bash)
Faça uma pergunta: "pré-visualizar primeiro, ou renderizar?" Se o usuário escolher pré-visualizar, abra o Studio e retorne à mesma etapa de aprovação após as revisões:
(cd "$PROJECT_DIR" && npx hyperframes preview --background)
Renderize apenas após uma resposta explícita para renderizar:
(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q high -o ./renders/video.mp4)
# variante de sobreposição transparente: --format webm (ou mov)
Verifique se a saída existe, não está vazia e tem a duração pretendida. O informe final nomeia o artefato, a duração real, o ID da composição ou do quadro, os tempos de prova e a folha de contato ou captura inspecionada. Marcos estão em /hyperframes-cli → references/preview-render.md.
Tabela de retomada
| Estado | Continuar de |
|---|---|
sem shot-plan.json | Passo 1 (planejar) |
shot-plan.json tem asset_needs, sem assets/ | Passo 2 (obter fonte) |
shot-plan.json final, sem compositions/index.html | Passo 3/4 (projetar+construir) |
compositions/index.html existe, capturas de prova ausentes | Passo 5 (verificar) |
| verificações e capturas de prova passaram, sem renderização aprovada | Passo 6 (aprovação) |
| renderização aprovada existe | verificar saída e relatar |
Notas de design (mantenedores — a execução não lê isto)
- Justificativa de assets em primeiro lugar: a obtenção é carregada no início e informa o design do shot (o fluxo RWA: analisar → buscar → revisar → confirmar → projetar → construir). As categorias de formulário, onde o conteúdo é familiar e está na cabeça do usuário, seguem o caminho mais rápido (projetar em torno do conteúdo fornecido).
- Por que um diretor e não um storyboard: para um shot curto, o ato de abrir um quadro branco e esboçar quadros acrescenta atrito sem muito ganho. O diretor emite uma especificação de design única que é suficientemente expressiva para orientar a construção. Se houver necessidade de múltiplos shots, a camada de intenção (
/hyperframes) deve ter roteado para um fluxo diferente. - Reparo sem revisão humana: o reparo no local é rápido e disciplinado pelo verificador. Como a saída é reproduzível (determinística), o reparo não mascara problemas não vistos — ele refaz uma verificação reprodutível.
- Sem síntese de voz: esta skill produz apenas gráficos silenciosos. Se o usuário solicitar narração, a camada de intenção deve solicitar a skill
voiceover-pipou um fluxo de processamento posterior separado. - Renderização sob medida: a renderização
transparent-overlay(WebM com alfa, ou ProRes 4444 QuickTime MOV) é uma variante que o fluxo de construção deve suportar quando a saída for composta posteriormente. O sinalizador--formataltera o contêiner e o codec, não o conteúdo da composição.
Referências
| Caminho | Finalidade |
|---|---|
agents/director.md | Prompt do subagente para planejamento e design |
agents/builder.md | Prompt do subagente para construção com reutilização |
references/shot-plan-ir.md | Schema do shot-plan.json |
references/motion-vocabulary.md | Regras e blueprints compartilhados de animação |
references/builder-contract.md | Regras de saída para a composição |
phases/source/guide.md | Guia para a fase de obtenção de assets |
../hyperframes/references/brief-contract.md | Brief compartilhado e regras de aprovação |
../hyperframes/references/plugin-installation.md | Regras de instalação de plugin |
../hyperframes/references/intent-interview.md | Camada de intenção (roteamento) |
Traduzido a partir do inglês. Para quaisquer discrepâncias, a versão em inglês prevalece.