🧭 Incorporación al producto
Explicar una nueva feature en ~90 segundos es el caso de uso más inmediato de HyperFrames. En lugar de un tour estático de capturas de pantalla, entregas un MP4 narrado que el usuario ve en la propia app y puedes volver a generar cada vez que cambie la feature.
Las capturas de pantalla envejecen: con cada release, la UI cambia y el carrusel queda desactualizado. Con HyperFrames, el SCRIPT.md es la fuente de 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 función 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 UI 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 — súbelo al CDN o insértalo directamente en la app.
- ✓ Narración de 1–3 frases por escena (≤20 s)
- ✓ Interfaz recreada en HTML, no una captura de pantalla real
- ✓ CTA final con enlace directo a la feature
- ✓ Versión 9:16 para la incorporación en móviles
- ✗ Video de 5+ minutos — el usuario lo abandona en 30 s
- ✗ Capturas de pantalla en vez de HTML (queda desactualizado)
- ✗ Narración muy rápida — usa
--speed 0.98, no 1.2 - ✗ Sin una versión silenciosa: 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 antiguo y conservas un 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) también asimila el contenido.
📣 Lanzamiento / changelog en video
Anunciar un lanzamiento con un video narrado en vez de una publicación de texto aumenta la participación, especialmente en LinkedIn y en el canal de Discord del producto. HyperFrames produce el video del changelog en el mismo CI que publica la release.
Los posts de notas de lanzamiento son ignorados por más del 80% de los usuarios. 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 lanzamiento
- ✓ 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 errores 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 la CTA: "actualiza ahora en inema.club/app"
🧑🤝🧑 Explicar un concepto técnico al equipo
Alinear el entendimiento interno sin reunirse. Un video de 90 s explica una decisión arquitectónica, un nuevo estándar de código o un proceso de deploy, y queda disponible para consulta asíncrona en Notion, Confluence o el canal de Slack.
Las reuniones de alineación tienen un alto costo de atención y una 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 dev esté enfocado, no cuando lo convocaron.
| 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/revisar | 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 un 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. Sin abrir ningún editor de video.
La API cambia; la documentación queda desactualizada
Se renombró un endpoint, se agregó un parámetro, cambió el comportamiento. El video anterior está 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 nuevo MP4: ~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 otra marca, manteniendo todo el pipeline.
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)
- — Render (Chrome headless + FFmpeg)
- — Comandos npx hyperframes lint/render
- ✓ Fondo siempre oscuro (premium oscuro: no cedas al «fondo blanco»)
- ✓ Color de acento con contraste ≥4.5:1 frente al fondo
- ✓ Fuente del título con peso 700 o 800
- ✓ Probar con
npx hyperframes inspect --samples 16antes de entregar
- ✗ Fondo blanco — las fuentes con antialiasing se ven pixeladas al renderizar
- ✗ Color de acento muy 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 que no está disponible en Google Fonts: se 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 fundido 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
- ✓ Incorporación de producto: video narrado de ~90 s, regenerable con cada lanzamiento
- ✓ Microclases: 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 compilación, se actualiza en ~10 min
- ✓ Adaptación de marca: solo cambia design.md — todo el pipeline permanece igual
- →
pf_dora --speed 0.98— voz estándar PT-BR - →
LEAD=0.5 / TAIL=0.9 / FADE=0.45— tiempos 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.