🖥️ 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 fotograma y FFmpeg crea el MP4. Sin la flag, el output siempre es 16:9.
- ✓ Usar
--quality highen el render final - ✓ Mantén la narración en ≈ 100s de voz (≈ 1:50 de video)
- ✓ Incluir una miniatura de alto contraste en la escena 1
- ✓ Generar MP4 con códec H.264, 60fps fluidos
- ✗ Publicar render
--quality draft(baja resolución) - ✗ 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 conversiones)
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 fotograma 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 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 - ✓ Limitar a ≤ 60 s para Shorts/Reels (≤ 180 s para TikTok)
- ✗ Reutilizar el diseño 16:9 sin ajustes
.vertical - ✗ Colocar el texto importante en la franja superior (la UI de la aplicación la cubre)
- ✗ Ignorar el lint antes del render — los errores de diseño aparecen 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. Este intervalo es lo bastante largo para enseñar un concepto completo y lo bastante 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 voz. 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 los feeds se ve sin sonido. Los subtítulos integrados en el fotograma (burned-in) 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 de 12px: legible sobre cualquier fondo.
La caption de HyperFrames es burned-in — forma parte del frame del video. Es intencional: garantiza que aparezca en cualquier plataforma, incluso cuando el reproductor está en silencio y no admite SRT/VTT. Para SEO, añade también subtítulos por separado al subir el video 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 "CONTINUA 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
- ✓ Adaptar a tu marca (cambia INEMA.CLUB por tu dominio)
- ✓ Mantén el brillo ámbar: identidad visual coherente
- ✗ Eliminar la escena final (se pierde conversión e identidad)
- ✗ Agregar un CTA largo (> 8 s): el espectador abandona
- ✗ URL ilegible o con un 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: no hay 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 revisar el timing y el diseño antes de invertir tiempo en el 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 de high - ✓ Agregar selectores
.verticalen el CSS de escenas con texto largo
- ✗ Mantener dos archivos build-index separados (viola DRY)
- ✗ Publicar sin hacer lint — los bugs de diseño aparecen en el reproductor
- ✗ Sobrescribir renders/ sin control de versiones
- ✗ Ignorar la zona segura en el modo vertical
📋 Resumen del Módulo 4.1
--vertical.