Frontend 16,399 installs

hyperframes-registry

by heygen-com/hyperframes

Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an…

Skill content

Install and wire reusable blocks and components into HyperFrames compositions via the registry.

- Blocks are standalone sub-compositions with their own dimensions and timeline; components are effect snippets pasted directly into host compositions

- Install via hyperframes add <name> with options for custom directories, JSON output, and clipboard control

- Blocks require wiring through data-composition-src and attributes like data-composition-id, data-start, data-duration, and data-track-index

- Components require manual merging of HTML elements, CSS styles, and JavaScript into the host composition

- Install paths and registry source are configurable in hyperframes.json

HyperFrames Registry

The registry provides reusable blocks and components installable via hyperframes add <name>.

- Blocks - standalone sub-compositions (own dimensions, duration, timeline). Included via data-composition-src in a host composition.

- Components - effect snippets (no own dimensions). Pasted directly into a host composition's HTML.

Quick reference

hyperframes add data-chart              # install a block
hyperframes add grain-overlay           # install a component
hyperframes add shimmer-sweep --dir .   # target a specific project
hyperframes add data-chart --json       # machine-readable output
hyperframes add data-chart --no-clipboard  # skip clipboard (CI/headless)

After install, the CLI prints which files were written and a snippet to paste into your host composition. The snippet is a starting point - you'll need to add data-composition-id (must match the block's internal composition ID), data-start, and data-track-index attributes when wiring blocks.