HyperFrames — comienza 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 controlada por el 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 se cargan bajo demanda — no flujos de trabajo completos. Para "hazme un video", usa el enrutador de intenciones de abajo.
| Quieres… | Habilidad |
|---|---|
Crear / editar una composición HTML — el contrato data-*, clips, pistas, sub-composiciones, variables | /hyperframes-core |
| Animar — movimiento atómico, planos de escena, transiciones, adaptadores de runtime (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 ritmo, audio-reactivo | /hyperframes-creative |
| Medios — voz en off 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, iconos del catálogo de HeyGen en .media/ con seguimiento de manifiesto | /media-use |
| Bucle de desarrollo CLI — init, lint, validar, inspeccionar, previsualizar, renderizar, publicar, reparar | /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 las especificaciones
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 especificaciones — indica, 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í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 |
|---|---|
/product-launch-video | Comercializar / lanzar / promocionar un producto — desde su URL, un resumen, o un guion (incluso si el sitio solo se nombra) |
/website-to-video | Convertir un sitio web general en un video — recorrido del sitio, muestra de portafolio / página de aterrizaje, clip social de los visuales del sitio |
/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 → explicador de registro de cambios / revelación de características / corrección / refactorización |
/embedded-captions | Agregar subtítulos / leyendas 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, liderado por el diseño — tipografía cinética, un impacto 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 promocional cinético; 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, ramificaciones, puntos calientes; 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 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 es confundible):
- Prioriza el movimiento y sin narración (menos de ~10 s, el movimiento es el mensaje) →
/motion-graphics, independientemente de la entrada. - Una URL o guion — comercializa un producto específico (incluso solo nombrando el sitio) →
/product-launch-video; un sitio general no producto →/website-to-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 palabras habladas →
/embedded-captions; tarjetas de superposición diseñadas →/talking-head-recut. Ninguno edita el metraje en sí (re-temporización / recoloreado / 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 marcan el ritmo. (Las piezas narradas permanecen con el flujo de trabajo de entrada correspondiente arriba;/motion-graphicses 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/slideshowconfirme que es una presentación de diapositivas antes de crear, y cambie al flujo de trabajo sin diapositivas apropiado si no lo es. - La duración es una guía, no un límite — la intención elige el flujo de trabajo; ve a
/general-videosolo cuando la pieza es claramente más larga de ~3 min, o es 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 realmente esté 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(núcleo + cada flujo de trabajo, salta 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 más recientes en GitHub e instala/actualiza el conjunto completo siempre que algo esté desactualizado o falte — así 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 de ida y vuelta rápido a GitHub; sin conexión (o con límite de tasa) recurre a la instalación después de un breve tiempo de espera, por lo que init nunca falla estrepitosamente en un contratiempo de red. Opta por no participar completamente con init --skip-skills.
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--jsonpara un veredicto legible por máquina; sale con código no cero cuando algo está desactualizado o falta). - Actualizar:
npx hyperframes skills update— obtiene el conjunto completo a la versión más reciente, instalando cualquier habilidad que aún no esté presente (igual 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 del flujo de trabajo
/product-launch-video
- Entrada: Un producto que se está comercializando — (a) una URL del producto (rastreada con Chrome sin cabeza para recursos + tokens de marca), (b) un guion / resumen que nombra el sitio del producto incluso sin un enlace (PLV lo resuelve + lo rastrea, a menos que el usuario opte por no hacerlo), o (c) un guion sin sitio derivable / "no raspar" (modo sin captura — elige un preset de estilo que proporcione paleta + sistema de diseño). Un guion proporcionado puede ser la voz en off textual o reestructurado por escena — PLV pregunta.
- Salida: lanzamiento de producto / promocional SaaS como una composición de HyperFrames → MP4. (punto óptimo 30–90 s).
- Desencadenantes: "video de lanzamiento para X", "promocional para nuestro sitio", "explica mi SaaS en un minuto", "convierte mi guion en un promocional de 60 s", "video de lanzamiento solo texto, no raspes".
/website-to-video
- Entrada: Un sitio web / URL general para convertir en un video — cuando el objetivo es un video del sitio, no un lanzamiento de producto. Capturado con Chrome sin cabeza para capturas de pantalla reales + recursos de marca.
- Salida: un recorrido del sitio / portafolio / muestra de página de aterrizaje / clip social construido a partir de los propios visuales del sitio → MP4.
- Desencadenantes: "convierte este sitio web en un video", "recorrido del sitio desde ", "clip social de nuestra página de inicio", "solo tengo una URL — haz algo".
/faceless-explainer
- Entrada: Texto arbitrario — un tema, artículo o notas — que se está explicando, sin que se esté comercializando un producto ni se capture un sitio. (Bifurcado de
/product-launch-video; sin Chrome sin cabeza). - 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–90 s). - 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 CLIgh(no un sitio para raspar). - Salida: explicador de cambio de código (registro de cambios / revelación de característica / corrección / refactorización) → MP4 — aspectos destacados del diff, antes/después, árbol de archivos + escenas de impacto. ≤ (punto óptimo 30–90 s).
- Desencadenantes: "haz un video sobre este PR", "convierte el PR #1187 en un video de registro de cambios", "video de notas de la 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 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.
- Desencadenantes: "agrega subtítulos / leyendas 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, liderado por el diseño donde el movimiento es el mensaje — típicamente menos de ~10 s, sin narración. Géneros: tipografía cinética, un conteo de estadística / número, un impacto 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.
- Desencadenantes: "un sting de logotipo de 8 s", "anima esta estadística", "una introducción 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 del que extraer el audio — con sin narración y sin captura de sitio web. Opcionalmente, imágenes / videos proporcionados por el usuario para entretejer. La pista se analiza una vez en un mapa de ritmo / energía determinista (
audiomap.json) sobre el que se construye todo el video. - Salida: una composición de 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 no necesita recursos); cualquier medio proporcionado se corta en la misma cuadrícula de ritmo (corte de ritmo / ken-burns). El género — video lírico, presentación de diapositivas, promocional cinético — surge de las elecciones por fotograma; la tubería nunca se ramifica 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 / promocional cinético a este ritmo".
/slideshow
- Entrada: Una presentación / pitch deck / deck interactivo para crear — una dirección o estructura proporcionada (una URL de sitio, un archivo local, diapositivas en un formato como markdown, o incluso una descripción verbal del contenido).
- Salida: un deck navegable (HTML/JS interactivo) — no un video renderizado. Incluye diapositivas discretas, fragmentos, ramificaciones y puntos calientes; soporta modo presentador si es necesario.
- Desencadenantes: "haz una presentación sobre X", "convierte este documento en un pitch deck", "crea un deck interactivo para mi propuesta", "diapositivas para mi charla".