Punto de entrada de HyperFrames
HyperFrames renderiza video desde 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 propiedad del framework. El contrato de autoría completo está 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 coincidente; 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 la intención y el enrutamiento del flujo de trabajo; carga /hyperframes-cli y cualquier habilidad de dominio necesaria. |
| Edición específica de 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. |
No hay brief, pero existe hyperframes.json o STORYBOARD.md | 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 ejecutes la entrevista de intención. |
| Creación nueva | Ejecuta la capa de intención — references/intent-interview.md — luego enruta una vez usando la tabla de la § 2. |
Si una solicitud nueva no identifica el tema o la entrada, pregunta de qué trata el video antes de enrutar. Revisa las preferencias y recetas antes de preguntar cualquier cosa (references/intent-interview.md, paso 1). Una entrada figma.com o una receta con nombre 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 scaffolded fija hyperframes@<version> en sus scripts de package.json para que los renders sigan siendo 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, verifica una vez antes del primer comando que afecte al render:
npx hyperframes@latest upgrade --project . --check
La verificación es de solo lectura e informa la fijación contra la última versión; mantén el . 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 si cualquier salida del CLI ya lo muestra (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 anterior — 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 sin composición aú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 nueva
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 | 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 subtítulos simples a metraje existente de persona hablando sin cambiarlo | /embedded-captions |
| 4 | Añadir superposiciones gráficas diseñadas a metraje existente de persona hablando, entrevista o podcast sin cambiar el metraje | /talking-head-recut |
| 5 | Construir un video sincronizado con el 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 y centrada en el movimiento, típicamente de menos de 10s | /motion-graphics |
| 7 | Explicar un pull request de GitHub o cambio de código a partir de una referencia de PR | /pr-to-video |
| 8 | Comercializar o mostrar un sitio web, página 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/activación (disponible antes de que las habilidades del flujo de trabajo instalado perezosamente estén presentes) más la entrada de la 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 "hacer un video 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 el tiempo, reordenar, recolorizar, reencuadrar o remezclar metraje es una edición personalizada y cae en/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 en torno a 30–90 s. Enruta una pieza claramente más larga a
/general-video. La duración nunca anula un puerto explícito, deck, subtítulo, superposición o entregable impulsado por música.
3. Enrutar una vez, luego salir
Para la creación nueva, la capa de intención (references/intent-interview.md) ejecuta la conversación completa — memoria, triaje, ronda de pitch, imprescindibles, forma de la ejecución, transferencia — y termina escribiendo BRIEF.md. El brief es el único artefacto de enrutamiento que lee el flujo de trabajo; nada más tarde reabre esta habilidad o la entrevista. Responde cada pregunta posterior de "¿qué requirió la ruta?" desde BRIEF.md.
4. Instalar y entrar al flujo de trabajo
Antes de leer el flujo de trabajo seleccionado, instálalo o actualízalo junto con las habilidades de dominio central:
npx hyperframes skills update <workflow-name>
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 núcleo vs. perezoso, lo que init actualiza, el diagnóstico, la exclusión de CI y el respaldo sin CLI — está en references/skill-lifecycle.md.
5. Cargar habilidades de dominio bajo demanda
| Necesidad | Habilidad |
|---|---|
| Estructura de composición, atributos de temporización, pistas, variables, determinismo | /hyperframes-core |
| Reglas de movimiento, planos de escena, transiciones, adaptadores de tiempo de ejecución | /hyperframes-animation |
GSAP seguro de búsqueda, CSS, Anime.js, WAAPI, FLIP, rutas, máscaras, SVG, fotogramas clave 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 |
| Inicialización, lint, verificación, instantáneas, comparación, renderizado por lotes, Studio, renderizado, publicación 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 |
La retroalimentación amplia sobre cómo se ve o se comporta el material fotográfico también se enruta a
/media-use, incluso cuando el usuario nunca dice "gradación de color" o "efecto": arreglar material oscuro/plano/aburrido, estilizar un clip, ocultar un rostro o mejorar una revelación de medios. Lee ../media-use/references/media-treatments.md antes de editar un tratamiento; gobierna cómo se trata el material, nunca si se puede usar el medio. No sustituyas un LUT genérico, filtro/superposición CSS o interpolación de opacidad por un primitivo de tratamiento canónico existente. Mantén las ediciones solo de texto/diseño/movimiento en su dominio propietario.
Durante una compilación con material fotográfico importante, incluye un escaneo de refinamiento de medios fundamentado en el pase de calidad final; dejar el material adecuado sin cambios es un resultado válido.
Las habilidades de dominio nunca toman posesión del entregable de extremo a extremo. Carga solo lo que necesita el flujo de trabajo activo.