🎬 Qué es un walkthrough
Un walkthrough —o video de demostración— recorre una aplicación web real, pantalla por pantalla, y muestra la aplicación en uso: abrir, hacer clic, completar campos, generar, ver el resultado. No se dibuja nada; todo se captura directamente de la pantalla.
El walkthrough responde a "¿cómo uso esto?" mostrando la respuesta en la propia interfaz. En lugar de describir botones y campos, aparece interactuando con ellos, con un cursor que cae exactamente sobre el control y una narración que explica cada paso.
En la práctica: de 5 a 8 pasos + la CTA final dan como resultado un video de unos 35 a 50 segundos. El arco típico es abrir o app → ação 1 → ação 2 → … → resultado → CTA.
El paso de apertura suele ser la pantalla inicial (marcada intro:true) para presentar la app. El último paso de contenido suele ser el resultado (zoom:true), con un zoom suave que destaca la entrega.
⚖️ Demostrativo vs. explicativo
Son dos skills hermanas con el mismo motor de render (HyperFrames) y la misma CTA, pero con propósitos opuestos. Una muestra una app real; la otra explica un concepto abstracto con escenas animadas.
| Aspecto | 🖱️ video-demonstrativo | 🎬 video-explicativo |
|---|---|---|
| Objetivo | Mostrar una app en uso | Explicar un concepto |
| Visual | Capturas de pantalla reales | Motion graphics animados |
| Entrada | Enlace de la app / localhost | Un asunto / tema |
| Captura | agent-browser navega la app | No hay captura |
| Formato | 16:9 (pantallas apaisadas) | 16:9 e 9:16 |
- ✓ Hay una app o un sitio con una pantalla navegable
- ✓ ¿El usuario dio un enlace o un localhost?
- ✓ Quieres mostrar cómo funciona una feature en la práctica
- ✓ El enfoque es el producto, no la idea que hay detrás
- → El tema es abstracto, no hay una interfaz que mostrar
- → Quieres ilustrar con diagramas y animaciones
- → Necesitas una versión vertical (Shorts/Reels)
- → El enfoque es enseñar un concepto
Ambas terminan en la CTA de INEMA.CLUB y usan TTS local + HyperFrames. La diferencia está en el origen de lo visual: pantalla capturada (demostrativo) versus escena diseñada (explicativo).
🤔 Cuándo usar cada uno
Hay una prueba de una pregunta que decide la skill en segundos y elimina la duda incluso antes de empezar el guion.
"¿Hay una pantalla para mostrar?"
Si la respuesta es sí —hay una app, un localhost, una URL navegable—, es demostrativo. Si no hay interfaz, solo una idea para ilustrar, es explicativo.
Si es así, es la señal más clara de que es una demo. La propia entrada de la skill es el enlace de la app.
Los verbos de demostración ("mostrar", "grabar la pantalla", "paso a paso usando") apuntan a demostrativo.
Ahí es explicativo: el contenido será motion graphics, no una captura de pantalla.
Una sola pregunta al usuario resuelve los casos ambiguos sin costo.
El demostrativo exige que la app esté accesible durante la captura (p. ej., localhost:8000 en ejecución). Si la app no está en línea, no hay nada que recorrer; confírmalo antes de prometer el video.
📋 Casos de uso
El walkthrough brilla siempre que el objetivo es mostrar un producto en funcionamiento. Cuatro situaciones cubren la mayoría de las solicitudes.
Un usuario nuevo ve los primeros pasos de la app: registro, pantalla principal, primera acción de valor. Reduce la fricción para quien acaba de llegar.
Muestra una funcionalidad específica de principio a fin: útil cuando una nueva feature necesita un «cómo funciona» rápido.
Video de anuncio que muestra el producto real en acción durante el lanzamiento, con la CTA de INEMA.CLUB al final.
Responde «¿cómo hago X?» con un video corto que muestra el recorrido exacto en pantalla; puedes adjuntarlo a un ticket o a una base de ayuda.
Saber si es onboarding, una función, un lanzamiento o soporte ayuda a elegir qué pasos incluir en el video y cuál es el «resultado» que merece el zoom final.
🖱️ Lo que entrega la skill
Cuatro elementos transforman capturas de pantalla estáticas en un video que parece una grabación de pantalla profesional: marco del navegador, cursor animado, resaltado/zoom y narración.
Las capturas reales van dentro de un marco de navegador (barra + URL) para que parezca una ventana de verdad. Encima, un cursor global animado apunta al bounding box real de cada control, hace clic con pulse + ripple y el resultado recibe un zoom suave. La narración TTS lo une todo.
- ✓ El cursor cae exactamente sobre el control (box real, no a ojo)
- ✓ El clic se convierte en pulse + ripple visibles
- ✓ El zoom suave resalta el resultado final
- ✓ El timing se sincroniza con los WAV medidos por ffprobe
- ✗ El estado dinámico (video, datos en vivo) se convierte en una captura estática
- ✗ No carga el sitio en vivo dentro del video
- ✗ La app requiere credenciales de prueba para iniciar sesión
- ✗ Movimiento real solo en el modo v3 (hoja de ruta, aún no implementado)
📐 Formato de salida
El resultado es un MP4 en 16:9, narrado en PT-BR y terminado con la CTA de INEMA.CLUB. El formato apaisado no es una cuestión estética, sino técnica: las pantallas de las apps son anchas.
Toda salida termina en la misma escena: "CONTINÚA EN" + INEMA.CLUB (INEMA en crema, .CLUB en ámbar con glow) + 🌐 inema.club. La narración termina con "Esto es contenido de INEMA punto CLUB. Accede: inema punto club." Ya viene lista en la plantilla de composición.
Como las pantallas de las apps son landscape, la plantilla genera en 16:9. Una versión vertical exigiría recortar o reencuadrar la región activa; está en la hoja de ruta, no en el flujo estándar. No prometas Shorts de un walkthrough sin acordar el reencuadre.
🔗 La entrada es el enlace
A diferencia de las skills que parten de un briefing o guion, el punto de partida del demostrativo es literalmente el enlace de la app, y debe estar accesible.
- ✓ La app está en línea y responde
- ✓ Se puede acceder a la pantalla objetivo desde la URL
- ✓ Hay credenciales de prueba si inicias sesión
- ✓ El ancho cabe en 16:9 (≤ ~1280)
- ✗ App sin conexión — no hay nada que recorrer
- ✗ Inicio de sesión sin credenciales (capture solo pantallas públicas)
- ✗ La pantalla depende de datos en vivo que desaparecen
- ✗ La URL es inaccesible desde la máquina que captura
El primer paso práctico es asegurarse de que el enlace se abre y de que se puede recorrer el flujo objetivo. Sin eso, el resto del pipeline (captura, narración, render) no tiene sobre qué trabajar.
📋 Resumen del Módulo 1.1
- ✓ Recorrido = app real navegada paso a paso, con narración
- ✓ El demostrativo MUESTRA la app; el explicativo EXPLICA el concepto
- ✓ Prueba de 1 pregunta: "¿hay una pantalla para mostrar?"
- ✓ Casos: incorporación, función, lanzamiento, soporte
- ✓ Entrega: marco + cursor + zoom + narración
- ✓ Salida 16:9, narrada, con CTA; la entrada es el enlace de la app