HyperFrames — empezar aquí

¿Qué hace HyperFrames — empezar aquí?

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 buscable, y cuya reproducción multimedia es gestionada por el framework.

Esta habilidad es la guía técnica de uso — es intencionadamente no relacionada con diseño. Para recetas de movimiento / animación, consulta /hyperframes-motion. Para dirección de diseño (paletas, tipografía, preajustes de cuadro), consulta /hyperframes-design. A continuación: un mapa de capacidades de cada tema de HyperFrames, un índice de guías de temas de lo que contiene esta habilidad, y un enrutador de intenciones para elegir un flujo de trabajo.

Mapa de capacidades — las habilidades de HyperFrames

Tres habilidades, una por ámbito. Esta es la guía técnica de uso. Las otras dos cubren diseño.

Quieres…	Habilidad
Cómo usar HyperFrames — contrato de composición, ciclo de desarrollo CLI, registrar bloques / componentes (esta habilidad)	/hyperframes
Movimiento / animación — reglas de movimiento atómicas, planos de escena, transiciones, adaptadores de runtime (GSAP / Lottie / Three.js)	/hyperframes-motion
Diseño — paletas, tipografía, preajustes de cuadro, planificación de ritmo, decisiones de marca / estilo (sin recetas de animación)	/hyperframes-design

---

Guía de temas — qué contiene esta habilidad

La guía técnica de uso se divide en tres sub-temas. Cada uno tiene su propio SKILL.md y references/:

Sub-tema	Ruta	Léelo para
Composición core	core/SKILL.md	El contrato de composición — atributos data-*, clips, pistas, sub-composiciones, variables, reglas de determinismo
Ciclo de desarrollo CLI	cli/SKILL.md	npx hyperframes init / lint / validate / inspect / preview / render + renderizado en la nube con AWS Lambda
Registro add	registry/SKILL.md	hyperframes add <bloque-o-componente> — ubicaciones de instalación, cableado de bloques, cableado de componentes, contribuir con nuevos elementos

El detalle por tema vive en la carpeta references/ de cada sub-tema. Para detalles específicos del runtime de animación (API de GSAP, Lottie, Three.js, etc.) consulta /hyperframes-motion → adapters/<runtime>.md.

---

Enrutamiento de intenciones — elige un flujo de trabajo

Esta sección solo conoce los flujos de trabajo de alto nivel; no carga sus referencias internas ni las guías de temas 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 recurso), 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 existente de una persona hablando?

Valores por defecto de la especificación — indícalos, no preguntes (nunca cambian la ruta): relación de aspecto 16:9 (usa 9:16 solo para un destino vertical nombrado — TikTok / Reels / Shorts); idioma de los subtítulos = el del usuario. El flujo de trabajo elegido reconfirma sus propios detalles en su primer paso.

Hoja de referencia de flujos de trabajo

Flujo de trabajo	Úsalo para
/faceless-explainer	Explicar un tema / concepto a partir de texto — sin producto, sin URL; cada imagen es inventada por el LLM
/pr-to-video	Un PR de GitHub / cambio de código → video explicativo de changelog / feature-reveal / fix / refactor
/embedded-captions	Añadir subtítulos / títulos a un video existente de una persona hablando (metraje intacto)
/talking-head-recut	Empaquetar un video existente de una persona hablando con superposiciones gráficas diseñadas — tercios inferiores, llamadas de datos, títulos cinéticos, citas destacadas
/motion-graphics	Un gráfico en movimiento corto y liderado por diseño — tipografía cinética, una estadística / número / gráfico, un sting de logotipo, una superposición de tercio inferior
/slideshow	Una presentación / pitch deck / deck interactivo — diapositivas discretas, fragmentos, ramificaciones, hotspots; la salida es un deck navegable, no un video renderizado
/general-video	Cualquier otra cosa — piezas largas o de varias escenas, un bucle estático / póster, una composición personalizada

Desambiguación (solo donde sea confuso):

• Animación primero (menos de ~10 s, la animación es el mensaje) → /motion-graphics, independientemente de la entrada.
• Una URL o un guion — un enlace de PR de GitHub → /pr-to-video; explica un concepto sin producto / sitio → /faceless-explainer. Entrada realmente poco clara → haz una pregunta.
• 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-sincronizar / recolor / reencuadrar / reordenar es edición NLE — fuera del alcance).
• Una presentación / pitch deck / deck interactivo (diapositivas discretas, navegación, modo presentador) → /slideshow — la salida es un deck navegable, no un video renderizado. Una solicitud explícita de "slideshow" procede directamente; un desencadenante adyacente ("deck / slides / presentación / convertir esta página") hace que /slideshow confirme que es un slideshow antes de crearlo, y cambie al flujo de trabajo no-slideshow 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 claramente dure más de ~3 min, o sea un formato estático / bucle / personalizado.

Si el flujo de trabajo coincidente no está instalado

Una vez que hayas elegido un flujo de trabajo, verifica que esté disponible para ti. Si la habilidad del flujo de trabajo coincidente no está instalada, no recurras a adivinar — dile al usuario que lo instale primero:

• Solo este flujo de trabajo: npx skills add heygen-com/hyperframes --skill <nombre-del-flujo-de-trabajo> (ej. --skill pr-to-video — nombre desnudo, sin / inicial).
• Todos los flujos de trabajo a la vez: npx skills add heygen-com/hyperframes --all (core + cada flujo de trabajo, omite el selector).

Después de que lo ejecuten, vuelve a leer la habilidad del flujo de trabajo y continúa.

Detalles de los flujos de trabajo

/faceless-explainer

• Entrada: Texto arbitrario — un tema, artículo o notas — que está siendo explicado, sin producto promocionado ni sitio que capturar.
• Salida: explicator sin rostro → MP4, cada imagen inventada por el LLM por escena (tipografía / abstracto / diagrama / visualización de datos); incluye el preajuste pin-and-paper. (punto óptimo 30–90 s).
• Disparadores: "explicador sin rostro sobre X", "explica cómo funciona DNS como video", "convierte este artículo en un video explicativo", "explicador a partir de mis notas".

/pr-to-video

• Entrada: Un pull request de GitHub — una URL de PR, una referencia owner/repo#N, o "este PR" — leído mediante la CLI gh (no un sitio para raspar).
• Salida: video explicativo de cambio de código (changelog / feature-reveal / fix / refactor) → MP4 — resaltados de diff, antes/después, escenas de árbol de archivos + impacto. ≤ (punto óptimo 30–90 s).
• Disparadores: "haz un video sobre este PR", "convierte el PR #1187 en un video changelog", "video de notas de versión desde github.com/org/repo/pull/123".

/embedded-captions

• Entrada: Un video existente de una persona hablando (MP4) para subtitular — metraje real, no una URL ni un brief. Transcrito localmente (Whisper, sin clave API) y enmascarado (RVM) para que el sujeto pueda ocultar los subtítulos.
• Salida: el mismo metraje intacto, con una capa de subtítulos — Estándar (riel de tercio inferior textual + un clímax incrustado detrás del sujeto) o Cinematográfico (cada subtítulo compuesto detrás del sujeto). Cualquier duración.
• Disparadores: "añade subtítulos a este video", "subtítulos detrás del sujeto", "subtítulos cinematográficos para mi clip".

/talking-head-recut

• Entrada: Un video existente de una persona hablando / entrevista / podcast (MP4) para empaquetar con gráficos en pantalla — metraje real. Transcrito localmente (Whisper). El clip se reproduce completo debajo, intacto.
• Salida: el mismo metraje con tarjetas de superposición gráfica temporizadas — títulos cinéticos, tercios inferiores, llamadas de datos, citas destacadas, paneles laterales, imagen en imagen — sincronizadas con la transcripción. Cualquier duración.
• Disparadores: "empaqueta este video", "añade superposiciones gráficas / tercios inferiores / llamadas de datos a mi charla", "convierte esta entrevista en una edición empaquetada con gráficos".

/motion-graphics

• Entrada: Un gráfico en movimiento corto y liderado por diseño donde la animación es el mensaje — típicamente menos de ~10 s. Géneros: tipografía cinética, un conteo de estadística / número, un golpe de gráfico, un sting de logotipo, un tercio inferior / superposición, o una página / tweet / titular impulsado por búsqueda.
• Salida: un gráfico en movimiento corto → MP4 o una superposición transparente (alpha WebM / MOV) para un tercio inferior / llamada.
• Disparadores: "un sting de logotipo de 8 s", "anima esta estadística", "una intro de tipo cinético", "convierte este tweet en un gráfico en movimiento", "una superposición transparente de tercio inferior".

/slideshow

• Entrada: Una presentación / pitch deck / deck interactivo para crear — un brief, un esquema, o una página existente para convertir en diapositivas. No es una solicitud de un video renderizado; si la intención es ambigua, la habilidad confirma "¿quieres esto como un slideshow de HyperFrames?" antes de crearlo.
• Salida: una composición ejecutable de HyperFrames + una isla JSON que el SlideshowController del reproductor lee para convertir la línea de tiempo de GSAP en un deck navegable — diapositivas discretas, revelaciones de fragmentos, secuencias ramificadas, navegación por hotspots, modo presentador y notas del orador. El entregable es un deck, no un MP4.
• Disparadores: "haz un pitch deck / presentación / deck de diapositivas", "un deck interactivo", "convierte esta página en diapositivas", "un slideshow con modo presentador".

/general-video

• Entrada: Cualquier cosa no especificada anteriormente — un brief creativo, un solo elemento para animar, una edición a una composición que estás construyendo. Agnóstico en cuanto a entrada y duración.
• Salida: una composición de HyperFrames (cualquier duración / formato) a través del flujo original: sistema de diseño → expansión de prompt → plan → diseño antes de animación → construir (delegando en las habilidades hyperframes-*) → validar.
• Disparadores: "haz una tarjeta de título", "anima esto", "un reel de marca / sizzle más largo", "una composición de varias escenas", "un bucle estático / póster", cualquier "haz un video" que no encaje en ninguna fila anterior.