¿Qué hace HyperFrames CLI?
Todo se ejecuta a través de npx hyperframes. Requiere Node.js >= 22 y FFmpeg.
Flujo de trabajo
- Crear proyecto —
npx hyperframes init my-video - Escribir — crear composición HTML (ver la habilidad
hyperframes) - Lint —
npx hyperframes lint - Inspección visual —
npx hyperframes inspect - Previsualizar —
npx hyperframes preview - Renderizar —
npx hyperframes render
Realiza lint e inspect antes de previsualizar. lint detecta data-composition-id faltantes, pistas superpuestas y líneas de tiempo no registradas. inspect abre la composición renderizada en Chrome headless, recorre la línea de tiempo e informa texto que se sale de burbujas/contenedores o del lienzo.
Creación de proyectos
npx hyperframes init my-video # asistente interactivo
npx hyperframes init my-video --example warm-grain # elegir un ejemplo
npx hyperframes init my-video --video clip.mp4 # con archivo de video
npx hyperframes init my-video --audio track.mp3 # con archivo de audio
npx hyperframes init my-video --non-interactive # omitir avisos (CI/agentes)
Plantillas: blank, warm-grain, play-mode, swiss-grid, vignelli, decision-tree, kinetic-type, product-promo, nyt-graph.
init crea la estructura de archivos correcta, copia medios, transcribe audio con Whisper e instala habilidades de codificación AI. Úsalo en lugar de crear archivos manualmente.
Linting
npx hyperframes lint # directorio actual
npx hyperframes lint ./my-project # proyecto específico
npx hyperframes lint --verbose # hallazgos a nivel informativo
npx hyperframes lint --json # legible por máquina
Analiza index.html y todos los archivos en compositions/. Reporta errores (deben corregirse), advertencias (deberían corregirse) e información (con --verbose).
Inspección visual
npx hyperframes inspect # inspeccionar diseño renderizado a lo largo de la línea de tiempo
npx hyperframes inspect ./my-project # proyecto específico
npx hyperframes inspect --json # hallazgos legibles por agente
npx hyperframes inspect --samples 15 # barrido más denso de la línea de tiempo
npx hyperframes inspect --at 1.5,4,7.25 # marcas de tiempo explícitas para fotogramas clave
Úsalo después de lint y validate, especialmente para composiciones con burbujas de diálogo, tarjetas, subtítulos o tipografía ajustada. Reporta:
- Texto que se extiende fuera del contenedor visual o burbuja más cercana
- Texto recortado por su propia caja de ancho/alto fijo
- Texto que se extiende fuera del lienzo de la composición
- Hijos que escapan de contenedores con recorte
Los errores deben corregirse antes de renderizar. Las advertencias se muestran para revisión del agente; añade --strict para fallar también en advertencias. Los problemas estáticos repetidos se colapsan por defecto para que la salida JSON sea compacta para ventanas de contexto de LLM. Si el desbordamiento es intencional para una animación de entrada/salida, marca el elemento o ancestro con data-layout-allow-overflow. Si un elemento decorativo nunca debe auditarse, márcalo con data-layout-ignore.
npx hyperframes layout sigue disponible como alias de compatibilidad para el mismo pase de inspección visual.
Previsualización
npx hyperframes preview # servir directorio actual
npx hyperframes preview --port 4567 # puerto personalizado (predeterminado 3002)
Recarga en caliente al cambiar archivos. Abre el estudio en tu navegador automáticamente.
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 transparente
npx hyperframes render --docker # salida byte-idéntica
| Flag | Opciones | Predeterminado | Notas |
|---|---|---|---|
--output | ruta | renders/nombre_timestamp.mp4 | Ruta de salida |
--fps | 24, 30, 60 | 30 | 60fps duplica tiempo de render |
--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 |
Guía de calidad: draft mientras se itera, standard para revisión, high para entrega final.
Transcripción
npx hyperframes transcribe audio.mp3
npx hyperframes transcribe video.mp4 --model medium.en --language en
npx hyperframes transcribe subtitles.srt # importar existente
npx hyperframes transcribe subtitles.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 incluido
npx hyperframes info # versión y detalles del entorno
npx hyperframes upgrade # buscar actualizaciones
Ejecuta doctor primero si el renderizado falla. Problemas comunes: FFmpeg faltante, Chrome faltante, poca memoria.
Otros
npx hyperframes compositions # listar composiciones en el proyecto
npx hyperframes docs # abrir documentación
npx hyperframes benchmark . # evaluar rendimiento de render