mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +00:00
James Russo
9943091247
## What Add 28 transition blocks from the Hyperframe Template Structure catalog, bringing the registry to 53 total items. ### Shader transitions (14 blocks, WebGL, 4s each) `domain-warp-dissolve`, `ridged-burn`, `whip-pan`, `sdf-iris`, `ripple-waves`, `gravitational-lens`, `cinematic-zoom`, `chromatic-radial-split`, `glitch`, `swirl-vortex`, `thermal-distortion`, `flash-through-white`, `cross-warp-morph`, `light-leak` ### CSS transition showcases (14 blocks, various durations) `transitions-3d`, `transitions-blur`, `transitions-cover`, `transitions-destruction`, `transitions-dissolve`, `transitions-distortion`, `transitions-grid`, `transitions-light`, `transitions-mechanical`, `transitions-other`, `transitions-push`, `transitions-radial`, `transitions-scale`, `transitions-shader` ## Why Phase D content accumulation. Transitions are the most-requested category for the catalog. ## How - Shader transitions extracted from `shader-showcase.zip`, each a standalone HTML with WebGL shaders - CSS transitions extracted from `showcase-bundle.zip`, each a standalone showcase page - All tagged with `transition` + `shader` or `showcase` for catalog grouping - Preview thumbnails generated for all 28 blocks - Catalog pages + index regenerated ## Test plan - [x] All 28 blocks produce preview thumbnails - [x] `registry-item.json` validates for all blocks - [x] Catalog pages generated (45 total items in catalog-index.json) - [x] `oxfmt --check` passes
105 lines
4.2 KiB
Markdown
105 lines
4.2 KiB
Markdown
---
|
|
name: hyperframes-registry
|
|
description: 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-composition wiring, component snippet merging, and registry discovery.
|
|
---
|
|
|
|
# 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.
|
|
|
|
## When to use this skill
|
|
|
|
- User mentions `hyperframes add`, "block", "component", or `hyperframes.json`
|
|
- Output from `hyperframes add` appears in the session (file paths, clipboard snippet)
|
|
- You need to wire an installed item into an existing composition
|
|
- You want to discover what's available in the registry
|
|
|
|
## Quick reference
|
|
|
|
```bash
|
|
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.
|
|
|
|
Note: `hyperframes add` only works for blocks and components. For examples, use `hyperframes init <dir> --example <name>` instead.
|
|
|
|
## Install locations
|
|
|
|
Blocks install to `compositions/<name>.html` by default.
|
|
Components install to `compositions/components/<name>.html` by default.
|
|
|
|
These paths are configurable in `hyperframes.json`:
|
|
|
|
```json
|
|
{
|
|
"registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
|
|
"paths": {
|
|
"blocks": "compositions",
|
|
"components": "compositions/components",
|
|
"assets": "assets"
|
|
}
|
|
}
|
|
```
|
|
|
|
See [install-locations.md](./references/install-locations.md) for full details.
|
|
|
|
## Wiring blocks
|
|
|
|
Blocks are standalone compositions — include them via `data-composition-src` in your host `index.html`:
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
Key attributes:
|
|
|
|
- `data-composition-src` — path to the block HTML file
|
|
- `data-composition-id` — must match the block's internal ID
|
|
- `data-start` — when the block appears in the host timeline (seconds)
|
|
- `data-duration` — how long the block plays
|
|
- `data-width` / `data-height` — block canvas dimensions
|
|
- `data-track-index` — layer ordering (higher = in front)
|
|
|
|
See [wiring-blocks.md](./references/wiring-blocks.md) for full details.
|
|
|
|
## Wiring components
|
|
|
|
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):
|
|
|
|
1. Read the installed file (e.g., `compositions/components/grain-overlay.html`)
|
|
2. Copy the HTML elements into your composition's `<div data-composition-id="...">`
|
|
3. Copy the `<style>` block into your composition's styles
|
|
4. Copy any `<script>` content into your composition's script (before your timeline code)
|
|
5. If the component exposes GSAP timeline integration (see the comment block in the snippet), add those calls to your timeline
|
|
|
|
See [wiring-components.md](./references/wiring-components.md) for full details.
|
|
|
|
## Discovery
|
|
|
|
Browse available items:
|
|
|
|
```bash
|
|
# Read the registry manifest
|
|
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
|
|
```
|
|
|
|
Each item's `registry-item.json` contains: name, type, title, description, tags, dimensions (blocks only), duration (blocks only), and file list.
|
|
|
|
See [discovery.md](./references/discovery.md) for details on filtering by type and tags.
|