Interfaz de Línea de Comandos HyperFrames
Todo se ejecuta a través de npx hyperframes. Requiere Node.js >= 22 y FFmpeg.
Flujo de Trabajo
- Andamio —
npx hyperframes init mi-video - Escribir — redactar la composición HTML (consulta el skill
hyperframes) - Revisar —
npx hyperframes lint - Inspeccionar visualmente —
npx hyperframes inspect - Previsualizar —
npx hyperframes preview - Renderizar —
npx hyperframes render
Revisa e inspecciona 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 sin interfaz gráfica, recorre la línea de tiempo e informa de texto que se sale de burbujas/contenedores o del lienzo.
Andamio
npx hyperframes init mi-video # asistente interactivo
npx hyperframes init mi-video --example warm-grain # 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 --example blank --tailwind # con Tailwind v4 en tiempo de ejecución del navegador
npx hyperframes init mi-video --non-interactive # saltar preguntas (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 los medios, transcribe el audio con Whisper e instala los skills de codificación de IA. Úsalo en lugar de crear archivos manualmente.
Al usar --tailwind, invoca el skill tailwind antes de editar clases o tokens de tema. El andamio usa Tailwind v4.2 a través del tiempo de ejecución del navegador, no la configuración de Tailwind v3 de Studio.
Revisión de Código
npx hyperframes lint # directorio actual
npx hyperframes lint ./mi-proyecto # proyecto específico
npx hyperframes lint --verbose # hallazgos a nivel de información
npx hyperframes lint --json # legible por máquina
Revisa 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 el diseño renderizado a lo largo de la línea de tiempo
npx hyperframes inspect ./mi-proyecto # proyecto específico
npx hyperframes inspect --json # hallazgos legibles por el 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 de fotogramas clave
Usa esto 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 de recorte
Los errores deben corregirse antes de renderizar. Las advertencias se presentan 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 se mantenga compacta para los contextos de ventana del 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 ser auditado, márcalo con data-layout-ignore.
npx hyperframes layout sigue estando disponible como alias de compatibilidad para la misma pasada de inspección visual.
Previsualización
npx hyperframes preview # servir el directorio actual
npx hyperframes preview --port 4567 # puerto personalizado (por defecto 3002)
Recarga en caliente al cambiar archivos. Abre el estudio en tu navegador automáticamente.
Al devolver un proyecto al usuario, usa la URL del proyecto de Studio, no la ruta del archivo index.html de origen:
http://localhost:<puerto>/#project/<nombre-del-proyecto>
Usa el puerto real de la salida de previsualización y el nombre del directorio del proyecto. Por ejemplo, después de npx hyperframes preview --port 3017 en codex-openai-video, informa http://localhost:3017/#project/codex-openai-video.
Trata index.html solo como contexto de código fuente. Está bien enlazarlo como archivo de implementación, pero no lo etiquetes como el proyecto o la superficie de previsualización.
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 # byte-idéntico
| Indicador | Opciones | Por Defecto | Notas |
|---|---|---|---|
--output | ruta | renders/nombre_timestamp.mp4 | Ruta de salida |
--fps | 24, 30, 60 | 30 | 60fps duplica el tiempo de renderizado |
--quality | draft, standard, high | standard | draft para iterar |
--format | mp4, webm | mp4 | WebM soporta transparencia |
--workers | 1-8 o auto | auto | Cada uno inicia Chrome |
--docker | indicador | desactivado | Salida reproducible |
--gpu | indicador | desactivado | Codificación acelerada por GPU |
--strict | indicador | desactivado | Fallar en errores de lint |
--strict-all | indicador | desactivado | Fallar en errores Y advertencias |
--variables | objeto JSON | — | Sobrescribir valores de variables declarados en data-composition-variables |
--variables-file | ruta | — | Archivo JSON con valores de variables (alternativa a --variables) |
--strict-variables | indicador | desactivado | Fallar renderizado en claves no declaradas o desajustes de tipo en --variables |
Guía de calidad: draft mientras se itera, standard para revisión, high para entrega final.
Renderizados parametrizados: la composición declara sus variables en la raíz <html> con data-composition-variables — un array JSON de declaraciones ({id, type, label, default} por entrada) que define el esquema. Los scripts dentro leen los valores resueltos a través de window.__hyperframes.getVariables(). El CLI --variables '{"title":"Q4 Report"}' es un objeto JSON con clave por id que sobrescribe esos valores por defecto declarados para un renderizado; las claves faltantes se interpolan, por lo que la misma composición se ejecuta sin cambios en la previsualización de desarrollo y en producción. (Los hosts de sub-composiciones también pueden sobrescribir por instancia con data-variable-values — la misma forma de objeto, limitada a un montaje de la sub-composición. Consulta el skill hyperframes para el patrón completo).
Preprocesamiento de Activos
npx hyperframes tts, transcribe y remove-background producen activos (audio de narración, transcripciones palabra por palabra, video transparente) que se colocan en una composición. Cada uno descarga su propio modelo en la primera ejecución. Para la selección de voz, reglas del modelo whisper (la trampa de que .en traduce no-inglés), elección del formato de salida (WebM alfa VP9 vs ProRes) y la cadena TTS → transcribir → subtítulos, invoca el skill hyperframes-media.
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 del renderizado