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-srcen una composición anfitriona. - Componentes — fragmentos de efectos (sin dimensiones propias). Se pegan directamente en el HTML de una 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 en formato legible por máquina
hyperframes add data-chart --no-clipboard # omitir portapapeles (CI/headless)
Tras la instalación, la 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 añadir los atributos data-composition-id (debe coincidir con el ID interno de la composición del bloque), data-start y data-track-index al cablear bloques.
El valor posicional se resuelve primero como nombre exacto de elemento. 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> en su lugar.
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 más detalles.
Cableado 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 bloquedata-composition-id— debe coincidir con el ID interno del bloquedata-start— cuándo aparece el bloque en la línea de tiempo anfitriona (segundos)data-duration— duración de reproducción del bloquedata-width/data-height— dimensiones del lienzo del bloquedata-track-index— orden de capas (mayor = al frente)
Consulta wiring-blocks.md para más detalles.
Cableado 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):
- Lee el archivo instalado (por ejemplo,
compositions/components/grain-overlay.html) - Copia los elementos HTML en el
<div data-composition-id="...">de tu composición - Copia el bloque
<style>en los estilos de tu composición - Copia cualquier contenido
<script>en el script de tu composición (antes del código de la línea de tiempo) - Si el componente expone integración con la línea de tiempo de GSAP (consulta el bloque de comentarios en el fragmento), añade esas llamadas a tu línea de tiempo
Consulta wiring-components.md para más detalles.
Descubrimiento
Usa la CLI como superficie principal de descubrimiento. 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 nombre o etiqueta es la ruta lenta, y falla siempre que la redacción del autor difiere de la tuya.
# Clasificar 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 reutilicen tus palabras; --on-device clasifica por significado en su lugar, tras una descarga única del modelo. Con --json, los sobres indican qué nivel respondió, así que verifícalo en lugar de asumir que se realizó una clasificación.
Consulta siempre en inglés, independientemente del idioma del video. El catálogo está escrito en inglés y ambos niveles lo indexan así (el modelo local también es solo inglés). Una consulta en otra escritura no produce términos buscables y no devuelve nada. Es fácil equivocarse en un proyecto 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", se trata de esta regla, no de 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 las dos son generaciones diferentes. Consulta /hyperframes-cli para el nivel fuera de línea, 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
Los modos normales de tabla y --json solo listan coincidencias; instala un nombre seleccionado con hyperframes add <nombre>. --human-friendly abre un selector interactivo e instala el elemento seleccionado de inmediato. En flujos de trabajo de CI o agentes, prefiere --json seguido de un add explícito.
Informar de lo que no tiene el catálogo
Cuando la búsqueda regrese y nada de lo encontrado sirva, 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 sirve.
Informa siempre que nada de los resultados cumpla la función, en cualquier nivel. No esperes a que el nivel local haya respondido: necesita una descarga de 33 MB con consentimiento, por lo que una ejecución de agente está en words a menos que haya optado explícitamente, y condicionar a on-device silenciaría casi todos los informes. El valor --tier viaja junto para que un fallo de vocabulario siga siendo distinguible 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 precisamente por qué es un comando deliberado separado y no 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 la CLI no puede alcanzar el registro configurado, inspecciona el manifiesto sin procesar como alternativa:
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
Un registro al que la CLI no puede acceder no vacía el catálogo para descubrimiento: un manifiesto obtenido previamente sigue sirviendo más allá de su ventana de actualización de 24h cuando la revalidación falla, por lo que catalog y catalog --query aún listan y clasifican contra la última copia en disco.
add aún necesita la red, incluso para un elemento que instalaste ayer. Solo se almacenan en caché los manifiestos; 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 instalarlo 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 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ítulos, bloque VFX, transición, tercio inferior o componente reutilizable) y enviarlo como PR ascendente — no instalar uno existente — sigue el flujo de trabajo completo de idea → andamiaje → construcción → validación → vista previa → envío en contributing.md. Las plantillas de inicio para copiar y pegar (subtítulos / VFX / componente / registry-item.json) están en templates.md.