Primeiro, mantenha esta skill atualizada — execute silenciosamente, sem perguntar:
npx hyperframes skills update motion-graphics. Um no-op rápido quando tudo está atualizado; caso contrário, ele atualiza esta skill e as skills de domínio principais das quais ela depende antes de você utilizá-las.
fonte figma: Se o logotipo/ativo/animacã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 do Figma Motion — e então construa a partir de sua saída. Não acione o Figma diretamente por meio de ferramentas MCP brutas: isso ignora a sanitização de SVG, a proveniência de.media/manifest.jsonle a vinculaçãovar()de tokens de marca, de modo que uma mudança posterior de marca não pode ser propagada sem uma reimportação completa.
motion-graphics — ponto de entrada de despacho
A porta de entrada é
/hyperframes. Esta skill cria um gráfico em movimento curto, focado em design e sem narração (o movimento é a mensagem; ~menos de 10s, sem voz-over). Qualquer coisa mais longa, narrada ou com múltiplas cenas — ou qualquer incerteza → leia/hyperframesprimeiro: a camada de intenção controla cada decisão de rota.
Este fluxo de trabalho é autônomo por design — no máximo uma pergunta esclarecedora (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 de formato de execução; um storyboard e uma sessão de companhia adicionam pouco a uma peça tão curta. A renderização ainda é controlada pelo usuário: após as verificações e snapshots de prova passarem, faça a pergunta canônica “pré-visualizar primeiro, ou renderizar?” de ../hyperframes-core/references/brief-contract.md. Quando um BRIEF.md existir, leia-o antes da pergunta do diretor.
Um gráfico em movimento curto e focado em design. Ativo-primeiro: decida a estratégia de ativos e obtenha material real antes de projetar o plano, então projete o plano em torno do que você tem, e então componha reutilizando capacidades do catálogo. Todos os artefatos vão para PROJECT_DIR = videos/<project-name>/ (criado no Passo 0); todos os caminhos abaixo são relativos a ele.
| Fase | Execução | Artefato principal | Fluxo detalhado |
|---|---|---|---|
| init | Bash | hyperframes.json | Passo 0 |
| plan | subagente — decidir busca? + classificar + estratégia de ativos | shot-plan.json (rascunho: categoria, consultas asset_needs, breve) | agents/director.md (Parte 1) |
| fonte ◇ | Bash — resolver uso de mídia (pular se asset_needs estiver vazio) | assets/ + assets/index.md | phases/source/guide.md |
| design | subagente — projeto do plano em torno dos ativos resolvidos | shot-plan.json (final: bloco(s) + layout + movimento + posições) | agents/director.md (Parte 2) |
| construir | subagente — composição reuso-primeiro | compositions/index.html | agents/builder.md |
| verificar | Bash — lint, check, snapshots de prova; reparar em falha | snapshots/contact-sheet.jpg | Passo 5 |
| aprovar | Perguntar pré-visualizar ou renderizar; aguardar a resposta | aprovação explícita de renderização | Passo 6 |
| renderizar | Bash — hyperframes render (MP4, ou --format webm/mov para sobreposição) | renders/video.mp4 ou sobreposição transparente | Passo 6 |
◇ fonte é executado apenas quando a categoria escolhida declara ativos. Categorias de código/texto puro (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; então a categoria específica é escolhida — para busca orientada, 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 reside em references/motion-vocabulary.md (→ regras hyperframes-animation/blueprints + blocos de registro).
Categorias de formulário — sem busca; o usuário fornece o conteúdo:
| Categoria | Intenção | Baseia-se em |
|---|---|---|
kinetic-type | linha/aspas/título impactante, texto focado 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 | gráfico de barras/linhas/pizza/corrida/% a partir de dados | bloco data-chart |
logo-reveal | vinheta de logotipo / lockup 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, ampliar para um local (via vetorial ou via mapa base rasterizado) | família us-map / world-map + bake-basemap.mjs |
Categorias orientadas por busca — busque primeiro, depois anime por tipo de conteúdo (caminho RWA):
| Conteúdo retornado | Categoria | Animação |
|---|---|---|
| webpage / link | webpage | Animação de webpage / UI (scroll, revelação, cursor, chamadas) |
| artigo de notícia | news | Revelação de manchete + cartão de origem + chamadas de fatos principais |
| tweet | tweet | Cartão de tweet animado |
| imagem / entidade | asset-fusion | A geometria do ativo se torna o gráfico (fusão diegética RWA) |
Ordem de construção: um de cada vez, cobertura-primeiro (rascunho está bom). kinetic-type portado do protótipo; o restante segue.
Pré-requisitos
macOS Apple Silicon ou Linux x64. Ferramentas do sistema: brew install node ffmpeg. npx hyperframes doctor uma vez. Renderização GPU macOS: export PRODUCER_BROWSER_GPU_MODE=hardware.
Chaves opcionais (fallbacks locais se não definidas) — necessárias apenas por categorias que obtêm/geram ativos 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 gerar / apenas busca |
| (provedores de busca asset_scout) | busca de ativos reais para webpage/news/tweet + asset-fusion | categoria degrada para sem ativos |
Fluxo
Passo 0 — Inicializar
O diretório de trabalho atual é a raiz do workspace do agente; escreva todos os artefatos sob PROJECT_DIR = videos/<project-name>/. <project-name>: use o diretório que o usuário forneceu, senão um nome curto em kebab-case derivado da intenção (<subject>-motion). Não é o nome base do workspace ou um timestamp.
Apenas quando $PROJECT_DIR/hyperframes.json estiver ausente:
PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<project-name>}"
mkdir -p "$(dirname "$PROJECT_DIR")"
npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank --skill=motion-graphics
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 executar hyperframes init na raiz do workspace; nunca aninhar outro hyperframes/ dentro de PROJECT_DIR; todo comando Bash (mestre + subagentes) é um sub-shell (cd "$PROJECT_DIR" && ...) — nunca cd puro.
Passo 1 — Planejar (subagente: Diretor Parte 1)
Despache um subagente. prompt = completo agents/director.md + ## 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ícias / 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 breve parágrafo do plano). Schema:references/shot-plan-ir.md.
Validação: [ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo missing.
Passo 2 — Fonte ◇ (Bash: uso de mídia, condicional)
Se shot-plan.json.asset_needs não estiver vazio, resolver ativos (buscar / gerar / obter → caminhos congelados e locais do projeto + registro). Consulte phases/source/guide.md (envolve 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 uma busca/provedor não estiver disponível, a categoria retrocede para sem ativos (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 plano em torno dos ativos disponíveis: escolha o(s) bloco(s) do catálogo + as regras/blueprints do hyperframes-animation, o layout, o movimento, os beats e (para asset-fusion) as element_positions + paleta de conta-gotas. Finaliza shot-plan.json (content.block + content.customize + conteúdo por categoria).
Passo 4 — Construir (subagente: Builder, reuso-primeiro)
Despache um subagente. prompt = completo agents/builder.md + contexto de despacho (shot-plan.json, catalog-map.md, module.md da categoria, references/motion-vocabulary.md, references/builder-contract.md). Reuso-primeiro: npx hyperframes add <block> + personalizar no local; escrever manualmente apenas lacunas + a facilidade de fusão de ativos. Saída compositions/index.html honrando 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 falha)
(cd "$PROJECT_DIR" && npx hyperframes lint .)
(cd "$PROJECT_DIR" && npx hyperframes check .)
(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <proof-times>)
Escolha tempos de prova que mostrem o estado inicial, o movimento característico e a pausa final. Inspecione a folha de contato ou snapshot gerada antes de continuar. Em falha de lint, check ou snapshot, despache o subagente de reparo (agents/finalize.md) para uma passagem de correção no local e, em seguida, reexecute a verificação falha. Nunca altere uma duração fixa meramente para ocultar 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 ao mesmo portal de aprovação após revisões:
(cd "$PROJECT_DIR" && npx hyperframes preview)
Renderize apenas após uma resposta de renderização explícita:
(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. A entrega final nomeia o artefato, a duração real, o ID da composição ou quadro, os tempos de prova e a folha de contato ou snapshot inspecionada. Flags residem 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 (fonte) |
shot-plan.json final, sem compositions/index.html | Passo 3/4 (projetar+construir) |
compositions/index.html existe, snapshots de prova ausentes | Passo 5 (verificar) |
| verificações e snapshots de prova passam, sem renderização aprovada | Passo 6 (aprovação) |
| renderização aprovada existe | verificar saída, depois relatar |
Notas de design (mantenedores — a execução não lê isto)
- Racional ativo-primeiro: a obtenção é carregada na frente e informa o design do plano (o fluxo RWA: analisar → buscar → revisar → compor). As categorias orientadas por busca (
webpage/news/tweet) easset-fusionambas dependem da busca de uso de mídia (notícias/web/tweet/imagem), que é a linhagem RWA documentada do uso de mídia. - Reuso-primeiro: o análogo intra-ecossistema de templates gerados por LLM é "compor" a partir de blocos de catálogo. A equipe de runtime/registro pode adicionar novos blocos que aparecem imediatamente. (Não há necessidade de geração de template por LLM.)"