🧭 Incorporación al producto
Explicar una nueva función en ~90 segundos es el caso de uso más inmediato de HyperFrames. En vez de un recorrido estático de capturas de pantalla, entregas un MP4 narrado que el usuario ve en la propia app y que puedes volver a generar cada vez que cambie la función.
Las capturas de pantalla quedan obsoletas: con cada release la UI cambia y el carrusel queda desactualizado. Con HyperFrames, el SCRIPT.md es la fuente de la verdad. Editas el guion, ejecutas node build-index.mjs && npx hyperframes render y tienes un video nuevo en minutos, sin editor ni grabador de pantalla.
Escribir SCRIPT.md
6 escenas, ~100 s de narración en total. Describe la feature desde el punto de vista del usuario, no del desarrollador.
Generar narración con Kokoro
Voz pf_dora --speed 0.98, medir la duración con ffprobe, completar AUDIO[] en el generador.
Componer escenas en build-index.mjs
Cada escena = un estado de la interfaz recreado en HTML dark premium. Usa GSAP para animar las entradas y los resaltados.
Renderizar y distribuir
npx hyperframes render --quality high --output renders/onboarding-v2.mp4 — lo sube al CDN o lo integra directamente en la app.
- ✓ Narración de 1–3 frases por escena (≤20 s)
- ✓ UI recreada en HTML, no una captura de pantalla real
- ✓ CTA final con enlace directo a la función
- ✓ Versión 9:16 para el onboarding móvil
- ✗ Video de 5+ minutos — el usuario abandona en 30 s
- ✗ Capturas de pantalla en lugar de HTML (queda desactualizado)
- ✗ Narración muy rápida: usa
--speed 0.98, no 1.2 - ✗ Sin versión muda: olvidar volver a renderizar después de una actualización
Nombra los renders como onboarding-v1.mp4, onboarding-v2.mp4. Así, el CDN no almacena en caché el video anterior y conservas el historial para revertir cambios.
🎓 Microclases y cursos
Transformar un concepto en una clase breve narrada —con código animado, diagrama SVG y captions sincronizados— es lo que HyperFrames hace mejor. Cada clase es un SCRIPT.md; un curso es una carpeta de SCRIPTs.
El array CAPTIONS[] no build-index.mjs define los subtítulos sincronizados con el audio. En las microclases, completa todas las escenas: quien mira sin sonido (feed de LinkedIn, celular en silencio) aún absorbe el contenido.
📣 Lanzamiento / changelog en video
Anunciar un release con un video narrado en lugar de una publicación de texto aumenta la interacción, especialmente en LinkedIn y en el canal de Discord del producto. HyperFrames produce el video del changelog en el mismo CI que publica el release.
Más del 80% de los usuarios ignora las publicaciones con notas de lanzamiento. Los videos de 60–90 s con narración y animación de la nueva función tienen una tasa de apertura 3–5× mayor en canales como Discord, Slack y el correo electrónico del producto.
- ✓ Enfócate en 3 cambios, no en los 47 del release
- ✓ Muestra el «antes» y el «después» animado
- ✓ Versión 9:16 para Stories/Reels del producto
- ✓ Automatiza en CI:
npx hyperframes renderen el pipeline de release
- ✗ Listar bugs corregidos: al usuario no le importa
- ✗ Más de 2 min de duración: la atención disminuye
- ✗ Narrar jerga interna de la empresa ("refactorización de la capa de servicio")
- ✗ Olvidar el CTA: "actualiza ahora en inema.club/app"
🧑🤝🧑 Explicar un concepto técnico al equipo
Alinear el entendimiento interno sin reuniones. Un video de 90 s explica una decisión de arquitectura, un nuevo estándar de código o un proceso de deploy, y queda disponible para consultar de forma asíncrona en Notion, Confluence o un canal de Slack.
Las reuniones de alineación tienen un alto costo de atención y baja retención. Un video narrado de 90 s, con un diagrama animado y código real, se puede pausar, retroceder y ver cuando el desarrollador esté concentrado, no cuando lo hayan convocado.
| Aspecto | Video HyperFrames | Reunión sincrónica |
|---|---|---|
| Costo de tiempo del equipo | 90 s por persona | 30–60 min × N devs |
| Disponibilidad | Asíncrono, 24/7 | Depende de la agenda |
| Retención del contenido | Puedes pausar y volver a ver | Depende de las notas |
| Actualización | Volver a ejecutar el build | Nueva reunión |
Usa la función sceneN() del build-index.mjs para inyectar SVG futurista con flechas animadas (GSAP gsap.from() + stagger) mostrando el flujo del sistema. Mucho más claro que una diapositiva de texto.
📄 Documentación en video que no queda desactualizada
La queja más común sobre la documentación en video es que queda desactualizada en unas semanas. Con HyperFrames, el video es un artefacto de build: cuando cambia el contenido, solo tienes que editar el SCRIPT.md y volver a ejecutar el build. No hace falta abrir un editor de video.
La API cambia; la documentación queda desactualizada
Endpoint renombrado, parámetro nuevo, comportamiento modificado. El video anterior quedó desactualizado.
Editar SCRIPT.md e assets/txt/sN.txt
Ajusta las líneas de narración y el HTML de la escena afectada. ~5 min de trabajo.
Volver a generar la narración solo de las escenas modificadas
npx kokoro-tts assets/txt/s3.txt --voice pf_dora --speed 0.98 --output assets/audio/s3.wav
Reconstrucción y renderizado
node build-index.mjs && npx hyperframes lint && npx hyperframes render --quality high --output renders/docs-api-v3.mp4
Video actualizado publicado
De cero a un MP4 nuevo: ~10 min. Sin abrir un editor de video ni volver a grabar la pantalla.
🎨 Adaptar el house style a la marca del cliente
HyperFrames tiene una paleta dark premium predeterminada (#0D1321 bg, #FFC300 accent). Pero el design.md es el único archivo que necesitas cambiar para adaptar todo el aspecto visual a una marca diferente, manteniendo el pipeline completo.
Cambia con el design.md:
- ✓ Color de fondo (
bg) - ✓ Color de acento (botones, bordes, resaltados)
- ✓ Fuentes (títulos, cuerpo, mono)
- ✓ Color y texto de la CTA final
- ✓ Logo/ícono de la empresa en la escena inicial
No cambia (el pipeline permanece igual):
- — Estructura de escenas (SCRIPT.md)
- — TTS (pf_dora, Kokoro local)
- — Renderizado (Chrome headless + FFmpeg)
- — Comandos de npx hyperframes lint/render
- ✓ Fondo siempre oscuro (dark premium — no cedas al "fondo blanco")
- ✓ Acento con contraste ≥4.5:1 frente al fondo
- ✓ Fuente del título con peso 700 u 800
- ✓ Probar con
npx hyperframes inspect --samples 16antes de entregar
- ✗ Fondo blanco — las fuentes antialias se ven pixeladas en el render
- ✗ Acento demasiado claro (p. ej.,
#FFFF00) — ofusca el texto - ✗ Cambiar el
LEAD/TAIL/FADEsin probar (LEAD=0.5 TAIL=0.9 FADE=0.45son los valores validados) - ✗ Usar una fuente no disponible en Google Fonts: rompe el
fetch-fonts.mjs
Los valores LEAD=0.5 (silencio antes de la narración), TAIL=0.9 (pausa después de la narración) y FADE=0.45 (la duración del fade entre escenas) se calibraron para la voz pf_dora --speed 0.98. Si cambias la voz o la velocidad, recalibra estos valores.
📋 Resumen del Módulo 4.2
- ✓ Onboarding de producto: video narrado de ~90 s, regenerable con cada release
- ✓ Microlecciones: estructura de 6 escenas con CAPTIONS[] para accesibilidad
- ✓ Changelog en video: máx. 3 features, narración con lenguaje de producto
- ✓ Alineación técnica asíncrona: SVG animado reemplaza una reunión de 30 min
- ✓ Documentación en video: el MP4 es un artefacto de build y se actualiza en ~10 min
- ✓ Adaptación de marca: solo cambia design.md; el pipeline completo permanece
- →
pf_dora --speed 0.98— voz estándar PT-BR - →
LEAD=0.5 / TAIL=0.9 / FADE=0.45— timings validados - →
npx hyperframes lintantes de cada render - →
npx hyperframes inspect --samples 16para revisar el diseño - →
bg #0D1321 / accent #FFC300— paleta dark premium estándar - →
--quality highpara el render final (no borrador)
🧰 Biblioteca de prompts
Colección de prompts listos para los casos de uso más comunes — onboarding, microclase, changelog y más.