De demo a reel promo: demo web estilo Screen Studio

webapp-screencast

Tú escribes la grabación, webapp-screencast la graba y edita. Salida: OUT/<name>.mp4 (1920×1080, 60 fps) más un póster .jpg. Todo es un archivo que escribes (scenario.py, plan.py) y una CLI. Siempre llama a la CLI con --json (antes del subcomando): stdout es un objeto JSON (ok, error, rutas, duraciones, advertencias); el progreso va a stderr. Salida 0 ok, 1 paso fallido, 2 entrada incorrecta.

Claves de API y plan: reference.md. Léelo antes de escribir scenario.py / plan.py.

0. Configuración (una vez por máquina)

webapp-screencast --json doctor

Si falta webapp-screencast: pip install git+https://github.com/dr-osmanovich/webapp-screencast.git (usa el venv del proyecto si lo tiene), luego python -m playwright install chromium. doctor lista cada verificación fallida con su fix. Node 22+ y ffmpeg son necesarios para el renderizado.

1. Entiende la aplicación (antes de cualquier grabación)

• Encuentra cómo se ejecuta localmente (README, scripts de package.json, Makefile, docker-compose) y su URL. Una carpeta estática simple puede ser servida por webapp-screencast (make --serve DIR).
• Encuentra datos demo/de prueba y cuentas de prueba en el repositorio (fixtures, scripts seed, .env.example). Nunca grabes datos de producción, de clientes reales, de pacientes o credenciales reales. Si no hay datos demo seguros, detente y pregunta al usuario.
• Encuentra cómo restablecer el estado (script seed/reset, limpiar localStorage). Cada toma comienza limpia.
• Elige 3–5 momentos clave que muestren el valor: gancho → acción → resultado → un detalle → fin. 15–30 s de metraje.
• Lee los componentes reales para obtener selectores estables (ids, data-testid, roles). No adivines.

2. Andamio y script

webapp-screencast --json init video/ --base-url http://127.0.0.1:3000 --title "Nombre del producto"

Escribe video/scenario.py: CONFIG, opcional login(page, cfg) y prepare(page, cfg), y run(take, page). Reglas que ahorran regrabaciones:

• take.mark("nombre") en cada momento clave; take.box("nombre", selector) (o click(..., name=)) para todo lo que la cámara o un recuadro deba encuadrar. Siempre marca hook primero y end al final.
• Espera a la aplicación con page.wait_for_selector(...) después de las acciones, luego take.hold(0.3–0.8).
• Aparta el puntero del texto antes de take.type(...); escribe a cps 25–35.
• En prepare() oculta toasts, banners de cookies, superposiciones de desarrollo; cierra paneles laterales.
• Los tooltips nativos con title= nunca se renderizan sin cabeza — usa un callout del plan en su lugar.

3. Graba e inspecciona

webapp-screencast --json record video/scenario.py --out video/out/footage [--base-url URL]
webapp-screencast --json inspect video/out/footage

Verifica que peak_fps ≥ 50 en momentos clave con actividad (menor en macOS → problema con banderas GPU, consulta la referencia) y que cada marca que planeaste esté presente. Un selector fallido genera un error de Playwright en stderr: corrige el escenario y vuelve a grabar — el metraje es barato (≈ duración de la toma + 10 s).

4. Planifica, compón, mira

Escribe video/plan.py usando las marcas y cajas que inspect imprimió (nunca codificar segundos duro): segmentos de cámara que sigan la acción (zoom 1.4–1.7 en el momento clave, vuelve a 1.0 entre escenas), un subtítulo corto por momento clave (≥ 0.3 s por palabra, sin superposiciones), tarjetas de intro/outro.

webapp-screencast --json compose video/plan.py --footage video/out/footage --out video/out/composition
webapp-screencast --json snapshot video/out/composition --at 1,5,9,14 --out video/out/stills

Corrige cada entrada de warnings. Mira las imágenes fijas (lee los PNG / hoja de contactos): texto legible, cámara en la acción, nada recortado, ningún subtítulo cubriendo lo que describe. Itera sobre plan.py con compose + snapshot solamente — no es necesario grabar de nuevo.

5. Renderiza y entrega

El renderizado toma ~4–5 min por cada 20 s en un M1 — ejecútalo en segundo plano con un archivo de registro.

webapp-screencast --json render video/out/composition --out video/out/video.mp4
webapp-screencast --json poster video/out/video.mp4 --at 9.0

Confirma que el JSON muestre fps: 60 y la duración esperada. Entrega las rutas del mp4 + póster. Añade .gitignore al directorio out/; confirma scenario.py + plan.py para que el video se pueda rehacer tras cambios en la interfaz.

Una sola ejecución cuando el escenario y el plan ya están listos: webapp-screencast --json make video/scenario.py video/plan.py --out video/out --base-url URL --poster-at 9 (--serve DIR para sitios estáticos, --skip-render para detenerse después de la verificación).

Con /brag (u otra habilidad de video de lanzamiento)

Brag decide la historia; webapp-screencast proporciona el metraje real.

1. Ejecuta la planificación propia de brag: concepto, tono, momentos clave, título, texto. Detente antes de construir escenas de capturas de pantalla.
2. Convierte los momentos clave de brag en marcas de scenario.py (una marca por momento clave) y graba.
3. Pon las líneas de brag en plan.py: gancho → intro.title, pies de los momentos clave → subtitles, línea de cierre / CTA → outro; mapea el tono de brag a look (pulido → graphite/ocean, divertido → sunset/violet, acento = el color de marca de la aplicación desde su CSS).
4. Compón, captura, renderiza como arriba en la carpeta de salida de brag; luego deja que brag escriba el texto para compartir. Solo apaisado 16:9 por ahora; si brag pide vertical, dímelo y renderiza apaisado.