motion-graphics — entrada de despacho

O que motion-graphics — entrada de despacho faz?

Confirme a rota antes do Passo 0. Esta skill cria um motion graphic curto, orientado a design, sem narração (o movimento é a mensagem; ~menos de 10s, sem voice-over). Um tratamento mais longo, com múltiplas cenas ou narrado → /general-video; um vídeo narrado de um site → /website-to-video; um explicador de tópico → /faceless-explainer; uma promo de produto → /product-launch-video; legendas em filmagens existentes → /embedded-captions. Fora do escopo: dados ao vivo / em tempo de renderização, ou filmagens que não podem ser capturadas. Na dúvida entre motion-first ou narrado? Leia /hyperframes primeiro.

Um motion graphic curto e orientado a design. Ativo-primeiro: decida a estratégia de ativos e obtenha material real antes de projetar o take, depois projete o take 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, briefing)	agents/director.md (Parte 1)
source ◇	Bash — resolução de mídia (pular se asset_needs estiver vazio)	assets/ + assets/index.md	phases/source/guide.md
design	subagente — projetar take em torno dos ativos resolvidos	shot-plan.json (final: bloco(s) + layout + movimento + posições)	agents/director.md (Parte 2)
build	subagente — composição com reuso primeiro	compositions/index.html	agents/builder.md
render	Bash — hyperframes render (MP4, ou --format webm/mov para sobreposição)	renders/video.mp4	Passo 5
verify	Bash — lint / inspect -> subagente de reparo em caso de falha	(correções no lugar)	agents/finalize.md

◇ source é executado 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 planejamento 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 a busca, pelo tipo de conteúdo que a busca retorna. Cada categoria é um categories/<id>/module.md (suas regras de planejamento + build); o vocabulário de movimento compartilhado está em references/motion-vocabulary.md (→ regras/blueprints de hyperframes-animation + blocos de registro).

Categorias de formulário — sem busca; o usuário fornece o conteúdo:

Categoria	Intenção	Apoia-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	gráfico de barras / linhas / pizza / corrida / % a partir de dados	bloco data-chart
logo-reveal	aparição de logotipo / composição de marca (logotipo do usuário)	logo-outro / rules/svg-path-draw
lower-thirds	barras de nome / título, chamadas, sobreposições de mídia social	caption-* + blocos de sobreposição do registro

Categorias orientadas a busca — primeiro busca, depois anima 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 (scroll, revelar, cursor, chamadas)
artigo de notícias	news	revelação de manchete + cartão de fonte + chamadas de fatos-chave
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, priorizando cobertura (rascunho é suficiente). kinetic-type portado do protótipo; o restante segue.

Pré-requisitos

macOS Apple Silicon ou Linux x64. Ferramentas de 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 media-use:

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

Fluxo

Passo 0 — Inicializar

cwd é a raiz do espaço de trabalho do agente; escreva todos os artefatos em PROJECT_DIR = videos/<project-name>/. <project-name>: use o diretório que o usuário forneceu, ou um nome curto em kebab-case derivado da intenção (<subject>-motion). Não use o nome base do espaço de trabalho 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

init verifica se as skills instaladas estão atualizadas em relação às do GitHub e atualiza o conjunto global se alguma estiver desatualizada.

Restrições: nunca execute hyperframes init na raiz do espaço de trabalho; nunca aninhe outro hyperframes/ dentro de PROJECT_DIR; todo comando Bash (mestre + subagentes) é um subshell (cd "$PROJECT_DIR" && ...) — nunca cd puro.

Passo 1 — Planejar (subagente: Diretor Parte 1)

Despache um subagente. prompt = conteúdo completo de 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:

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[] (notícias / web / tweet / imagem; consultas de dois polos). 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 briefing de take de um parágrafo). Schema: references/shot-plan-ir.md.

Validação: [ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo missing.

Passo 2 — Source ◇ (Bash: media-use, condicional)

Se shot-plan.json.asset_needs não estiver vazio, resolva os ativos (busca / geração / busca → caminhos congelados locais ao projeto + registro). Veja phases/source/guide.md (encapsula media-use resolve; as categorias orientadas a busca usam a busca de notícias/web/tweet/imagem). 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 um provedor de busca estiver indisponível, a categoria cai 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 take em torno dos ativos disponíveis: escolhe os blocos de catálogo + as regras/blueprints de 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 = conteúdo completo de agents/builder.md + contexto de despacho (shot-plan.json, catalog-map.md, o module.md da categoria, references/motion-vocabulary.md, references/builder-contract.md). Reuso-primeiro: npx hyperframes add <block> + personalize no lugar; escreva manualmente apenas lacunas + o affordance de fusão de ativos. Saída compositions/index.html respeitando o contrato HF (timeline GSAP pausada em window.__timelines, class="clip" + ids estáveis, tl.seek(0), determinístico).

Passo 5 — Renderizar (Bash)

(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q draft -o ./renders/video.mp4)
# variante de sobreposição transparente: --format webm  (ou mov)

Passo 6 — Verificar (Bash → subagente de reparo em caso de falha)

(cd "$PROJECT_DIR" && npx hyperframes lint . && npx hyperframes inspect .)

exit 0 → concluído. Em erros de lint/inspect, despache o subagente de reparo (agents/finalize.md: QA de instantâneo + uma passagem de correção no lugar + re-renderização). Nunca altere uma duração fixa durante o reparo.

Relatório + pré-visualização opcional

Relate a saída final (renders/video.mp4, ou a variante .webm / .mov de sobreposição) + duração. Não abra uma pré-visualização durante a execução. Ofereça apenas mediante solicitação, iniciada após a renderização para que sirva o arquivo final:

(cd "$PROJECT_DIR" && npx hyperframes preview)   # UI do Studio; ou `npx hyperframes play` para um link compartilhável

Flags estão na skill 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 (source)
shot-plan.json final, sem compositions/index.html	Passo 3/4 (projetar+construir)
compositions/index.html existe, sem renders/video.mp4	Passo 5 (renderizar) + Passo 6
renders/video.mp4 existe	Relatar + parar

Notas de design (mantenedores — a execução não lê isto)

• Racional ativo-primeiro: a obtenção é carregada no início e informa o design do take (o fluxo RWA: analisar → buscar → revisar → compor). As categorias orientadas a busca (webpage/news/tweet) e asset-fusion dependem da busca media-use (notícias/web/tweet/imagem), que é a linhagem RWA documentada do media-use.
• Reuso-primeiro: o análogo no ecossistema de templates gerados por LLM é "compor blocos de catálogo + regras de hyperframes-animation". A timeline GSAP pausada do HF equivale ao useCurrentFrame do Remotion.
• Contrato do módulo de categoria: um categories/<id>/module.md (planejamento + build), compartilhando references/motion-vocabulary.md (+ avaliação opcional). Adicionar uma categoria = soltar a pasta + registrar sua linha de classificação em agents/director.md + sua linha em catalog-map.md; o pipeline de fases permanece intocado.
• Estrutura de diretório:

  videos/<project-name>/
    hyperframes.json  context.log
    shot-plan.json            # o IR (saída do Diretor)
    assets/  assets/index.md  # saída do media-use (se obtido)
    compositions/index.html   # saída do Builder
    renders/video.mp4
  

• Registro: no roteador hyperframes — adicione a intenção "motion graphic curto orientado a design" + descrição do Workflow; separe os gatilhos de motion-graphics do /general-video; adicione arestas reversas de NÃO-USAR. Veja motion-graphics-genre.md §5-7.