hyperframes-registry

Name: hyperframes-registry
Author: calesthio

41kstars4.9kforks

How to install hyperframes-registry?

calesthio/openmontage/hyperframes-registry

$npx -y skills add calesthio/OpenMontage --skill hyperframes-registry

Installs into the current project.

Summary

Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-compo

Files · 1

View on GitHub

SKILL.md

1	# HyperFrames Registry
2
3	The registry provides reusable blocks and components installable via `hyperframes add <name>`.
4
5	- Blocks — standalone sub-compositions (own dimensions, duration, timeline). Included via `data-composition-src` in a host composition.
6	- Components — effect snippets (no own dimensions). Pasted directly into a host composition's HTML.
7
8	## Quick reference
9
10	```bash
11	hyperframes add data-chart # install a block
12	hyperframes add grain-overlay # install a component
13	hyperframes add shimmer-sweep --dir . # target a specific project
14	hyperframes add data-chart --json # machine-readable output
15	hyperframes add data-chart --no-clipboard # skip clipboard (CI/headless)
16	```
17
18	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.
19
20	Note: `hyperframes add` only works for blocks and components. For examples, use `hyperframes init <dir> --example <name>` instead.
21
22	## Install locations
23
24	Blocks install to `compositions/<name>.html` by default.
25	Components install to `compositions/components/<name>.html` by default.
26
27	These paths are configurable in `hyperframes.json`:
28
29	```json
30	{
31	"registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
32	"paths": {
33	"blocks": "compositions",
34	"components": "compositions/components",
35	"assets": "assets"
36	}
37	}
38	```
39
40	See [install-locations.md](./references/install-locations.md) for full details.
41
42	## Wiring blocks
43
44	Blocks are standalone compositions — include them via `data-composition-src` in your host `index.html`:
45
46	```html
47	<div
48	data-composition-id="data-chart"
49	data-composition-src="compositions/data-chart.html"
50	data-start="2"
51	data-duration="15"
52	data-track-index="1"
53	data-width="1920"
54	data-height="1080"
55	></div>
56	```
57
58	Key attributes:
59
60	- `data-composition-src` — path to the block HTML file
61	- `data-composition-id` — must match the block's internal ID
62	- `data-start` — when the block appears in the host timeline (seconds)
63	- `data-duration` — how long the block plays
64	- `data-width` / `data-height` — block canvas dimensions
65	- `data-track-index` — layer ordering (higher = in front)
66
67	See [wiring-blocks.md](./references/wiring-blocks.md) for full details.
68
69	## Wiring components
70
71	Components are snippets — paste their HTML into your composition's markup, their CSS into your style block, and their JS into your script (if any):
72
73	1. Read the installed file (e.g., `compositions/components/grain-overlay.html`)
74	2. Copy the HTML elements into your composition's `<div data-composition-id="...">`
75	3. Copy the `<style>` block into your composition's styles
76	4. Copy any `<script>` content into your composition's script (before your timeline code)
77	5. If the component exposes GSAP timeline integration (see the comment block in the snippet), add those calls to your timeline
78
79	See [wiring-components.md](./references/wiring-components.md) for full details.
80
81	## Discovery
82
83	Browse available items:
84
85	```bash
86	# Read the registry manifest
87	curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
88	```
89
90	Each item's `registry-item.json` contains: name, type, title, description, tags, dimensions (blocks only), duration (blocks only), and file list.
91
92	See [discovery.md](./references/discovery.md) for details on filtering by type and tags.
93
94	## Contributing a new block or component
95
96	To author a NEW registry item (caption style, VFX block, transition, lower third, or a reusable component) and ship it as an upstream PR — not install an existing one — follow the full idea → scaffold → build → validate → preview → ship workflow in [contributing.md](./references/contributing.md). Copy-paste starter templates (caption / VFX / component / `registry-item.json`) are in [templates.md](./references/templates.md).

People who liked this also viewed

6 picks

Type

hyperframes-registry

41kstars4.9kforks

View on GitHub

How to install hyperframes-registry?

calesthio/openmontage/hyperframes-registry

$npx -y skills add calesthio/OpenMontage --skill hyperframes-registry

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# HyperFrames Registry
2
3	The registry provides reusable blocks and components installable via `hyperframes add <name>`.
4
5	- Blocks — standalone sub-compositions (own dimensions, duration, timeline). Included via `data-composition-src` in a host composition.
6	- Components — effect snippets (no own dimensions). Pasted directly into a host composition's HTML.
7
8	## Quick reference
9
10	```bash
11	hyperframes add data-chart # install a block
12	hyperframes add grain-overlay # install a component
13	hyperframes add shimmer-sweep --dir . # target a specific project
14	hyperframes add data-chart --json # machine-readable output
15	hyperframes add data-chart --no-clipboard # skip clipboard (CI/headless)
16	```
17
18	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.
19
20	Note: `hyperframes add` only works for blocks and components. For examples, use `hyperframes init <dir> --example <name>` instead.
21
22	## Install locations
23
24	Blocks install to `compositions/<name>.html` by default.
25	Components install to `compositions/components/<name>.html` by default.
26
27	These paths are configurable in `hyperframes.json`:
28
29	```json
30	{
31	"registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
32	"paths": {
33	"blocks": "compositions",
34	"components": "compositions/components",
35	"assets": "assets"
36	}
37	}
38	```
39
40	See [install-locations.md](./references/install-locations.md) for full details.
41
42	## Wiring blocks
43
44	Blocks are standalone compositions — include them via `data-composition-src` in your host `index.html`:
45
46	```html
47	<div
48	data-composition-id="data-chart"
49	data-composition-src="compositions/data-chart.html"
50	data-start="2"
51	data-duration="15"
52	data-track-index="1"
53	data-width="1920"
54	data-height="1080"
55	></div>
56	```
57
58	Key attributes:
59
60	- `data-composition-src` — path to the block HTML file
61	- `data-composition-id` — must match the block's internal ID
62	- `data-start` — when the block appears in the host timeline (seconds)
63	- `data-duration` — how long the block plays
64	- `data-width` / `data-height` — block canvas dimensions
65	- `data-track-index` — layer ordering (higher = in front)
66
67	See [wiring-blocks.md](./references/wiring-blocks.md) for full details.
68
69	## Wiring components
70
71	Components are snippets — paste their HTML into your composition's markup, their CSS into your style block, and their JS into your script (if any):
72
73	1. Read the installed file (e.g., `compositions/components/grain-overlay.html`)
74	2. Copy the HTML elements into your composition's `<div data-composition-id="...">`
75	3. Copy the `<style>` block into your composition's styles
76	4. Copy any `<script>` content into your composition's script (before your timeline code)
77	5. If the component exposes GSAP timeline integration (see the comment block in the snippet), add those calls to your timeline
78
79	See [wiring-components.md](./references/wiring-components.md) for full details.
80
81	## Discovery
82
83	Browse available items:
84
85	```bash
86	# Read the registry manifest
87	curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
88	```
89
90	Each item's `registry-item.json` contains: name, type, title, description, tags, dimensions (blocks only), duration (blocks only), and file list.
91
92	See [discovery.md](./references/discovery.md) for details on filtering by type and tags.
93
94	## Contributing a new block or component
95
96	To author a NEW registry item (caption style, VFX block, transition, lower third, or a reusable component) and ship it as an upstream PR — not install an existing one — follow the full idea → scaffold → build → validate → preview → ship workflow in [contributing.md](./references/contributing.md). Copy-paste starter templates (caption / VFX / component / `registry-item.json`) are in [templates.md](./references/templates.md).

People who liked this also viewed

6 picks

Type