🖥️ Video 16:9 para YouTube
El formato estándar de YouTube es 1920 × 1080 px. Con HyperFrames, escribes escenas en HTML + GSAP y renderizas el MP4 en alta calidad, sin abrir un editor de video.
El generador build-index.mjs escribe un index.html con el viewport fijo en 1920 × 1080. HyperFrames usa Chrome headless para capturar cada frame y FFmpeg ensambla el MP4. Sin una flag, el output siempre es 16:9.
- ✓ Usar
--quality highen el render final - ✓ Mantener la narración ≈ 100s de habla (≈ 1:50 de video)
- ✓ Incluir una miniatura de alto contraste en la escena 1
- ✓ Generar MP4 con códec H.264, 60fps fluido
- ✗ Publicar render
--quality draft(resolución baja) - ✗ Superar los 15 min sin capítulos (caída de la retención)
- ✗ Usar una fuente menor que 32px (ilegible en móvil)
- ✗ Omitir la escena de CTA (pérdida de conversión)
sceneN() devuelve HTML estático; anim() recibe el timeline de GSAP y anima los elementos.📱 Shorts/Reels/TikTok en 9:16
El mismo proyecto HTML se convierte en un video 1080 × 1920 px con el flag --vertical. HyperFrames recompone el diseño y renderiza el frame en formato vertical, sin duplicar código.
node build-index.mjs (sin flag)node build-index.mjs --verticalEn el modo --vertical, HyperFrames inyecta la clase .vertical no <body>. Usa selectores .vertical .sua-classe en el CSS de las escenas para reposicionar elementos — columna en lugar de fila, texto más grande, márgenes más pequeños.
- ✓ Usar fuentes ≥ 48px en el modo vertical (zona segura más pequeña)
- ✓ Mantén el CTA y los subtítulos en la mitad inferior de la pantalla
- ✓ Validar el diseño con
npx hyperframes inspect --samples 16 - ✓ Limita a ≤ 60 s para Shorts/Reels (≤ 180 s para TikTok)
- ✗ Reutilizar el diseño 16:9 sin ajustes
.vertical - ✗ Poner el texto importante en la franja superior (cubierta por la UI de la app)
- ✗ Ignorar el lint antes del render — los errores de diseño se ven ampliados
- ✗ Publicar sin subtítulos (la mayoría mira sin sonido)
⏱️ Por qué ~110s mantiene la retención
100 segundos de voz equivalen a ~1:50 de video. Ese intervalo es lo suficientemente largo para enseñar un concepto completo y lo suficientemente corto para mantener la atención: el punto ideal para Shorts y tutoriales de YouTube.
Cada escena de SCRIPT.md tiene ≈ 15–18 s de narración (medido con ffprobe). Con 6–7 escenas llegas exactamente a ~100 s de habla. Voz: pf_dora --speed 0.98 en Kokoro. Guarda las duraciones en el array AUDIO[] del build-index.mjs.
ffprobe assets/audio/sN.wav — HyperFrames sincroniza la animación y el audio.💬 Subtítulos/captions siempre activados
El 85 % de los videos en feeds se ve sin sonido. Los subtítulos incrustados (burned-in) en el frame garantizan accesibilidad y legibilidad incluso sin sonido, y además refuerzan la identidad visual dark premium.
El array CAPTIONS[] en build-index.mjs define textos sincronizados con el audio. La plantilla inyecta un <div class="caption"> fijo en el pie de cada escena. El CSS predeterminado usa Inter 600, 36px, fondo rgba(0,0,0,0.55), padding 12px: legible sobre cualquier fondo.
La caption de HyperFrames es burned-in — forma parte del frame del video. Esto es intencional: garantiza que aparezca en cualquier plataforma, incluso cuando el reproductor está silenciado y no admite SRT/VTT. Para SEO, agrega también subtítulos por separado al subirlo a YouTube.
En el modo --vertical, usa .vertical .caption { font-size: 52px; bottom: 160px; } — la resolución 1080×1920 es mucho mayor y el caption debe escalarse.
🏁 CTA al final
La última escena es el CTA — Call to Action. En el estándar de INEMA.CLUB, muestra "CONTINÚA EN" + dominio destacado + URL legible. Ya viene lista en la plantilla de HyperFrames como scene9().
La escena final muestra "CONTINÚA EN" + INEMA.CLUB con glow ámbar, URL 🌐 inema.club y una narración breve: "Esto es contenido de INEMA punto CLUB. Accede: inema punto club.". Es la scene9() en el template — no lo elimines.
- ✓ Mantén la escena de CTA en TODOS los videos
- ✓ URL legible y URL mencionada en la narración
- ✓ Adapta a tu marca (reemplaza INEMA.CLUB por tu dominio)
- ✓ Mantener el glow ámbar — identidad visual coherente
- ✗ Eliminar la escena final (se pierden conversión e identidad)
- ✗ Poner un CTA largo (> 8 s) — el viewer abandona
- ✗ URL ilegible o fondo que compite con el texto
- ✗ Olvidar decir la URL en la narración
♻️ Un guion, dos formatos
Un único SCRIPT.md + uno solo build-index.mjs producen los dos MP4. Es el flujo completo de publicación de HyperFrames — ningún código duplicado.
Escribe el guion una vez. Adapta el CSS de las escenas con selectores .vertical. Ejecuta el generador dos veces. El resultado son dos MP4 listos para publicar en YouTube (16:9) y en YouTube Shorts / Instagram Reels / TikTok (9:16).
Usa --quality draft para verificar los tiempos y el diseño antes de dedicar tiempo al render final. Extrae frames con npx hyperframes inspect --samples 16 y revisa las 16 capturas antes de ejecutar --quality high.
- ✓ Renderizar primero en 16:9, validar y después en 9:16
- ✓ Guardar los dos MP4 en
renders/con nombres distintos - ✓ Probar
--quality draften ambos modos antes del high - ✓ Agregar selectores
.verticalen el CSS de escenas con texto largo
- ✗ Mantener dos archivos build-index separados (viola DRY)
- ✗ Publicar sin hacer lint — los errores de diseño aparecen en el reproductor
- ✗ Sobrescribir renders/ sin control de versiones
- ✗ Ignorar la safe zone en el modo vertical
📋 Resumen del Módulo 4.1
--vertical.