Renderizar, exportar, corregir
Ejecutar desde dentro de projects/<name>/. Los archivos finales aprobados también se copian a exports/ en la raíz del espacio de trabajo.
Hoja de trucos
npx hyperframes render . -o renders/video.mp4 # por defecto
npx hyperframes render . --fps 60 -o renders/video-60fps.mp4
npx hyperframes render . --resolution 4k -o renders/video-4k.mp4 # el aspecto debe coincidir; retrato → retrato-4k
npx hyperframes render . --resolution 4k --fps 120 -o renders/video-4k-120.mp4
npx hyperframes render . --fps 24 -o renders/video-24fps.mp4
npx hyperframes render . --format mov -o renders/video.mov # ProRes
npx hyperframes render . --format png-sequence -o renders/frames
npx hyperframes render . --crf 23 -o renders/smaller.mp4 # archivo más pequeño
- Cuando los gráficos se superponen en el metraje del usuario, mantén la misma velocidad de fotogramas del metraje a menos que el usuario indique lo contrario.
- Referencia de tiempos en un portátil i3 de 4 núcleos con ~12 GB RAM (PCs más rápidos son más veloces): 6 segundos de gráficos simples en 1080p ≈ 24 s; 3:20 de metraje 1080x1920 + Paper Cut ≈ 1.5 h (~1.1 fps:
filter: drop-shadowfuerza la captura de pantalla, y la captura rápida solo funciona en macOS). Advierte al usuario antes de renders largos y renderiza una sola vez al final. - Palancas de velocidad:
--workers 3(cada Chrome ~256 MB; por defectoautoeligió 1 aquí — prueba primero en un clip corto),--quality draftpara renders de revisión, o un clip más corto. Si un render se queda sin memoria o expira, añade--low-memory-modey/o--protocol-timeout 600000. - Los cambios solo de audio nunca requieren un re-render:
node tools/sfx.mjs projects/<n> --mix in.mp4 out.mp4(la secuencia de video se copia). - Itera con
npx hyperframes snapshot(rápido) y renderiza solo cuando los fotogramas se vean correctos.
Exportación transparente (PROMPT 14)
MOV/PNG solo son transparentes si el fondo es transparente.
- Elimina el fondo y cualquier metraje de modo que solo quede(n) la(s) tarjeta(s); todo a su alrededor transparente.
- Las tarjetas esmeriladas pierden su desenfoque al no tener nada detrás → cámbialas a tarjetas sólidas para superposiciones.
- Exporta
renders/card.mov(ProRes 4444 con alfa,--format mov) y una secuencia PNG enrenders/card-png(--format png-sequence). - Toma un snapshot sobre un fondo de damero para verificar que solo la tarjeta sea visible. (
--format webmes otra opción transparente.)
Cuando algo se ve mal
| Síntoma | Solución |
|---|---|
| Tipografía incorrecta / fallback simple | Usa el archivo en fonts/ mediante @font-face; nunca una URL de fuente web. lint marca font_family_without_font_face. |
| Texto cortado en teléfonos | Mantén todo el texto dentro del 80% central del ancho. |
| Una tarjeta cubre los subtítulos | Mueve cada tarjeta por encima del tercio inferior. |
| Una tarjeta está un poco adelantada/atrasada | El reconocimiento de voz puede estar desfasado ~1 s. Reajusta al momento exacto de la palabra hablada (revisa el audio alrededor). |
| El archivo es enorme | Renderiza de nuevo con --crf 23 (especialmente estilos de grano). |
| Render silencioso | Cada <audio> necesita un id; el <video> no debe estar muted y necesita data-has-audio="true". |
Si el usuario describe el problema en palabras simples, tradúcelo a uno de estos o a un parámetro en mg-styles. |