Punto de entrada de HyperFrames
HyperFrames renderiza video a partir de HTML: una composición es un archivo HTML cuyo DOM declara la temporización con atributos data-*, cuyo runtime de animación es buscable y cuya reproducción multimedia es gestionada por el framework. El contrato completo de autoría se encuentra en /hyperframes-core; léelo antes de escribir el HTML de la composición.
1. Comenzar desde el estado del proyecto
Aplica la primera fila que coincida; no evalúes filas de estado inferiores:
| Estado | Acción |
|---|---|
| Puerto 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 el enrutamiento de intención y flujo de trabajo; carga /hyperframes-cli y cualquier skill de dominio necesario. |
| Edición específica en 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 breves. |
Sin brief, pero hyperframes.json o STORYBOARD.md existen | 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 forma única, haz una sola pregunta de enrutamiento; no realices la entrevista de intención. |
| Creación fresca | Ejecuta la capa de intención — references/intent-interview.md — luego enruta una vez usando la tabla de la § 2. |
Si una solicitud fresca no identifica el tema o la entrada, pregunta de qué trata el video antes de enrutar. Consulta 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 actualizada la CLI del proyecto
Un proyecto scaffolded 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 una CLI antigua no imprime ninguna advertencia al respecto. Al reanudar un proyecto cuyos scripts llevan una fijación, prueba una vez antes del primer comando que afecte al render:
npx hyperframes@latest upgrade --project . --check
La prueba es de solo lectura e informa la fijación contra la última versión; mantén el . explícito — en versiones antiguas de CLI, un --project desnudo seguido de otra bandera consume esa bandera como su valor de directorio. Cuando informe que el proyecto está atrasado — o cualquier salida de 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 cuadro a cuadro a la fijación antigua — por lo que un aumento 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 aumentada sin verificar.
2. Enrutar creación fresca
Usa la primera fila que coincida. Empareja el entregable solicitado, no una palabra o tipo de archivo mencionado de paso.
| Prioridad | Solicitud | Flujo de trabajo |
|---|---|---|
| 1 | Puerto explícito de una fuente Remotion existente | /remotion-to-hyperframes |
| 2 | Crear una presentación, pitch deck o deck interactivo navegable | /slideshow |
| 3 | Añadir subtítulos o leyendas simples a metraje existente de una persona hablando sin cambiarlo | /embedded-captions |
| 4 | Añadir superposiciones gráficas diseñadas a metraje existente de entrevista o podcast sin cambiar el metraje | /talking-head-recut |
| 5 | Construir un video sincronizado al ritmo a partir de una pista musical, sin narración ni captura de sitio web | /music-to-video |
| 6 | Crear una unidad explícitamente corta, sin narración, centrada en el movimiento, generalmente 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 un 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 los skills del flujo de trabajo instalados de forma perezosa estén presentes) más la entrada de entrevista de esa ruta. Si el candidato no satisface 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, impacto de estadística, impacto de gráfico, impacto 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 a partir de 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, reordenar, recolorizar, 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 bocetado 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 unos 3 minutos y son más sólidos alrededor de 30–90s. Enruta una pieza claramente más larga a
/general-video. La longitud nunca anula un puerto explícito, deck, subtítulo, superposición o entregable impulsado por música.
3. Enrutar una vez, luego dejar
Para la creación fresca, la capa de intención (references/intent-interview.md) ejecuta la conversación completa — memoria, triaje, ronda de propuesta, imprescindibles, forma de la ejecución, traspaso — y termina escribiendo BRIEF.md. El brief es el único artefacto de enrutamiento que el flujo de trabajo lee; nada más tarde reabre este skill o la entrevista. Responde a cada 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 los skills de dominio central:
npx hyperframes skills update <nombre-del-flujo-de-trabajo>
Usa el nombre simple sin /. Si el comando falla, muestra el error; no reconstruyas el flujo de trabajo de memoria. Todo lo demás sobre la instalación — la división entre skills centrales y diferidos, qué init actualiza, diagnóstico, exclusión de CI y el fallback sin CLI — se encuentra en references/skill-lifecycle.md.
5. Cargar skills de dominio bajo demanda
| Necesidad | Skill |
|---|---|
| Estructura de composición, atributos de temporización, pistas, variables, determinismo | /hyperframes-core |
| Reglas de movimiento, planos de escena, transiciones, adaptadores de runtime | /hyperframes-animation |
GSAP seguro en búsqueda, CSS, Anime.js, WAAPI, FLIP, rutas, máscaras, SVG, keyframes 3D o diagnósticos 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 |
| Corte de voz en off, cadenas de efectos de audio o envolventes de automatización en una pista | /hyperframes-audio |
| Init, lint, check, instantáneas, comparar, render por lotes, Studio, renderizar, publicar o diagnósticos | /hyperframes-cli |
| Bloques y componentes del registro | /hyperframes-registry |
| Activos, tokens, componentes o fotogramas de storyboard de Figma como movimiento reconstruido | /figma |
Las frases de edición de creador son solicitudes entre dominios. Carga cada skill nombrado en la fila coincidente:
| Solicitud del creador | Dominios requeridos |
|---|---|
| "cortar este metraje", corte directo, recortar, empalmar, reordenar o usar un rango de origen | /general-video + /hyperframes-core; core es dueño de data-start, data-duration, data-media-start y el diseño de pistas. |
| acercar aquí, zoom in / zoom out, zoom multiestado suave o reencuadre, Ken Burns o movimiento de cámara | /general-video + /hyperframes-core + /hyperframes-keyframes; anima el envoltorio visual/interior de recorte, no el clip temporizado. |
| corte de coincidencia o transición de cámara con paneo rápido | /general-video + /hyperframes-animation + /hyperframes-keyframes + /hyperframes-registry; busca/instala un primitivo de transición antes de autorizar manualmente. |
| fundido, encadenado, ganancia/pista/volumen, automatización, duck/carve o efectos de audio | /general-video + /hyperframes-core + /hyperframes-audio; core coloca clips, audio mezcla pistas colocadas. |
| 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, duckea, 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. |
data-playback-rate constante es seguro para el render tanto para imagen como para sonido con tono preservado. No hace que las rampas de velocidad de origen sean keyframeables; preprocesa las rampas. Para contratos de edición copiables, carga /hyperframes-core → references/creator-editing-recipes.md.
Los comentarios amplios sobre cómo se ve o se comporta el material fotográfico también se enrutan a /media-use, incluso cuando el usuario nunca dice "corrección de color" o "efecto".