/hyperframes-registry

Registry discovery

Use the catalog command first

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

• Default output is a readable table. It does not install anything.
• --type accepts block or component; --tag may narrow either result.
• --json is the deterministic agent and CI surface. Select a name, then run npx hyperframes add <name>.
• --human-friendly opens a picker and installs the selected item immediately.

Read the registry manifest as a fallback

When the CLI is unavailable, the top-level registry.json lists all available items:

curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json

Each entry has name and type (hyperframes:example, hyperframes:block, or hyperframes:component).

Reading an item's manifest

Each item has a registry-item.json with full metadata:

<base>/<type-dir>/<name>/registry-item.json

Where <type-dir> is examples, blocks, or components.

Item manifest fields

Available items

Blocks

For an always-current list run npx hyperframes catalog --type block. The search is the source of truth; the tables below are a hand-maintained sample and under-cover by design — they group 97 of the registry's 180 blocks by category, so a block missing from them is not evidence the registry lacks it. Only an empty npx hyperframes catalog --query "<what you want>" --json is that evidence. Do not grow these tables toward the full set; search instead. Block name ≠ shader name: shader-transition blocks (e.g. domain-warp-dissolve) wrap a HyperShader runtime whose internal name omits the -dissolve/-warp suffix — see the showcase HTML installed alongside the block for the canonical name.

Shader transitions (14)

Single-shader blocks; each installs one HyperShader runtime + a showcase composition. Use ≤2 per video.

Transition galleries (13)

Showcase compositions grouping multiple CSS / GSAP transition styles by family. Use as reference for picking a CSS scene transition; not meant to embed as-is.

Liquid Glass (7)

WebGPU + html-in-canvas frosted-glass surfaces. Require Brave / Chrome canary with WebGPU enabled — set PRODUCER_HEADLESS_SHELL_PATH to point at the browser; engine auto-passes --enable-unsafe-webgpu. See /hyperframes-animation → adapters/typegpu.md.

VFX (6)

HTML-in-canvas + WebGL composition blocks. See /hyperframes-animation → adapters/three.md and adapters/html-in-canvas-patterns.md for the underlying APIs.

Showcases (6)

Story-driven showcase compositions — narrated YouTube-style inserts. Most include bundled SFX.

Maps + data viz (8)

D3 + GSAP animated geographies and charts.

Social overlays (7)

Platform-recognizable UI overlays. Stamp on top of a beat or use as a beat closer.

Branding + 3D UI (2)

Code snippets (24)

A code/terminal window that types a code or shell session per-character. Theme = visual chrome only; structure, wiring, and install are identical across all 24 — pick one by name, wire it like any block (data-composition-id + data-start + data-track-index, see wiring-blocks.md). Two chrome families:

Apple Terminal (12) — macOS Terminal.app window typing a shell session. Profile = window colors:

Code Animations (9)

The richer, motion-first counterpart to the static code-snippet-* window themes above: each is a self-contained 1920×1080 block (~5–8s) with a paused, deterministic GSAP timeline that animates code — typing, diffing, morphing, spotlighting, or GPU hero reveals — rather than typing a fixed snippet inside editor/terminal chrome. Reuse-first: npx hyperframes add <name>, then customize the baked code/diff content in place; hand-author only when no block covers the motion you need.

DOM / text reveal (6):

GPU / WebGL hero reveals (3): heavier, for a title-card / hero code moment.

Components