Punto de entrada de HyperFrames
HyperFrames renderiza video desde HTML: una composición es un archivo HTML cuyo DOM declara el tiempo 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 está en /hyperframes-core; léelo antes de escribir el HTML de la composición.
1. Iniciar 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 código fuente Remotion existente a HyperFrames | Lee references/routes/remotion-to-hyperframes.md, luego enruta directamente a ese workflow. 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 workflow; carga /hyperframes-cli y cualquier skill de dominio necesario. |
| 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 workflow; flow: companion siempre se ejecuta en /general-video. No hagas preguntas sobre el brief. |
No hay brief, pero hyperframes.json o STORYBOARD.md existen | Reanuda desde los archivos del proyecto y las preferencias registradas. Infiere el workflow 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 desde cero | 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. Consulta 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@<versión> en los scripts de su package.json para que los renders sigan siendo reproducibles; el pin nunca avanza por sí solo, y una ejecución fijada de un CLI antiguo no imprime ninguna advertencia al respecto. Al reanudar un proyecto cuyos scripts llevan un pin, 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 el pin con respecto a la última versión; mantén el . explícito — en versiones antiguas 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 fijo) — aplica con npx hyperframes@latest upgrade --project ., luego verifica con npx hyperframes check. Una verificación exitosa confirma que las composiciones del proyecto siguen siendo válidas en la nueva versión (no que la salida renderizada sea idéntica fotograma a fotograma al pin 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 un pin aumentado sin verificar.
2. Enrutar para creación desde cero
Usa la primera fila que coincida. Coincide con el deliverable solicitado, no con una palabra o tipo de archivo mencionado de paso.
| Prioridad | Solicitud | Workflow |
|---|---|---|
| 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 simples o subtítulos a metraje existente de una 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 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 una pull request de GitHub o un cambio de código a partir de una referencia de PR | /pr-to-video |
| 8 | Promocionar 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 estén presentes las habilidades de workflow instaladas de forma diferida) más la entrada de entrevista de esa ruta. Si el candidato no cumple su contrato, continúa enrutando en lugar de forzar la coincidencia. Lee solo el archivo de la ruta coincidente.
Resolver ambigüedades comunes
- Una tarjeta de título animada corta, un sting de logo, un impacto de estadística, un impacto de gráfico, un impacto de mapa o un tercio inferior independiente es
/motion-graphicscuando no está narrado y el movimiento es el mensaje. Una tarjeta de título estática, una secuencia narrada, un montaje más largo o un 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 "haz un video a partir de este sitio" es
/product-launch-video. - Metraje existente con subtítulos se enruta a
/embedded-captions; metraje con tarjetas de información diseñadas se enruta a/talking-head-recut. Reajustar el ritmo, reordenar, recolorear, 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 workflow. Sin otra señal de enrutamiento, usa
/general-video. Un storyboard esbozado confirmado puede ser en sí mismo el deliverable solicitado; el bucle de revisión define ese punto de parada. - Los workflows narrativos especializados admiten hasta unos 3 minutos y son más efectivos entre 30 y 90 segundos. Enruta una pieza claramente más larga a
/general-video. La duración nunca anula un puerto explícito, un deck, un subtítulo, una superposición o un deliverable impulsado por música.
3. Enrutar una vez, luego salir
Para creación desde cero, la capa de intención (references/intent-interview.md) ejecuta la conversación completa — memoria, triaje, ronda de propuesta, imprescindibles, forma de ejecución, traspaso — y termina escribiendo BRIEF.md. El brief es el único artefacto de enrutamiento que lee el workflow; nada más tarde reabre este skill o la entrevista. Responde cada pregunta posterior de "¿qué requirió la ruta?" a partir de BRIEF.md.
4. Instalar y entrar en el workflow
Antes de leer el workflow seleccionado, instálalo o actualízalo junto con las habilidades de dominio centrales:
npx hyperframes skills update <nombre-del-workflow>
Usa el nombre simple sin /. Si el comando falla, muestra el error; no reconstruyas el workflow de memoria. Todo lo demás sobre la instalación — la división entre core y diferido, lo que init actualiza, el diagnóstico, la exclusión de CI y la alternativa sin CLI — está en references/skill-lifecycle.md.
5. Cargar habilidades de dominio bajo demanda
| Necesidad | Skill |
|---|---|
| Estructura de la composición, atributos de tiempo, pistas, variables, determinismo | /hyperframes-core |
| Reglas de movimiento, planos de escena, transiciones, adaptadores de runtime | /hyperframes-animation |
GSAP, CSS, Anime.js, WAAPI, FLIP, rutas, máscaras, SVG, keyframes 3D o diagnósticos hyperframes keyframes seguros para búsqueda | /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, gradaciones, LUTs, medios reutilizables | /media-use |
| Tallado de voz en off, cadenas de efectos de audio o envolventes de automatización en una pista | /hyperframes-audio |
| 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 de Figma, tokens, componentes o fotogramas de storyboard como movimiento reconstruido | /figma |
Los comentarios amplios sobre cómo se ve o se comporta el material fotográfico también se enrutan a
/media-use, incluso si el usuario nunca dice "etalonaje" o "efecto": arreglar
metraje 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 metraje, nunca si se pueden usar medios.
No sustituyas un LUT genérico, un filtro/superposición CSS o un tween 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
análisis fundamentado de pulido de medios en la pasada de calidad final; dejar los medios adecuados sin cambios es un
resultado válido.
Las habilidades de dominio nunca toman posesión del deliverable de extremo a extremo. Carga solo lo que necesita el workflow activo.