HyperFrames — comienza aquí
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 la animación es buscable, y cuya reproducción de medios es gestionada por el marco. El contrato de autoría completo 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 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 ritmo, 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, 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, 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 / brief), un sitio web general, un PR de GitHub, un tema para 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ítulos = el del usuario. El flujo de trabajo elegido reconfirma sus propias especificaciones en su primer paso.
Hoja de trucos de flujos de trabajo
| Flujo de trabajo | Úsalo para |
|---|---|
/product-launch-video | Vender un producto (SaaS, app, sitio de empresa/producto) — desde una URL, brief o guion → un promocional. El predeterminado para cualquier URL comercial, incluso si solo se nombra el sitio. |
/website-to-video | Mostrar un sitio en sí mismo — un recorrido/escaparate 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 → explicador de changelog / revelación de funcionalidad / corrección / refactorización |
/embedded-captions | Agregar subtítulos / subtí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, sin narración, liderado por el diseño — tipo cinético, 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 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 / 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 más largas o de varias 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 guion — pregunta una cosa: ¿el sitio vende un producto? Sí (SaaS / app / producto / sitio de empresa) →
/product-launch-video— un promocional, y el predeterminado para cualquier URL comercial incluso si solo se nombra el sitio. No, o el usuario solo quiere mostrar el sitio tal como es (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í (remezcla de tiempo / recolor / reencuadre / reordenar / 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 se quedan con el flujo de trabajo coincidente con la entrada anterior;/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 autorizar, y cambie al flujo de trabajo no diapositivo apropiado si no lo es. - La longitud es una guía, no una barrera — 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 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>(ej.--skill pr-to-video— nombre desnudo, sin barra inicial). - Todos los flujos de trabajo a la vez:
npx skills add heygen-com/hyperframes --all(núcleo + 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 — 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 duro en 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 extrae nuestras últimas habilidades de GitHub cuando están desactualizadas. 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/pruebas optan por no participar a través de la variable de entorno HYPERFRAMES_SKIP_SKILLS=1.
Si una tarea se está comportando inesperadamente, o antes de una construcció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 distinto de cero cuando algo está desactualizado o falta). - Actualizar:
npx hyperframes skills update— extrae el conjunto completo a lo último, instalando cualquier 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 desactualizadas.
Detalles de flujos de trabajo
/product-launch-video
- Entrada: Un producto comercializado — (a) una URL del producto (rastreada con Chrome sin cabeza para activos + tokens de marca), (b) un guion / brief que nombre el sitio del producto incluso sin un enlace (PLV resuelve + rastrea, a menos que el usuario opte por no participar), 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 suministrado puede ser la voz en off textual o reestructurado por escena — PLV pregunta.
- Salida: un promocional de lanzamiento de producto / SaaS como una 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. - Desencadenantes: 'video de lanzamiento para X', 'promocional para nuestro sitio', 'explica mi SaaS en un minuto', 'convierte mi guion en un promocional de 60s', 'video de lanzamiento solo texto, no raspes'.
/website-to-video
- Entrada: Un sitio web / URL cuyo objetivo es mostrar el sitio en sí mismo, no vender un producto. Mejor para sitios no comerciales (portafolio, blog, docs, personal, evento), o cuando el usuario quiere explícitamente un recorrido de un sitio tal como es. Capturado con Chrome sin cabeza para capturas de pantalla reales + marca como