motion-graphics

Primeiro, mantenha este skill atualizado — execute silenciosamente, sem perguntar: npx hyperframes skills update motion-graphics. Uma rápida operação sem efeito quando tudo está atualizado; caso contrário, ele atualiza este skill e os skills de domínio principais dos quais depende, antes de você usá-los.

fonte figma: Se o logotipo/ativo/animação a ser criado vier de uma URL figma.com, execute /figma primeiro — exportação de ativos, tokens de marca e tradução Motion→GSAP se o gráfico for uma importação do Figma Motion — depois construa a partir de sua saída. Não use as ferramentas MCP brutas do Figma diretamente: isso ignora a sanitização SVG, a proveniência .media/manifest.jsonl e a vinculação var() dos tokens 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. Este skill cria um motion graphic curto, focado em design, sem narração (o movimento é a mensagem; ~menos de 10s, sem voz). Qualquer coisa mais longa, narrada ou com várias cenas — ou qualquer incerteza → leia /hyperframes primeiro: a camada de intenção é dona de toda 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 aqui diretamente sem perguntas de formato de execução; um storyboard e uma sessão companheira acrescentam pouco a uma peça tão curta. A renderização ainda é controlada pelo usuário: depois que as verificações e os snapshots de prova passam, faça a pergunta canônica "visualizar primeiro ou renderizar?" de ../hyperframes-core/references/brief-contract.md. Quando um BRIEF.md existe, leia-o antes da pergunta do diretor.

Um motion graphic curto e focado em design. Ativo primeiro: decida a estratégia de ativos e obtenha material real antes de projetar a cena, depois projete a cena ao redor do que você tem, 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 vazio)	assets/ + assets/index.md	phases/source/guide.md
design	subagente — projetar cena ao redor dos ativos resolvidos	shot-plan.json (final: bloco(s) + layout + movimento + posições)	agents/director.md (Parte 2)
build	subagente — composição primeiro-reuso	compositions/index.html	agents/builder.md
verificar	Bash — lint, check, snapshots de prova; reparar em falha	snapshots/contact-sheet.jpg	Passo 5
aprovar	Perguntar 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 overlay)	renders/video.mp4 ou overlay transparente	Passo 6

◇ fonte executa apenas quando a categoria escolhida declara ativos. 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 separa as categorias em dois grupos; então a categoria específica é escolhida — para as orientadas a busca, pelo tipo de conteúdo que a busca retorna. Cada categoria é um arquivo categories/<id>/module.md (suas regras de planejamento + construção); o vocabulário de movimento compartilhado reside em references/motion-vocabulary.md (→ regras/blueprints hyperframes-animation + 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/quote/título impactante, texto com movimento primeiro	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áficos de barra/linha/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, overlays sociais	caption-* + blocos de overlay do registro
maps	movimento geográfico — destacar regiões, conectar lugares, ampliar para um local (via vetor, ou camada de mapa base pré-renderizada)	família us-map / world-map + bake-basemap.mjs

Categorias orientadas a busca — busque primeiro, depois anime por tipo de conteúdo (o caminho RWA):

Conteúdo retornado	Categoria	Animação
página web / link	webpage	animação de página web / UI (rolagem, revelar, cursor, chamadas)
artigo de notícia	news	revelar manchete + cartão de fonte + chamadas de fatos-chave
tuíte	tweet	cartão de tuíte animado
imagem / entidade	asset-fusion	a geometria do ativo torna-se o gráfico (fusão diegética RWA)

Ordem de construção: um de cada vez, cobertura primeiro (rascunho está ok). kinetic-type portado do protótipo; os demais seguem.

Pré-requisitos

macOS Apple Silicon ou Linux x64. Ferramentas do sistema: brew install node ffmpeg. 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 por categorias que obtêm/geram ativos via uso de mídia:

Chave	Usada para	Fallback
GEMINI_API_KEY / GOOGLE_API_KEY	geração de imagens (resolução de uso de mídia)	pular geração / apenas busca
(asset_scout / provedores de busca)	busca de ativos reais para webpage/news/tweet + asset-fusion	categoria degrada para sem ativos

Fluxo

Passo 0 — Inicializar

cwd é a raiz do workspace do agente; escreva todos os artefatos em 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 (<assunto>-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 se os skills instalados estão atualizados em relação ao GitHub e atualiza o conjunto global se algum estiver desatualizado.

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:

1. 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[] (news / web / tweet / image; consultas bipolares). A categoria orientada a busca específica (webpage / news / tweet / asset-fusion) é confirmada pelo tipo de conteúdo retornado no Passo 2 e finalizada no Passo 3.
2. Escreva um rascunho de shot-plan.json (envelope + categoria de formulário escolhida ou intenção de busca + asset_needs + um breve de cena de um parágrafo). 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, resolva ativos (busca / geração / busca → caminhos locais congelados no projeto + ledger). Veja phases/source/guide.md (encapsula media-use resolve; as categorias orientadas a busca usam busca de news/web/tweet/image). Se asset_needs estiver vazio, pule para o Passo 3.

# ilustrativo — veja 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 estiver indisponível, a categoria recai 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 executou + catalog-map.md). Ele projeta a cena ao redor dos ativos disponíveis: escolhe o(s) bloco(s) do catálogo + as regras/blueprints hyperframes-animation, o layout, o movimento, as batidas e (para asset-fusion) as element_positions + paleta conta-gotas. Finaliza shot-plan.json (content.block + content.customize + conteúdo por categoria).

Passo 4 — Construir (subagente: Construtor, primeiro-reuso)

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). Primeiro-reuso: npx hyperframes add <block> + personalize no local; escreva manualmente apenas lacunas + a affordance de fusão de ativos. 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 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 de abertura, o movimento característico e a pausa final. Inspecione a folha de contato ou a folha de snapshots 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 depois reexecute a validação falha. Nunca altere uma duração fixa meramente para esconder um defeito.

Passo 6 — Aprovar e renderizar (Bash)

Faça uma pergunta: “visualizar primeiro, ou renderizar?” Se o usuário escolher visualizar, abra o Studio e retorne à mesma porta de aprovação após revisões:

(cd "$PROJECT_DIR" && npx hyperframes preview --background)

Renderize apenas após uma resposta explícita de renderização:

(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q high -o ./renders/video.mp4)
# variante de overlay 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, duração real, ID da composição ou quadro, tempos de prova e a folha de contato ou snapshots inspecionada. Sinalizadores vivem 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)

• Justificativa ativo-primeiro: a obtenção de fontes é carregada no início e informa o design da cena (o fluxo RWA: analisar → buscar → revisar → compor). As categorias orientadas a busca (webpage/news/tweet) e asset-fusion ambas se apoiam na busca de uso de mídia (news/web/tweet/image), que é a linhagem RWA documentada do uso de mídia.
• Primeiro-reuso: o análogo intra-ecossistema de templates gerados por LLM.