HyperFrames — punto de partida

¿Qué hace HyperFrames — punto de partida?

HyperFrames renderiza video desde HTML — una composición es un archivo HTML cuyo DOM declara la sincronización con atributos data-*, cuyo tiempo de ejecución de animación es buscable, y cuya reproducción multimedia es propiedad del framework. 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 del dominio, cargadas bajo demanda) y el enrutador de intenciones (elige un flujo de trabajo para cualquier solicitud de "hazme un video").

Mapa de capacidades — las habilidades del dominio

Capacidades atómicas que cargas bajo demanda — no flujos de trabajo completos de video. Para "hazme un video", usa el enrutador de intenciones a continuación.

Quieres…	Habilidad
Autor/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
Dirección creativa — frame.md / design.md, paletas, tipografía, narración, planificación de ritmos, audio-reactivo	/hyperframes-creative
Medios — locución TTS, música de fondo, transcripción, eliminación de fondo, subtítulos	/hyperframes-media
Resolución de medios — encontrar + congelar BGM, SFX, imágenes, íconos del catálogo de HeyGen en .media/ con seguimiento de manifiesto	/media-use
Bucle de desarrollo CLI — init, lint, validar, inspeccionar, previsualizar, renderizar, publicar, doctor	/hyperframes-cli
Instalar bloques/componentes del registro (hyperframes add)	/hyperframes-registry

---

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 habilidades del 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 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 / resumen), un sitio web general, un PR de GitHub, un tema a explicar, o un video existente de una persona hablando?

Valores predeterminados de 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 narración/subtítulo = 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
/product-launch-video	Comercializar / lanzar / promocionar un producto — desde su URL, un resumen o un guión (incluso si el sitio solo se menciona)
/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 → video explicativo de changelog / revelación de funcionalidad / corrección / refactorización
/embedded-captions	Agregar subtítulos/captions 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, sin narración, basado en diseño — tipografía cinética, un golpe de estadística/gráfico, un sting de logotipo, una superposición de tercio inferior
/music-to-video	Una pista de música → un video sincronizado con el ritmo — video lírico, presentación de diapositivas o promo cinética; la música marca el ritmo (imágenes/videos opcionales del usuario cortados en la cuadrícula de ritmo)
/slideshow	Una presentación / pitch deck / deck interactivo — diapositivas discretas, fragmentos, bifurcaciones, hotspots; la salida es un deck navegable, no un video renderizado
/general-video	Cualquier otra cosa — piezas más largas o de múltiples escenas, un bucle/póster estático, una composición personalizada, o un recorrido de sitio general cuando ningún flujo de trabajo especializado encaja
/remotion-to-hyperframes	Portar una composición existente de Remotion (React) a HyperFrames (migración, no creación)

Desambiguación (solo donde sea confuso):

• Prioridad al movimiento y sin narración (menos de ~10s, el movimiento es el mensaje) → /motion-graphics, independientemente de la entrada.
• Una URL o guión — comercializa un producto específico (incluso solo mencionar el sitio) → /product-launch-video; un sitio general no relacionado con productos → /general-video; un enlace de PR de GitHub → /pr-to-video; explica un concepto sin producto/sitio → /faceless-explainer. Si no está claro si es producto vs. tema, o lanzamiento vs. sitio general → haz una pregunta.
• Metraje existente — subtítulos simples de voz en off → /embedded-captions; tarjetas de superposición diseñadas → /talking-head-recut. Ninguno edita el metraje en sí (re-timing / recolor / reframe / reorder / audio es edición NLE — fuera del alcance).
• Una pista de música es la entrada (un archivo de audio, o un video para extraer audio) sin narración → /music-to-video — los ritmos/energía de la música marcan el ritmo. (Las piezas narradas se quedan 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 / 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 "presentación de diapositivas" procede directamente; un desencadenante adyacente ("deck / diapositivas / presentación / convertir esta página") hace que /slideshow confirme que es una presentación de diapositivas antes de la autoría, y cambie al flujo de trabajo no relacionado con presentaciones 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 sea claramente más larga 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é realmente disponible para ti. Si la habilidad del flujo de trabajo coincidente no está instalada, no recurras a adivinar — dile al usuario que la instale primero:

• Solo este flujo de trabajo: npx skills add heygen-com/hyperframes --skill <nombre-del-flujo-de-trabajo> (por ejemplo, --skill pr-to-video — nombre simple, 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.

Mantener las habilidades actualizadas

Las habilidades de HyperFrames tienen versiones. npx hyperframes init verifica las habilidades instaladas contra las últimas en GitHub e instala/actualiza el conjunto completo cada vez que algo está desactualizado o falta — por lo que un proyecto recién inicializado siempre tiene el conjunto completo y más reciente (y volver a ejecutar init en un proyecto actualizado no hace nada). La verificación es un viaje rápido de ida y vuelta a GitHub; sin conexión (o con límite de velocidad) recurre a instalación después de un breve tiempo de espera, por lo que init nunca falla por un contratiempo de red. Los flujos de trabajo de creación preparan con init, por lo que comenzar un nuevo proyecto siempre ejecuta esta verificación y descarga nuestras habilidades más recientes de GitHub cuando están obsoletas. La bandera --skip-skills está actualmente neutralizada (una medida temporal mientras el registro skills.sh se pone al día): pasarla ya no omite la verificación, por lo que cada init verifica GitHub. CI/tests optan por no participar mediante la variable de entorno HYPERFRAMES_SKIP_SKILLS=1.

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 está desactualizado o falta).
• Actualizar: npx hyperframes skills update — descarga el conjunto completo a la versión más reciente, instalando cualquier habilidad aún no presente (lo mismo que el paso de instalación de init).

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

Detalles de los flujos de trabajo

/product-launch-video

• Entrada: Un producto que se comercializa — (a) una URL de producto (explorada con Chrome sin interfaz gráfica para activos + tokens de marca), (b) un guión/resumen que menciona el sitio del producto incluso sin un enlace (PLV lo resuelve + lo explora, a menos que el usuario opte por no hacerlo), 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 voz en off textual o reestructurada por escena — PLV pregunta.
• Salida: lanzamiento de producto / promo SaaS como una composición HyperFrames → MP4. (punto óptimo 30–90s).
• Desencadenantes: "video de lanzamiento para X", "promo para nuestro sitio", "explica mi SaaS en un minuto", "convierte mi guión en una promo de 60s", "video de lanzamiento solo texto, no raspes".

/faceless-explainer

• Entrada: Texto arbitrario — un tema, artículo o notas — que se está explicando, sin que se comercialice ningún producto ni se capture un sitio. (Bifurcado de /product-launch-video; sin Chrome sin interfaz gráfica).
• Salida: explicador sin rostro → MP4, cada visual inventado por el LLM por escena (tipografía / abstracto / diagrama / visualización de datos); incluye el preset pin-and-paper. (punto óptimo 30–90s).
• Desencadenantes: "explicador sin rostro sobre X", "explica cómo funciona DNS como un video", "convierte este artículo en un explicador", "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 a través del CLI gh (no un sitio para raspar).
• Salida: video explicativo de cambio de código (changelog / revelación de funcionalidad / corrección / refactorización) → MP4 — destacados de diff, antes/después, árbol de archivos + escenas de impacto. ≤ (punto óptimo 30–90s).
• Desencadenantes: "haz un video sobre este PR", "convierte el PR #1187 en un video de 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 o resumen. 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 textual textual en tercio inferior + un clímax incrustado detrás del sujeto) o Cinematográfico (cada subtítulo compuesto detrás del sujeto). Cualquier duración.
• Desencadenantes: "agrega subtítulos / captions 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 completamente 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.
• Desencadenantes: "empaqueta este video", "agrega 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, basado en diseño, donde el movimiento es el mensaje — típicamente menos de ~10s, sin narración. 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 un disparo de 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.
• Desencadenantes: "un sting de logotipo de 8s", "anima esta estadística", "una intro de tipo cinético", "convierte este tweet en un gráfico en movimiento", "una superposición de tercio inferior transparente".

/music-to-video

• Entrada: Una pista de música — un archivo de audio, o un video para extraer el audio — sin narración y sin captura de sitio web. Opcionalmente, imágenes/videos proporcionados por el usuario para entrelazar. La pista se analiza una vez en un mapa de ritmo/energía determinista (audiomap.json) sobre el cual se construye todo el video.
• Salida: una composición HyperFrames sincronizada con el ritmo → MP4 donde la música marca el ritmo. La tipografía y las plantillas son el piso (un video completo necesita cero activos); cualquier medio proporcionado se corta en la misma cuadrícula de ritmo (beat-cut / ken-burns). El género — video lírico, presentación de diapositivas, promo cinética — surge de las elecciones por fotograma; el pipeline nunca se bifurca en él.
• Desencadenantes: "haz un video para esta canción", "video sincronizado con el ritmo a partir de esta pista", "video lírico", "convierte esta música en un video", "visualizador de música / promo cinética a este ritmo".

/slideshow

• Entrada: Una presentación / pitch deck / deck interactivo para autorizar — un resumen, 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 una presentación de diapositivas de HyperFrames?" antes de la autoría.
• Salida: una composición HyperFrames ejecutable + una isla JSON que el SlideshowController del reproductor lee para convertir...