heygen-com/hyperframes

Instalaciones de plugins: Antes de ejecutar comandos de configuración o actualización, sigue las reglas de instalación de plugins cuando esta habilidad esté dentro de un plugin de HyperFrames. Las instalaciones independientes mantienen las instrucciones de actualización a continuación.

Registro de HyperFrames

El registro proporciona bloques y componentes reutilizables instalables mediante hyperframes add <nombre>.

• Bloques — subcomposiciones independientes (dimensiones, duración y línea de tiempo propias). Se incluyen mediante data-composition-src en una composición anfitriona.
• Componentes — fragmentos de efecto (sin dimensiones propias). Se pegan directamente en el HTML de la composición anfitriona.

Referencia rápida

hyperframes add data-chart              # instalar un bloque
hyperframes add grain-overlay           # instalar un componente
hyperframes add captions                # instalar todos los bloques etiquetados como captions
hyperframes add shimmer-sweep --dir .   # apuntar a un proyecto específico
hyperframes add data-chart --json       # salida legible por máquina
hyperframes add data-chart --no-clipboard  # omitir portapapeles (CI/headless)

Después de la instalación, el CLI imprime qué archivos se escribieron y un fragmento para pegar en tu composición anfitriona. El fragmento es un punto de partida: deberás agregar los atributos data-composition-id (debe coincidir con el ID interno de composición del bloque), data-start y data-track-index al conectar bloques.

El valor posicional se resuelve primero como un nombre de elemento exacto. Si ningún elemento coincide y el valor es una etiqueta, el comando instala todos los bloques con esa etiqueta. Las dependencias del registro se instalan antes del elemento solicitado. hyperframes add funciona solo para bloques y componentes; para ejemplos, usa hyperframes init <dir> --example <nombre>.

Ubicaciones de instalación

Los bloques se instalan en compositions/<nombre>.html por defecto. Los componentes se instalan en compositions/components/<nombre>.html por defecto.

Estas rutas son configurables en hyperframes.json:

{
  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
  "paths": {
    "blocks": "compositions",
    "components": "compositions/components",
    "assets": "assets"
  }
}

Consulta install-locations.md para obtener todos los detalles.

Conexión de bloques

Los bloques son composiciones independientes: inclúyelos mediante data-composition-src en tu index.html anfitrión:

<div
  data-composition-id="data-chart"
  data-composition-src="compositions/data-chart.html"
  data-start="2"
  data-duration="15"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

Atributos clave:

• data-composition-src — ruta al archivo HTML del bloque
• data-composition-id — debe coincidir con el ID interno del bloque
• data-start — momento en que el bloque aparece en la línea de tiempo anfitriona (segundos)
• data-duration — duración de la reproducción del bloque
• data-width / data-height — dimensiones del lienzo del bloque
• data-track-index — orden de capas (mayor = al frente)

Consulta wiring-blocks.md para obtener todos los detalles.

Conexión de componentes

Los componentes son fragmentos: pega su HTML en el marcado de tu composición, su CSS en tu bloque de estilos y su JS en tu script (si lo hay):

1. Lee el archivo instalado (ej., compositions/components/grain-overlay.html)
2. Copia los elementos HTML dentro del <div data-composition-id="..."> de tu composición
3. Copia el bloque <style> en los estilos de tu composición
4. Copia cualquier contenido <script> en el script de tu composición (antes del código de tu línea de tiempo)
5. Si el componente expone integración con la línea de tiempo de GSAP (consulta el bloque de comentarios en el fragmento), agrega esas llamadas a tu línea de tiempo

Consulta wiring-components.md para obtener todos los detalles.

Descubrimiento

Usa el CLI como la superficie de descubrimiento principal. Busca por intención antes de navegar: el registro contiene más elementos de los que puedes escanear visualmente, por lo que listarlos y buscar coincidencias por nombres o etiquetas es el camino lento, y falla cada vez que la redacción del autor difiere de la tuya.

# Clasifica todo el catálogo contra lo que el beat debería hacer
npx hyperframes catalog --query "revelar un titular línea por línea"
npx hyperframes add caption-clip-wipe

La búsqueda es local y no envía nada. Por defecto, clasifica según el vocabulario compartido con el nombre, título y descripción del elemento, por lo que solo encuentra elementos que reutilizan tus palabras; --on-device clasifica por significado, después de una descarga única del modelo. Con --json, los nombres del sobre indican qué nivel respondió, así que verifica eso en lugar de asumir que ocurrió una clasificación.

Realiza siempre las consultas en inglés, independientemente del idioma del video. El catálogo está escrito en inglés y ambos niveles lo indexan de esa manera (el modelo en el dispositivo también es solo en inglés). Una consulta en otro sistema de escritura no produce términos buscables y no devuelve nada. Esto es fácil de pasar por alto en un proyecto en japonés o chino, donde el resumen, los subtítulos y la narración están en ese idioma y la consulta sigue naturalmente: describe el movimiento en inglés, luego escribe el texto en pantalla en el idioma que necesite el video. Si una consulta devuelve "No searchable words in query", esta es la regla, no un componente faltante, y no merece un informe de brecha.

La instalabilidad se aplica después de la clasificación, no antes: un nombre que los vectores transportan pero que este registro no puede servir se elimina de los resultados y se cuenta en dropped, por lo que un dropped distinto de cero significa que son dos generaciones diferentes. Consulta /hyperframes-cli para conocer el nivel sin conexión, las puertas de consentimiento y cómo actualizar un índice obsoleto.

Para navegar o filtrar en lugar de buscar:

npx hyperframes catalog
npx hyperframes catalog --type block
npx hyperframes catalog --type component
npx hyperframes catalog --type block --tag social
npx hyperframes catalog --json
npx hyperframes catalog --human-friendly

El modo de tabla normal y --json solo listan coincidencias; instala un nombre seleccionado con hyperframes add <nombre>. --human-friendly abre un selector interactivo e instala el elemento seleccionado inmediatamente. En flujos de trabajo de CI o agentes, prefiere --json seguido de un add explícito.

Informar lo que el catálogo no tiene

Cuando la búsqueda regrese y nada en los resultados haga el trabajo, dilo antes de crear el movimiento manualmente:

npx hyperframes feedback --search-miss "<la consulta que ejecutaste>" --wanted "<el movimiento que necesitabas>" --tier on-device

catalog --query imprime esta línea por ti, previamente rellenada, y --json la lleva como report_gap, por lo que ya la tienes a mano en el momento en que decides que nada encaja.

Informa siempre que nada en los resultados haga el trabajo, en cualquier nivel. No esperes a que el nivel en el dispositivo haya respondido: necesita una descarga consentida de 33 MB, por lo que una ejecución de agente está en words a menos que haya optado explícitamente, y depender de on-device silenciaría casi todos los informes. El valor --tier viaja para que un fallo de vocabulario se pueda distinguir de un fallo de significado cuando se lean. Describe el efecto que querías, no el nombre del elemento que imaginaste: lo que regresa es una lista de movimientos que vale la pena construir, y un informe que nombra un elemento inexistente no enseña nada. Este es el único camino que envía una consulta a algún lugar, que es exactamente por qué es un comando deliberado separado en lugar de algo que la búsqueda haga por sí sola. No lleva ninguna calificación y nunca llega a la métrica de calificación.

Esta es toda la señal de demanda del catálogo. Omitirla significa que la brecha que encontraste se adivina a partir de los recuentos de instalación, que no pueden ver un movimiento que nadie pudo instalar.

Si el CLI no puede alcanzar el registro configurado, inspecciona el manifiesto sin procesar como respaldo:

curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json

Un registro al que el CLI no puede alcanzar no vacía el catálogo para descubrimiento: un manifiesto obtenido previamente sigue sirviendo más allá de su ventana de actualización de 24 h siempre que la revalidación falle, por lo que catalog y catalog --query aún listan y clasifican según la última copia en disco.

add todavía necesita la red, incluso para un elemento que instalaste ayer. Solo los manifiestos se almacenan en caché; los archivos reales del elemento se obtienen en cada instalación. Por lo tanto, sin conexión puedes buscar y ver qué es un elemento, pero la instalación falla en la obtención del archivo. No prometas a un usuario una instalación sin conexión.

El registry-item.json de cada elemento contiene: nombre, tipo, título, descripción, etiquetas, dimensiones (solo bloques), duración (solo bloques) y lista de archivos.

Consulta discovery.md para obtener detalles sobre el filtrado por tipo y etiquetas.

Contribuir con un nuevo bloque o componente

Para crear UN NUEVO elemento del registro (estilo de subtítulo, bloque VFX, transición, tercio inferior o un componente reutilizable) y enviarlo como un PR upstream (no instalar uno existente), sigue el flujo de trabajo completo idea → andamiaje → construir → validar → vista previa → enviar en contributing.md. Las plantillas de inicio para copiar y pegar (subtítulo / VFX / componente / registry-item.json) están en templates.md.