🧱 Estrutura do actions.json
Um JSON com a configuração global e a lista de passos. É o roteiro que o capture.mjs executa de ponta a ponta.
O actions.json descreve toda a demo num arquivo: onde ir, em que tamanho, o que fazer em cada passo e o que falar. Um node capture.mjs actions.json e a captura sai pronta.
📺 URL + viewport
Onde e em que tamanho. O viewport definido aqui é o espaço de coordenadas de todas as bboxes do vídeo.
agent-browser open <url>. O app precisa estar no ar nesse endereço.set viewport W H antes do open. Largura ≤ ~1280 para caber no 16:9.Como o viewport é o espaço de coordenadas das bboxes, alterá-lo depois de capturar quebra o alinhamento do cursor. Decida o viewport antes de gerar os shots.
Acima de ~1280 de largura, o print sai espremido ou passa das bordas do canvas 1920×1080. Reduza o viewport na captura em vez de forçar.
📋 A lista de passos
O array steps em ordem: cada item é um estado da tela. 5–8 passos + CTA ≈ 35–50s.
O 1º passo apresenta o app, sem ação — só o screenshot do estado inicial.
Cada passo executa um do, captura a tela e mede a bbox do target.
O último passo de conteúdo dá um zoom suave no resultado. A CTA do AutomationsAI vem do composition-template.
Além disso o vídeo cansa e a captura/edição vira trabalho grande. 5–8 passos + CTA dão um walkthrough de ~35–50s.
⚙️ O campo do:{type}
A ação executada antes do screenshot. Sem do, o passo só captura o estado atual.
| do.type | Campos | O que faz |
|---|---|---|
| fill | selector, value | Preenche input/textarea (CSS selector) |
| click | selector | Clica (CSS selector) |
| clickText | tag, text | Clica o <tag> cujo texto === text |
| setValue | selector, value | Define value e dispara input/change |
| wait | ms | Espera (ex.: geração demorada) |
Foi o caso do campo de altura: fill não bastava. O setValue dispara input+change para o framework reagir. (O fill nativo do Playwright é roadmap — módulo 2.4.)
🎯 O alvo / seletor de cada passo
O target é o que o cursor mira. Pode ser diferente do elemento que o do aciona.
- ✓ CSS selector:
"textarea" - ✓ CSS por atributo:
"input[name=height]" - ✓ Por texto:
{tag:"button", text:"Gerar"} - ✓ O capture lê a bbox do target via eval
- ✗ Target sem match → bbox
null+ aviso no log - ✗ Evite @eN voláteis em telas que mudam
- ✗ Texto com acento/espaço precisa bater exato
- ✗ Não confunda o alvo do clique com o alvo da mira
Você pode preencher um campo (do) e mirar o botão de enviar (target). O cursor vai para o target; a ação acontece no do.
🗣️ Texto de narração por passo
caption é a legenda na tela; narration é a fala. Expanda números e siglas para a leitura sair natural.
O texto de cada passo é escrito em assets/txt/sN.txt e o Kokoro (voz pf_dora, --speed 0.98) gera os WAVs. Texto fonético = voz natural.
📦 A saída: steps.json + os shots PNG
O capture.mjs gera os screenshots e o steps.json — a ponte entre captura (T2) e render (T3).
00-home.png, 01-prompt.png...).O composition-template.mjs (T3) lê o steps.json e monta moldura + cursor + destaque + zoom + CTA, medindo os WAVs com ffprobe — timing único.
🎯 Resumo do módulo
- ✓ actions.json = url + viewport + window + steps[] + CTA
- ✓ viewport definido aqui é o espaço de coordenadas das bboxes
- ✓ do.type: fill / click / clickText / setValue / wait
- ✓ target = o que o cursor mira (CSS selector ou {tag,text})
- ✓ saída: shots/*.png + steps.json (contrato captura→render)