Punto de entrada de HyperFrames
HyperFrames renderiza video desde HTML — una composición es un archivo HTML cuyo DOM declara la sincronización con atributos data-*, cuyo runtime de animación es seekable y cuya reproducción de medios es gestionada por el framework. El contrato completo de autoría está en /hyperframes-core; léelo antes de escribir HTML de composición.
1. Comenzar desde el estado del proyecto
Aplica la primera fila coincidente; no evalúes filas de estado inferiores:
| Estado | Acción |
|---|---|
| Port explícito de una fuente Remotion existente a HyperFrames | Lee references/routes/remotion-to-hyperframes.md, luego enruta directamente a ese flujo de trabajo. Omite la capa de intención. |
| Operación específica en un proyecto HyperFrames existente: inspeccionar, diagnosticar, validar, previsualizar, renderizar, publicar o renderizar por lotes | Realiza solo esa operación. Omite la capa de intención y el enrutamiento del flujo de trabajo; carga /hyperframes-cli y cualquier habilidad de dominio necesaria. |
| Edición específica a un proyecto existente | Realiza la edición. No ejecutes la capa de intención. |
BRIEF.md existe | Lee workflow y flow. Ejecuta ese flujo de trabajo; flow: companion siempre se ejecuta en /general-video. No hagas preguntas sobre el brief. |
Sin brief, pero hyperframes.json o STORYBOARD.md existe | Reanuda desde los archivos del proyecto y las preferencias registradas. Infiere el flujo de trabajo propietario a partir de los artefactos existentes. Si no se puede determinar de manera única, haz una pregunta solo de enrutamiento; no ejecutes la entrevista de intención. |
| Creación desde cero | Ejecuta la capa de intención — references/intent-interview.md — luego enruta una vez usando la tabla de § 2. |
Si una solicitud nueva no identifica el tema o la entrada, pregunta de qué trata el video antes de enrutar. Consulta las preferencias y recetas antes de preguntar cualquier cosa (references/intent-interview.md, paso 1). Una entrada figma.com o una receta nombrada cambia la ingesta, no el enrutamiento; la sección "Adaptar entradas ortogonales" de la entrevista maneja ambas.
Mantén actualizado el CLI del proyecto
Un proyecto generado fija hyperframes@<version> en sus scripts de package.json para que los renders sean reproducibles; la fijación nunca avanza por sí sola, y una ejecución fijada de un CLI antiguo no imprime ninguna advertencia al respecto. Al reanudar un proyecto cuyos scripts llevan una fijación, sondea una vez antes del primer comando que afecte al render:
npx hyperframes@latest upgrade --project . --check
La sonda es de solo lectura e informa la fijación contra la última versión; mantén el punto . explícito — en versiones anteriores del CLI, un --project desnudo seguido de otra bandera consume esa bandera como su valor de directorio. Cuando informe que el proyecto está desactualizado — o cualquier salida del CLI ya lo muestre (el aviso de stderr This project pins hyperframes@… (latest …), o _meta.updateAvailable: true en un resultado --json de un script fijado) — aplica con npx hyperframes@latest upgrade --project ., luego verifica con npx hyperframes check. Una verificación exitosa confirma que las composiciones del proyecto aún se validan en la nueva versión — no que la salida renderizada sea idéntica en fotogramas a la fijación anterior — por lo que un incremento exitoso nunca es silencioso: nombra la versión antigua y la nueva en el resumen de la ejecución. Un proyecto que aún no tiene composición no necesita verificación. Si la verificación falla, revierte el cambio en package.json, continúa con la versión fijada e informa en qué versión se queda el proyecto y por qué. Actúa sobre la señal en lugar de transmitirla al usuario; nunca dejes una fijación incrementada sin verificar.
2. Enrutar creación desde cero
Usa la primera fila coincidente. Coincide con el entregable solicitado, no con una palabra o tipo de archivo mencionado de paso.
| Prioridad | Solicitud | Flujo de trabajo |
|---|---|---|
| 1 | Port explícito de una fuente Remotion existente | /remotion-to-hyperframes |
| 2 | Crear una presentación, pitch deck o deck interactivo navegable | /slideshow |
| 3 | Agregar subtítulos o leyendas simples a metraje existente de "talking head" sin cambiarlo | /embedded-captions |
| 4 | Agregar superposiciones gráficas diseñadas a metraje existente de "talking head", entrevista o podcast sin cambiar el metraje | /talking-head-recut |
| 5 | Construir un video sincronizado al ritmo a partir de una pista de música, sin narración ni captura de sitio web | /music-to-video |
| 6 | Crear una unidad explícitamente corta, sin narración y centrada en el movimiento, típicamente de menos de 10s | /motion-graphics |
| 7 | Explicar un pull request de GitHub o un cambio de código a partir de una referencia de PR | /pr-to-video |
| 8 | Comercializar o mostrar un sitio web, sitio de producto, aplicación o empresa a partir de una URL o brief específico del sitio | /product-launch-video |
| 9 | Explicar un tema, artículo o notas con imágenes inventadas y sin captura de producto o sitio | /faceless-explainer |
| 10 | Cualquier otro video o composición personalizada | /general-video |
Antes de finalizar la ruta, lee references/routes/<workflow>.md — un archivo pequeño por ruta: el contrato canónico de entrada/salida/disparador (disponible antes de que se instalen las habilidades de flujo de trabajo perezosas) más la entrada de entrevista de esa ruta. Si el candidato no cumple con su contrato, continúa enrutando en lugar de forzar la coincidencia. Lee solo el archivo de la ruta coincidente.
Resolver ambigüedades comunes
- Un título animado corto, sting de logotipo, golpe de estadística, golpe de gráfico, golpe de mapa o tercio inferior independiente es
/motion-graphicscuando no tiene narración y el movimiento es el mensaje. Una tarjeta de título estática, secuencia narrada, montaje más largo o bucle personalizado es/general-video. - Un gráfico en movimiento explícitamente corto puede usar una URL, tweet, artículo o captura de pantalla como material de origen. Una solicitud genérica de "hacer un video desde este sitio" es
/product-launch-video. - El metraje existente con subtítulos se enruta a
/embedded-captions; el metraje con tarjetas de información diseñadas se enruta a/talking-head-recut. Reajustar el tiempo, reordenar, recolorear, reencuadrar o remezclar metraje es una edición personalizada y pasa a/general-video. - Un archivo de música selecciona
/music-to-videosolo cuando su cuadrícula de ritmo impulsa la pieza. La música utilizada como fondo no anula la ruta coincidente con el tema. - "Quiero un storyboard" cambia el proceso de revisión, no el flujo de trabajo. Sin otra señal de enrutamiento, usa
/general-video. Un storyboard bosquejado confirmado puede ser en sí mismo el entregable solicitado; el bucle de revisión define ese punto de parada. - Los flujos de trabajo narrativos especializados admiten hasta aproximadamente 3 minutos y son más sólidos entre 30 y 90 s. Enruta una pieza claramente más larga a
/general-video. La longitud nunca anula un port explícito, deck, subtítulo, superposición o entregable impulsado por música.
3. Enrutar una vez, luego salir
Para la creación desde cero, la capa de intención (references/intent-interview.md) ejecuta la conversación completa — memoria, triaje, ronda de pitch, imprescindibles, forma de ejecución, traspaso — y termina escribiendo BRIEF.md. El brief es el único artefacto de enrutamiento que lee el flujo de trabajo; nada más tarde vuelve a abrir esta habilidad o la entrevista. Responde cualquier pregunta posterior de "¿qué requirió la ruta?" desde BRIEF.md.
4. Instalar y entrar en el flujo de trabajo
Antes de leer el flujo de trabajo seleccionado, instálalo o actualízalo junto con las habilidades de dominio principales:
npx hyperframes skills update <workflow-name>
Usa el nombre simple sin /. Si el comando falla, muestra el error; no reconstruyas el flujo de trabajo desde la memoria. Todo lo demás sobre la instalación — la división entre habilidades principales y perezosas, lo que init actualiza, el diagnóstico, la exclusión de CI y el plan de respaldo sin CLI — está en references/skill-lifecycle.md.
5. Cargar habilidades de dominio bajo demanda
| Necesidad | Habilidad |
|---|---|
| Estructura de composición, atributos de sincronización, pistas, variables, determinismo | /hyperframes-core |
| Reglas de movimiento, planos de escena, transiciones, adaptadores de runtime | /hyperframes-animation |
GSAP seguro para seek, CSS, Anime.js, WAAPI, FLIP, trazados, máscaras, SVG, fotogramas clave 3D o diagnósticos de hyperframes keyframes | /hyperframes-keyframes |
| Especificaciones de diseño, concepto, paleta, tipografía, narración, planificación de ritmo | /hyperframes-creative |
| Imágenes, iconos, logotipos, audio, subtítulos, grados, LUTs, medios reutilizables | /media-use |
| Tallado de voz en off, cadenas de efectos de audio, envolventes de automatización, o una cadena/atenuador en varias pistas (bus de submezcla) | /hyperframes-audio |
| Init, lint, check, instantáneas, comparar, render por lotes, Studio, render, publicar o diagnósticos | /hyperframes-cli |
| Bloques y componentes de registro | /hyperframes-registry |
| Activos de Figma, tokens, componentes o fotogramas de storyboard como movimiento reconstruido | /figma |
Las frases de edición del creador son solicitudes entre dominios. Carga cada habilidad nombrada en la fila coincidente:
| Solicitud del creador | Dominios requeridos |
|---|---|
| "cortar este metraje", corte duro, recortar, empalmar, reordenar o usar un rango de origen | /general-video + /hyperframes-core; core posee data-start, data-duration, data-media-start y el diseño de pistas. |
| acercar aquí, punch-in / punch-out, zoom suave multiestado o reencuadre, Ken Burns o movimiento de cámara | /general-video + /hyperframes-core + /hyperframes-keyframes; anima el contenedor interno visual/recorte, no el clip temporizado. |
| corte coincidente o transición de cámara con paneo whip | /general-video + /hyperframes-animation + /hyperframes-keyframes + /hyperframes-registry; busca/instala una primitiva de transición antes de la autoría manual. |
| fundido, crossfade, ganancia/volumen de pista, automatización, duck/carve, efectos de audio o un efecto en varias pistas | /general-video + /hyperframes-core + /hyperframes-audio; core coloca clips, audio mezcla pistas colocadas — incluyendo un bus de submezcla sobre un grupo de ellas. |
| ediciones de imagen y sonido que combinan cortes con movimiento de cámara o mezcla | /general-video + /hyperframes-core + /hyperframes-keyframes cuando hay movimiento visual + /hyperframes-audio cuando el sonido se desvanece, mezcla, duck, automatiza o procesa. |
| obtener o generar medios, o preprocesar una rampa de velocidad no compatible/congelación en medio del origen | /media-use; solo obtención/generación/preprocesamiento, nunca mezcla de pistas colocadas. |
La constante data-playback-rate es segura para render en imagen y sonido con tono preservado. No hace que las rampas de velocidad de origen sean animables mediante fotogramas clave; preprocesa las rampas.
Para contratos de edición copiables, carga /hyperframes-core → references/creator-editing-recipes.md.
Comentarios amplios sobre cómo el metraje fotográfico...