Módulo 3.3 — Render no HyperFrames

1

🚀 npx hyperframes init <nome>

O ponto de partida: criar um projeto HyperFrames isolado onde o vídeo será montado e renderizado.

criar o projeto

npx hyperframes init <nome> --example blank --non-interactive

💡Pré-requisitos

Node 22+ e FFmpeg; o Chrome do HyperFrames (npx hyperframes browser ensure); Kokoro (pip install kokoro-onnx soundfile) e o agent-browser no PATH. O app-alvo precisa estar no ar (ex.: localhost:8000).

2

📦 Copiar scripts + assets/fonts

A skill é auto-contida: você copia os scripts e as fontes para o projeto e está pronto para rodar.

o que copiar para o projeto

capture.mjs                       ← dirige o agent-browser
composition-template.mjs  →  build-demo.mjs   ← renomear
narration-template.sh             ← gera os WAVs
assets/fonts/                     ← Sora/Inter/JetBrains (.woff2 + fonts.css)
# ou, em vez de copiar fonts:
node fetch-fonts.mjs              ← baixa as fontes

📊

Auto-contida

A skill traz as próprias fontes e house style. Não depende de nenhum outro projeto, repositório ou skill para funcionar — gera tudo do zero em qualquer projeto.

3

📸 node capture.mjs actions.json

A captura gera os shots e o steps.json — o elo com a Trilha 2 e a entrada da composição.

captura + narração

node capture.mjs actions.json     # -> assets/shots/*.png + steps.json
bash narration-template.sh        # -> assets/audio/sN.wav (voz pf_dora)

⚡

Viewport fixo é sagrado

As bounding boxes e os screenshots têm que sair do MESMO viewport (largura ≤ ~1280 para caber no 16:9) — senão o cursor erra o alvo. Tipos de ação: fill, click, clickText, setValue, wait.

📊

Captura manual quando o app é imprevisível

Para login ou estados dinâmicos, dá para dirigir o agent-browser na mão (snapshot, fill, screenshot, e pegar a bbox via eval) e montar o steps.json — o resultado é o mesmo.

4

🧱 build-demo + lint + inspect

Gere o index.html e valide antes de gastar tempo de render — lint e inspect são baratos.

node build-demo.mjs

Lê o steps.json, mede os WAVs e escreve o index.html (16:9).

npx hyperframes lint0 erros

Pega fontes via CDN, animação no .clip errado e regras quebradas do framework.

npx hyperframes inspect --samples 140 problemas

Amostra frames e detecta problemas de layout (crop, off-canvas sem data-layout-ignore).

5

🎬 render --quality high

Draft primeiro para conferir, depois alta qualidade — sempre validando frames e locução com o usuário.

render

# 1) conferir rápido
npx hyperframes render --quality draft
# extrair 1 frame por passo e mostrar ao usuário
ffmpeg -nostdin -y -ss <t> -i video.mp4 -vframes 1 -update 1 frame.png

# 2) render final
npx hyperframes render --quality high --fps 30 \
  --output renders/<nome>-16x9.mp4

🚨

Você não escuta o áudio

Sempre confira frames com o usuário e peça que ele valide a locução antes do render final — não dá para ouvir o áudio do seu lado.

6

🧯 Gotchas finais

As regras de ouro não-negociáveis que evitam horas de depuração no inspect.

✓FAZER

✓Capturar antes, animar depois (render determinístico)
✓Manter o viewport fixo = espaço das coordenadas
✓Animar o .scene-inner, nunca o .clip
✓Decorativos e moldura com data-layout-ignore

✗NÃO FAZER

✗Carregar o site ao vivo dentro do vídeo (sem fetch no render)
✗Usar fontes de CDN — só as locais de assets/fonts/
✗Digitar um AUDIO[] manual — o timing é medido
✗Editar o index.html à mão

📊

Limites conhecidos (seja honesto)

Estado dinâmico (animações, vídeo, dados ao vivo) vira print estático. App com login precisa de credenciais de teste (ou capture só telas públicas). O formato natural é 16:9 — telas de app são landscape.

7

🗺️ Roadmap (futuro)

O que a skill ainda não faz — itens de evolução, marcados claramente como futuro.

🔮Não implementado — backlog

①Scroll na captura — páginas longas hoje exigem dirigir o agent-browser na mão; a ideia é uma ação scroll + scrollIntoView por passo.
②Inputs controlados por React/Vue — usar o fill nativo do Playwright em vez de setar .value.
③Esperar condição (waitFor) em vez de tempo fixo, para fluxos assíncronos.
④9:16 / Shorts — telas de app são landscape; exigiria reenquadre (zoom/pan na região ativa).
⑤v3 — gravação de tela real (agent-browser record) com narração/zoom por cima, para apps com muito movimento.
⑥Polimento de cursor — caminho em curva (não linear) e "digitação" (typewriter) ao preencher campos.

⚡

Hoje (v1, default)

Screenshots estáticos + cursor/zoom animados, 16:9, narração local. Tudo acima é roadmap — não prometa o que a skill ainda não entrega.

🎯 O que você aprendeu

✓init do projeto + copiar scripts e assets/fonts da skill auto-contida
✓capture.mjs gera shots + steps.json; narração gera os WAVs
✓build-demo.mjs gera o index.html; lint + inspect validam (0/0)
✓render draft → high; conferir frames e validar a locução
✓gotchas não-negociáveis e o que é roadmap (9:16, v3, cursor em curva)

Você concluiu a Trilha 3. Da captura ao MP4 narrado com CTA do AutomationsAI — o walkthrough completo.

← Módulo 3.2: Narração & composição Voltar para a Trilha 3 →