AgentMotion — Framework Unificado de Geração de Vídeo por Código
Transforme "uma frase" em um MP4 totalmente desenhado por código. Esta skill é a camada de orquestração: ela seleciona o backend, o estilo, gerencia o fluxo e realiza o controle de qualidade; os detalhes específicos de renderização estão em references/ e styles/.
Invariantes Centrais (compartilhados por todos os backends)
Cada quadro é uma função pura do número do quadro: frame = f(t). Sem Math.random() (use números aleatórios com semente), sem Date.now(), sem acumular estado em rAF. Essa é a premissa para renderização determinística, paralelismo e verificação quadro a quadro. Violá-la faz com que a renderização e a pré-visualização fiquem dessincronizadas.
Passo 1: Escolher o Backend (Árvore de Decisão)
| Cenário | Backend | Referência |
|---|---|---|
| Vídeos curtos (≤60s), sem materiais externos, estilo ilustração/pintura à mão/estilizado | HTML Canvas (arquivo único) | references/backends.md §1 |
| Dados, personalização em lote (um vídeo por dado), legendas/narração incorporadas, ecossistema de gráficos 3D/componentes | React + Remotion | references/backends.md §2 |
| Animações interativas para tocar diretamente no navegador (sem MP4) | HTML de arquivo único, entregar HTML em vez de renderizar | references/backends.md §3 |
Em dúvida, escolha Canvas (arquivo único): menos dependências, mais fácil para um agente acertar de primeira.
Passo 2: Escolher o Estilo
Consulte styles/recipes.md (15 estilos comerciais: paletas, técnicas principais, regras de movimento, armadilhas). Se o usuário não souber o estilo, peça que escolha ou recomende baseado no tema; não reutilize o mesmo conjunto visual e trilha sonora para vídeos diferentes por padrão.
Passo 3: Fluxo de Trabalho Padrão (não pare para perguntar no meio)
- Briefing: A partir da entrada do usuário, inferir o tipo de vídeo (história/explicação/lista/ciclo/dados), duração (padrão 15-20s), formato (padrão 1920×1080; para compartilhamento de dados, 1080×1920). O idioma das legendas segue o idioma da entrada.
- Storyboard: Primeiro defina o BPM e os dados das seções (
SECTIONS/SHOTS/EVENTS). A imagem e a trilha sonora leem os mesmos dados temporais, garantindo alinhamento natural áudio-visual (references/storyboard.md). - Esqueleto: Copie de
templates/starter.html(backend Canvas), substitua a paleta e o desenho do mundo. Mantenha o contrato: a página expõewindow.C2V = { fps, frames, width, height, draw(frame) }, edrawé uma função pura. - Renderizar após autoverificação (ordem não pode ser invertida):
node scripts/render.mjs film.html sheet.jpg --sheet 1 # 1 quadro/segundo em mosaico, stepping off cuts
node scripts/render.mjs film.html still.png --stills 0,90,300 # stills em instantes específicos
node scripts/env-check.mjs # verificação do ambiente
node scripts/render.mjs film.html out.mp4 --audio music.mp3 # renderização completa (trilha opcional)
node scripts/probe.mjs out.mp4 1920x1080 30 # afirma parâmetros de codificação
- Duas rodadas de inspeção visual (
references/qc.md): ① Conformidade do storyboard — capture quadros nos pontos de ação de cada cena e compare com as linhas do storyboard; ② Rodada do diretor — veja o contact sheet, avalie ritmo, variedade de planos, quadros congelados, se cada ação tem som. Pelo menos duas rodadas; renderize apenas os quadros alterados. - Entrega: MP4 + HTML (o HTML pode ser tocado diretamente no navegador). No final, forneça 1-2 itens alteráveis: trocar estilo, trocar trilha, alterar duração.
Para o backend Remotion, a renderização e verificação são feitas com npx remotion still → inspeção visual → npx remotion render (veja references/backends.md §2).
Regras Antidesastre (falhas mais frequentes)
- Função pura. Qualquer acumulação de estado causará quadros errados na renderização paralela.
- Linhas desenhadas à mão devem "fervilhar" não "tremer": a semente do wobble muda a cada 4 quadros (~7,5 vezes/segundo); mudar a cada quadro parece ruído.
- Use elipses e retângulos arredondados para corpos, evite polígonos com muitos pontos que parecem placas de sinalização.
- Ordem de desenho explícita de trás para frente; a maioria dos "rostos cobertos" é problema de ordem de desenho.
- Texto nunca colide: dê espaço (claim) para blocos de texto e objetos-chave; verifique o layout quadro a quadro antes da entrega.
- Cortes e pontos de ação caem na batida, e saltos de volume ≤ +6dB, caso contrário parecem sustos (
references/audio.md).
Mapa de Arquivos
| Arquivo | Conteúdo |
|---|---|
scripts/render.mjs | Núcleo de renderização determinística: MP4 / stills / contact sheet, paralelo com múltiplos workers |
scripts/env-check.mjs / probe.mjs | Verificação de ambiente / afirmação de codificação MP4 |
templates/starter.html | Esqueleto frame=f(t): contrato, números aleatórios com semente, easing, câmera, batida |
styles/recipes.md | 15 receitas de estilos em nível de código |
references/*.md | Fluxo de trabalho / storyboard / técnicas / controle de qualidade / trilha sonora / seleção de backend |
examples/hello-drop.html | Exemplo mínimo executável imediatamente |
Dependências
Node 18+, ffmpeg (no PATH), Chrome ou Edge; npm i playwright-core (instale no diretório do seu projeto, não no diretório desta skill).