HyperFrames — empezar aquí

¿Qué hace HyperFrames — empezar aquí?

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 de medios es propiedad del marco. El contrato completo de autoría está en /hyperframes-core; léelo antes de escribir HTML de composición.

A continuación: un mapa de capacidades (las habilidades de dominio, cargadas bajo demanda) y el enrutador de intenciones (selecciona un flujo de trabajo para cualquier solicitud "hazme un…" — generalmente un video, pero también un mazo navegable o un puerto de composición). La división es de propiedad, no de tipo de salida: un flujo de trabajo posee un entregable de principio a fin (su propio directorio de proyecto, pasos con puertas, subagentes, artefacto final); una habilidad de dominio es una capa de capacidad que un flujo de trabajo incorpora a mitad de camino y nunca posee la tarea.

Mapa de capacidades — las habilidades de dominio

Capacidades atómicas que cargas bajo demanda — no son flujos de trabajo completos; nunca poseen la tarea de principio a fin. Para intenciones "hazme un…", usa el enrutador de intenciones a continuación.

Quieres…	Habilidad
Crear / editar una composición HTML — el contrato data-*, clips, pistas, subcomposiciones, variables	/hyperframes-core
Animar — movimiento atómico, planos de escena, transiciones, adaptadores de tiempo de ejecución (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU)	/hyperframes-animation
Crear fotogramas clave buscables — líneas de tiempo GSAP, fotogramas clave CSS, Anime.js, WAAPI, FLIP, trazados, máscaras, morph/dibujo SVG, profundidad 3D, más diagnóstico hyperframes keyframes	/hyperframes-keyframes
Dirección creativa — frame.md / design.md, paletas, tipografía, narración, planificación de ritmos, audio-reactivo	/hyperframes-creative
Medios — resolver/generar BGM, SFX, imagen, icono, logo de marca, voz, gradación de color, LUT; locución TTS, transcripción, eliminación de fondo, subtítulos; reutilización entre proyectos	/media-use
Bucle de desarrollo CLI — init, lint, validate, inspect, preview, render, publish, doctor	/hyperframes-cli
Instalar bloques / componentes del registro (hyperframes add)	/hyperframes-registry
Importar contenido de Figma — assets, tokens, componentes, storyboards→movimiento reconstruido (REST/CLI); Motion (MCP), shaders (fuente MCP / exportación nativa)	/figma

---

Enrutamiento de intenciones — selecciona un flujo de trabajo

Esta sección solo conoce los flujos de trabajo de nivel superior; no carga sus referencias internas ni las habilidades de dominio anteriores.

Antes de enrutar — confirma la entrada, no la especificación

El enrutamiento necesita saber de qué trata el video — su entrada y tema. Si eso no está especificado ("haz un video sobre nuestra cosa" sin URL, producto, tema o activo), pregunta antes de entrar en cualquier flujo de trabajo — comprometerse con un flujo de trabajo ES la decisión de enrutamiento. Como máximo dos preguntas:

• Entrada — ¿un producto (URL / brief), un sitio web general, un PR de GitHub, un tema a explicar o un video de cabeza parlante existente?
• Fuente de Figma — si la entrada es una URL de figma.com, /figma extrae primero assets/tokens/(componentes/storyboard), independientemente del flujo de trabajo que se elija a continuación para la forma del video; ese flujo de trabajo luego construye a partir de la salida de /figma — nunca manejando Figma directamente a través de herramientas MCP en bruto (omite la sanitización de SVG, la procedencia y el enlace de tokens de marca).

Modo — si la solicitud lleva una señal autónoma continua ("sorpréndeme", "decide por mí", "solo constrúyelo"), anótala y pásala al flujo de trabajo: toda la ejecución se vuelve autónoma y ningún paso posterior vuelve a preguntar. Sin señal, el flujo de trabajo pregunta el modo como su primera pregunta breve. El valor predeterminado es colaborativo. (/motion-graphics es autónomo por diseño.) Semántica: hyperframes-core → references/brief-contract.md.

Valores predeterminados de especificación — indica, no preguntes (nunca cambian la ruta): la relación de aspecto se deriva del destino — feed social (X / LinkedIn / Instagram) → cuadrado 1:1, TikTok / Reels / Shorts → 9:16, YouTube / embed / desconocido → 16:9; idioma de narración / subtítulo = el del usuario. El flujo de trabajo elegido reconfirma sus propios detalles en su primer paso (semántica de campo: hyperframes-core → references/brief-contract.md).

Hoja de trucos de flujos de trabajo

Flujo de trabajo	Úsalo para
/product-launch-video	Vender un producto (SaaS, app, empresa / sitio de producto) — desde una URL, brief o guión → un promocional. El valor predeterminado para cualquier URL comercial, incluso si solo se nombra el sitio.
/website-to-video	Mostrar un sitio en sí mismo — un recorrido / showcase construido a partir de las propias capturas de pantalla del sitio. Para sitios no comerciales (portafolio, blog, docs, personal, evento), o cuando el usuario quiere un recorrido, no un promocional.
/faceless-explainer	Explicar un tema / concepto a partir de texto — sin producto, sin URL; cada visual es inventado por el LLM
/pr-to-video	Un PR de GitHub / cambio de código → changelog / revelación de función / corrección / explicador de refactor
/embedded-captions	Agregar subtítulos a un video de cabeza parlante existente (metraje intacto)
/talking-head-recut	Empaquetar un video de cabeza parlante existente con superposiciones gráficas diseñadas — tercios inferiores, llamadas de datos, títulos cinéticos, citas destacadas
/motion-graphics	Una pieza corta (~menos de 10s), sin narración donde el movimiento es el mensaje — tipo cinético, un impacto de estadística / gráfico, un sting de logo, un mapa animado, un tweet / titular animado, un tercio inferior / superposición independiente (MP4 o alfa transparente)
/music-to-video	Una pista de música → un video sincronizado con el ritmo — video lírico, presentación de diapositivas o promocional cinético; la música impulsa el ritmo (imágenes / videos opcionales del usuario cortados en la cuadrícula de ritmo)
/slideshow	Una presentación / mazo de presentación / mazo interactivo — diapositivas discretas, fragmentos, ramificaciones, hotspots; la salida es un mazo navegable, no un video renderizado
/general-video	Cualquier otra cosa — piezas más largas o de múltiples escenas, un bucle estático / póster, una composición personalizada
/remotion-to-hyperframes	Migrar una composición existente de Remotion (React) a HyperFrames (migración, no creación)

Desambiguación (solo donde sea confuso):

• Prioridad de movimiento y sin narración (menos de ~10s, el movimiento es el mensaje) → /motion-graphics, independientemente de la entrada.
• Una URL o guión — pregunta una cosa: ¿el sitio vende un producto? Sí (SaaS / app / producto / sitio de empresa) → /product-launch-video — un promocional, y el valor predeterminado para cualquier URL comercial incluso si solo se nombra el sitio. No, o el usuario solo quiere que el sitio se muestre tal cual (portafolio / blog / docs / personal / evento) → /website-to-video — un recorrido. Un enlace de PR de GitHub → /pr-to-video; un concepto sin producto ni sitio → /faceless-explainer.
• Metraje existente — subtítulos simples de palabra hablada → /embedded-captions; tarjetas de superposición diseñadas → /talking-head-recut. Ninguno edita el metraje en sí (re-temporización / recolor / reencuadre / reordenamiento / audio es edición NLE — fuera del alcance).
• Una pista de música es la entrada (un archivo de audio, o un video del que extraer audio) con sin narración → /music-to-video — los ritmos / energía de la música impulsan el ritmo. (Las piezas narradas permanecen con el flujo de trabajo coincidente de entrada anterior; /motion-graphics es para movimiento corto sin narración que no esté impulsado por música.)
• Una presentación / mazo de presentación / mazo interactivo (diapositivas discretas, navegación, modo presentador) → /slideshow — la salida es un mazo navegable, no un video renderizado. Una solicitud explícita de "presentación de diapositivas" procede directamente; un desencadenante adyacente ("mazo / diapositivas / presentación / convertir esta página") hace que /slideshow confirme que es una presentación de diapositivas antes de crear, y cambie al flujo de trabajo no de presentación apropiado si no lo es.
• La duración es una guía, no una barrera — la intención elige el flujo de trabajo; ve a /general-video solo cuando la pieza es claramente más larga de ~3 min, o es un formato estático / bucle / personalizado.

Después de elegir — garantiza que el flujo de trabajo esté instalado

Una vez que hayas elegido un flujo de trabajo, ejecuta el paso de actualización antes de leer su habilidad — las habilidades de flujo de trabajo se instalan bajo demanda, por lo que la que coincidiste puede no estar en esta máquina aún (sus frases desencadenantes viven en este enrutador precisamente para que puedas enrutar a habilidades que no están instaladas):

npx hyperframes skills update <nombre-del-flujo-de-trabajo>

Nombre simple, sin / inicial — p.ej. npx hyperframes skills update pr-to-video. Nombrar una habilidad garantiza que ella más las habilidades de dominio central de las que depende cada flujo de trabajo estén instaladas y actualizadas: un no-op rápido cuando todo ya lo está, una instalación dirigida solo de las habilidades faltantes/desactualizadas cuando no — nunca el conjunto completo. Luego lee la habilidad del flujo de trabajo y continúa. El mismo comando funciona para una habilidad de dominio bajo demanda del mapa de capacidades (p.ej. npx hyperframes skills update figma).

Si el comando falla, muestra su error al usuario en lugar de improvisar el flujo de trabajo desde la memoria. Alternativa manual (sin CLI de HyperFrames disponible): npx skills add heygen-com/hyperframes --skill <nombre-del-flujo-de-trabajo>; todo a la vez: npx skills add heygen-com/hyperframes --all.

Mantener las habilidades actualizadas

Las habilidades de HyperFrames tienen versiones y se instalan perezosamente: el conjunto central ávidamente, los flujos de trabajo en el primer uso.

• Conjunto central — este enrutador, las habilidades de dominio hyperframes-* y media-use. npx hyperframes init (que cada flujo de trabajo de creación ejecuta al crear el andamiaje) verifica GitHub y actualiza el conjunto central más cualquier otra cosa ya instalada. Nunca expande la instalación — las habilidades de flujo de trabajo que no has usado no se descargan. Volver a ejecutar init en una máquina actualizada es un no-op; sin conexión (o con límite de tasa) se degrada con gracia y nunca falla duro. La bandera --skip-skills está actualmente neutralizada (una medida temporal mientras el registro skills.sh se pone al día); los CI/pruebas optan por no participar mediante la variable de entorno HYPERFRAMES_SKIP_SKILLS=1.
• Habilidades de flujo de trabajo — instaladas y actualizadas en el momento del disparo por el paso de actualización anterior (skills update <nombre-del-flujo-de-trabajo>).

Si una tarea se comporta inesperadamente, o antes de una compilación larga, confirma que las habilidades instaladas estén actualizadas:

• Verificar: npx hyperframes skills check (agrega --json para un veredicto legible por máquina; sale con código no cero cuando algo instalado está desactualizado o el conjunto central está incompleto — las habilidades de flujo de trabajo aún no instaladas se informan como disponibles bajo demanda, no como un fallo).
• Actualizar: npx hyperframes skills update — actualiza el conjunto central más todo lo instalado a la última versión y elimina las habilidades que ya no se publican. Sin nombres nunca instala flujos de trabajo que no hayas usado; nombrar habilidades (skills update <nombre…>) además las instala.
• Conjunto completo, explícitamente: npx hyperframes skills (o npx skills add heygen-com/hyperframes --all).

La CLI también muestra un recordatorio de una línea cuando una ejecución de render / lint / validate detecta habilidades desactualizadas.

Detalles de los flujos de trabajo

/product-launch-video

• Entrada: Un producto que se comercializa — (a) una URL del producto (explorada con Chrome sin cabeza para activos + tokens de marca), (b) un guión / brief que nombra el sitio del producto incluso sin un enlace (PLV lo resuelve + lo explora, a menos que el usuario opte por no participar), o (c) un guión sin sitio derivable / "no raspar" (modo sin captura — elige un preset de estilo que proporcione paleta + sistema de diseño). Un guión proporcionado puede ser la locución textual o reestructurado por escena — PLV pregunta.
• Salida: un promocional de lanzamiento de producto / SaaS como composición de HyperFrames → MP4 (punto óptimo 30–90s) — el valor del producto es el tema, no un recorrido del sitio. Para un recorrido simple del sitio, usa /website-to-video.
• Disparadores: "video de lanzamiento para X", "promocional para nuestro sitio", "explica mi SaaS en un minuto", "convierte mi guión en un promocional de 60s", "texto...

... [truncado para traducción]