Del enlace de la app al recorrido narrado.

🖱️ Cursor que acierta en el botón

En la captura, la skill toma la cuadro delimitador real de cada objetivo con getBoundingClientRect. El cursor animado cae en el centro del control, con pulse y ripple al hacer clic. Eso es lo que hace que parezca una grabación profesional y no una captura con una flecha encima.

🔒 100% local, sin clave de API

Captura mediante agent-browser (Playwright), render HTML→MP4 vía HyperFrames, narración PT-BR mediante TTS Kokoro (voz pf_dora) ejecutándose en la propia máquina. Ninguna llamada paga ni servicio externo.

⏱️ Timing de fuente única

El generador lee el steps.json y mide la duración de cada WAV con ffprobe. No hay una tabla de tiempos manual: el audio y la animación nacen sincronizados, y los loops de ambiente no dejan una cola silenciosa al final.

Guion y texto

5–8 pasos + CTA (≈35–50s). Cada frase tiene dos formas: pantalla (PT-BR acentuado, botones de la app en la grafía original — Generate, Upload) e habla (números expandidos e inglés reescrito fonéticamente — upload → «subida»). La revisión se hace antes de capturar y narrar.

Captura y coordenadas

O capture.mjs lee un actions.json, dirige el agent-browser desde la app, toma 1 captura de pantalla por estado y registra el cuadro delimitador de cada objetivo. Resultado: assets/shots/*.png + steps.json. Se puede hacer manualmente cuando la app es impredecible (login, estados dinámicos).

Composición y render

O build-demo.mjs lee el steps.json, mide los WAV y arma el marco del navegador + cursor global + resaltado + zoom en el resultado + CTA. Después: lint, inspect, borrador para revisar los frames y render final en high / 30fps.

Node 22+ y FFmpeg

Base de HyperFrames (render HTML→MP4) y de ffprobe, que mide las duraciones de la narración.

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

Chrome de HyperFrames

Navegador headless usado para el render. Se descarga una vez y queda en caché.

npx hyperframes browser ensure

TTS Kokoro (PT-BR)

Narración local, voz pf_dora. La primera ejecución descarga ~340MB de modelo.

pip install kokoro-onnx soundfile

agent-browser en el PATH

Skill de navegación (Playwright) que ejecuta las acciones y toma las capturas de pantalla reales.

agent-browser set viewport 1280 800

La app objetivo en funcionamiento

La URL debe responder durante la captura — localhost o público. Una app con inicio de sesión requiere credenciales de prueba.

# ej.: tu app sirviendo en
http://localhost:8000/

La skill instalada

Copia skills/video-demonstrativo/ de este repo para tus skills de Claude Code.

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

Entrada · actions.json

Describes la acción y el objetivo del cursor. El script resuelve el 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."
  }]
}

Salida · steps.json

El objetivo pasó a ser una coordenada real en el espacio de la captura de pantalla. Es lo que persigue el cursor.

{
  "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 } }
  ]
}

Pantalla estática

El estado dinámico de la app (animaciones, video, datos en vivo) se convierte en impresión estática. Un movimiento real requeriría grabar un video de la pantalla: otro camino, con una sincronización de la narración más difícil.

Inicio de sesión

La app con autenticación necesita credenciales de prueba. Sin ellas, captura solo las pantallas públicas.

Solo 16:9

Formato natural, porque las pantallas de las apps son apaisadas. 9:16 exigiría recortar y reencuadrar cada toma.

Voz sin actuación

Kokoro es bueno, pero no interpreta. Y tú no escuchas el resultado: quien valida la locución siempre es el usuario.