Registro HyperFrames
O registro fornece blocos e componentes reutilizáveis que podem ser instalados via hyperframes add <name>.
- Blocos — sub-composições independentes (com suas próprias dimensões, duração e timeline). Incluídos via
data-composition-srcem uma composição hospedeira. - Componentes — trechos de efeito (sem dimensões próprias). Colados diretamente no HTML de uma composição hospedeira.
Referência rápida
hyperframes add data-chart # instalar um bloco
hyperframes add grain-overlay # instalar um componente
hyperframes add captions # instalar todos os blocos com a tag captions
hyperframes add shimmer-sweep --dir . # direcionar um projeto específico
hyperframes add data-chart --json # saída legível por máquina
hyperframes add data-chart --no-clipboard # pular área de transferência (CI/headless)
Após a instalação, a CLI imprime quais arquivos foram gravados e um trecho para colar na sua composição hospedeira. O trecho é um ponto de partida — você precisará adicionar os atributos data-composition-id (deve corresponder ao ID interno da composição do bloco), data-start e data-track-index ao conectar blocos.
O valor posicional é resolvido primeiro como um nome exato de item. Se nenhum item corresponder e o valor for uma tag, o comando instala todos os blocos com essa tag. As dependências do registro são instaladas antes do item solicitado. hyperframes add funciona apenas para blocos e componentes; para exemplos, use hyperframes init <dir> --example <name>.
Locais de instalação
Blocos são instalados em compositions/<name>.html por padrão. Componentes são instalados em compositions/components/<name>.html por padrão.
Esses caminhos são configuráveis em hyperframes.json:
{
"registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
"paths": {
"blocks": "compositions",
"components": "compositions/components",
"assets": "assets"
}
}
Consulte install-locations.md para detalhes completos.
Conectando blocos
Blocos são composições independentes — inclua-os via data-composition-src no seu index.html hospedeiro:
<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 principais:
data-composition-src— caminho para o arquivo HTML do blocodata-composition-id— deve corresponder ao ID interno do blocodata-start— quando o bloco aparece na timeline hospedeira (segundos)data-duration— por quanto tempo o bloco é reproduzidodata-width/data-height— dimensões do canvas do blocodata-track-index— ordenação de camadas (maior = na frente)
Consulte wiring-blocks.md para detalhes completos.
Conectando componentes
Componentes são trechos — cole seu HTML na marcação da sua composição, seu CSS no bloco de estilo e seu JS no script (se houver):
- Leia o arquivo instalado (ex.:
compositions/components/grain-overlay.html) - Copie os elementos HTML para dentro da
<div data-composition-id="...">da sua composição - Copie o bloco
<style>para os estilos da sua composição - Copie qualquer conteúdo
<script>para o script da sua composição (antes do código da timeline) - Se o componente expõe integração com timeline GSAP (veja o bloco de comentários no trecho), adicione essas chamadas à sua timeline
Consulte wiring-components.md para detalhes completos.
Descoberta
Use a CLI como superfície principal de descoberta:
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
Os modos normal (tabela) e --json apenas listam correspondências; instale um nome selecionado com hyperframes add <name>. --human-friendly abre um seletor interativo e instala o item selecionado imediatamente. Em fluxos de CI ou com agentes, prefira --json seguido de um add explícito.
Se a CLI não conseguir acessar o registro configurado, inspecione o manifesto bruto como alternativa:
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
O registry-item.json de cada item contém: nome, tipo, título, descrição, tags, dimensões (apenas blocos), duração (apenas blocos) e lista de arquivos.
Consulte discovery.md para detalhes sobre filtragem por tipo e tags.
Contribuindo com um novo bloco ou componente
Para CRIAR um novo item de registro (estilo de legenda, bloco VFX, transição, terço inferior ou um componente reutilizável) e enviá-lo como um PR upstream — e não instalar um existente — siga o fluxo completo de ideação → scaffolding → construção → validação → pré-visualização → envio em contributing.md. Modelos iniciais prontos para copiar e colar (legenda / VFX / componente / registry-item.json) estão em templates.md.