CLI de HyperFrames
Todo se ejecuta mediante npx hyperframes. Requiere Node.js >= 22 y FFmpeg.
Flujo de trabajo
- Inicializar —
npx hyperframes init mi-video - Escribir — crear la composición HTML (ver la habilidad
hyperframes) - Validar —
npx hyperframes lint - Previsualizar —
npx hyperframes preview - Renderizar —
npx hyperframes render
Valida antes de previsualizar: detecta data-composition-id faltantes, pistas superpuestas, timelines no registrados.
Inicialización
npx hyperframes init mi-video # asistente interactivo
npx hyperframes init mi-video --example grano-calido # elegir un ejemplo
npx hyperframes init mi-video --video clip.mp4 # con archivo de video
npx hyperframes init mi-video --audio pista.mp3 # con archivo de audio
npx hyperframes init mi-video --non-interactive # omitir preguntas (CI/agentes)
Plantillas: blank, grano-calido, modo-juego, cuadricula-suiza, vignelli, arbol-decision, texto-cinetico, promo-producto, grafico-nyt.
init crea la estructura de carpetas correcta, copia los medios, transcribe el audio con Whisper e instala las habilidades de codificación de IA. Úsalo en lugar de crear los archivos manualmente.
Validación (Lint)
npx hyperframes lint # directorio actual
npx hyperframes lint ./mi-proyecto # proyecto específico
npx hyperframes lint --verbose # hallazgos a nivel informativo
npx hyperframes lint --json # legible por máquina
Valida index.html y todos los archivos en compositions/. Reporta errores (deben corregirse), advertencias (deberían corregirse) e información (con --verbose).
Previsualización
npx hyperframes preview # servir directorio actual
npx hyperframes preview --port 4567 # puerto personalizado (por defecto 3002)
Recarga en caliente al cambiar archivos. Abre el estudio automáticamente en el navegador.
Renderizado
npx hyperframes render # MP4 estándar
npx hyperframes render --output final.mp4 # salida con nombre
npx hyperframes render --quality draft # iteración rápida
npx hyperframes render --fps 60 --quality high # entrega final
npx hyperframes render --format webm # WebM con transparencia
npx hyperframes render --docker # salida byte-idéntica
| Flag | Opciones | Por defecto | Notas |
|---|---|---|---|
--output | ruta | renders/nombre_marca.mp4 | Ruta de salida |
--fps | 24, 30, 60 | 30 | 60fps duplica el tiempo |
--quality | draft, standard, high | standard | draft para iterar |
--format | mp4, webm | mp4 | WebM soporta transparencia |
--workers | 1-8 o auto | auto | Cada uno lanza Chrome |
--docker | flag | off | Salida reproducible |
--gpu | flag | off | Codificación acelerada por GPU |
--strict | flag | off | Fallar en errores de lint |
--strict-all | flag | off | Fallar en errores Y advertencias |
Recomendación de calidad: usa draft mientras iteres, standard para revisión, high para entrega final.
Transcripción
npx hyperframes transcribe audio.mp3
npx hyperframes transcribe video.mp4 --model medium.en --language es
npx hyperframes transcribe subtitulos.srt # importar existente
npx hyperframes transcribe subtitulos.vtt
npx hyperframes transcribe openai-response.json
Texto a Voz
npx hyperframes tts "Texto aquí" --voice af_nova --output narracion.wav
npx hyperframes tts script.txt --voice bf_emma
npx hyperframes tts --list # mostrar todas las voces
Solución de problemas
npx hyperframes doctor # verificar entorno (Chrome, FFmpeg, Node, memoria)
npx hyperframes browser # gestionar Chrome empaquetado
npx hyperframes info # versión y detalles del entorno
npx hyperframes upgrade # buscar actualizaciones
Ejecuta doctor primero si el renderizado falla. Problemas comunes: falta FFmpeg, falta Chrome, poca memoria.
Otros
npx hyperframes compositions # listar composiciones en el proyecto
npx hyperframes docs # abrir documentación
npx hyperframes benchmark . # medir rendimiento de renderizado