Do link do app ao walkthrough narrado.

🖱️ Cursor que acerta o botão

Na captura, a skill pega a bounding box real de cada alvo com getBoundingClientRect. O cursor animado cai no centro do controle — com pulse e ripple no clique. É isso que faz parecer gravação profissional, e não print com seta por cima.

🔒 100% local, sem API key

Captura via agent-browser (Playwright), render HTML→MP4 via HyperFrames, narração PT-BR via TTS Kokoro (voz pf_dora) rodando na própria máquina. Nenhuma chamada paga, nenhum serviço externo.

⏱️ Timing de fonte única

O gerador lê o steps.json e mede a duração de cada WAV com ffprobe. Não existe tabela de tempos na mão: áudio e animação nascem batidos, e os loops de ambiente não deixam cauda muda no fim.

Roteiro e texto

5–8 passos + CTA (≈35–50s). Cada frase tem duas formas: tela (PT-BR acentuado, botões do app na grafia original — Generate, Upload) e fala (números expandidos e inglês reescrito foneticamente — upload → "âploud"). A revisão vem antes de capturar e narrar.

Captura e coordenadas

O capture.mjs lê um actions.json, dirige o agent-browser pelo app, tira 1 screenshot por estado e grava a bounding box de cada alvo. Saída: assets/shots/*.png + steps.json. Dá pra fazer na mão quando o app é imprevisível (login, estados dinâmicos).

Composição e render

O build-demo.mjs lê o steps.json, mede os WAVs e monta moldura de navegador + cursor global + destaque + zoom no resultado + CTA. Depois: lint, inspect, draft pra conferir frames e render final em high / 30fps.

Node 22+ e FFmpeg

Base do HyperFrames (render HTML→MP4) e do ffprobe, que mede as durações da narração.

node --version   # precisa ser 22+
ffmpeg -version

Chrome do HyperFrames

Navegador headless usado pelo render. Baixa uma vez e fica cacheado.

npx hyperframes browser ensure

TTS Kokoro (PT-BR)

Narração local, voz pf_dora. A primeira execução baixa ~340MB de modelo.

pip install kokoro-onnx soundfile

agent-browser no PATH

Skill de navegação (Playwright) que executa as ações e tira os screenshots reais.

agent-browser set viewport 1280 800

O app-alvo no ar

A URL precisa responder durante a captura — localhost ou público. App com login exige credenciais de teste.

# ex.: seu app servindo em
http://localhost:8000/

A skill instalada

Copie skills/video-demonstrativo/ deste repo para as suas skills do Claude Code.

cp -r skills/video-demonstrativo \
  ~/.claude/skills/

Entrada · actions.json

Você descreve a ação e o alvo do cursor. O script resolve o resto.

{
  "url": "http://localhost:8000/",
  "viewport": [1280, 800],
  "window": { "urlLabel": "localhost:8000" },
  "steps": [{
    "id": "size",
    "do": { "type": "clickText", "tag": "button", "text": "512²" },
    "target": { "tag": "button", "text": "512²" },
    "click": true,
    "caption": "2 · Escolha o tamanho — 512²",
    "narration": "Depois, escolha o tamanho. Vamos de quinhentos e doze."
  }]
}

Saída · steps.json

O alvo virou coordenada real, no espaço do screenshot. É o que o cursor persegue.

{
  "viewport": [1280, 800],
  "steps": [
    { "shot": "00-home.png", "intro": true, "target": null },
    { "shot": "02-size.png", "click": true,
      "target": { "x": 179, "y": 501, "w": 44, "h": 26 } },
    { "shot": "04-result.png", "zoom": true,
      "target": { "x": 668, "y": 128, "w": 484, "h": 324 } }
  ]
}

Tela estática

Estado dinâmico do app (animações, vídeo, dados ao vivo) vira print estático. Movimento real exigiria gravar vídeo da tela — outro caminho, com sincronia de narração mais difícil.

Login

App com autenticação precisa de credenciais de teste. Sem elas, capture só as telas públicas.

Só 16:9

Formato natural, porque telas de app são landscape. 9:16 exigiria recortar e reenquadrar cada shot.

Voz sem atuação

O Kokoro é bom, mas não atua. E você não escuta o resultado — quem valida a locução é sempre o usuário.