# HyperFrames Registry — guide skill for tools & renderers

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

Pull any of ~450 ready-made blocks into a video as editable source: transitions, titles, captions, charts, 3D.

- **Type:** [Guide](https://skills.varg.ai/guides.md) · [Tools & renderers](https://skills.varg.ai/browse/skills/tooling.md)
- **Slug:** `hyperframes-registry`
- **Status:** live
- **Publisher:** HeyGen (vendor, verified)
- **License:** Apache-2.0
- **Source:** https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes-registry
- **Works in:** Claude Code, Codex, Cursor, Gemini CLI
- **Requires:** Node.js 22+
- **Cost:** Free — open-source, renders locally
- **Adoption:** 1,000,000 installs, 73,064 GitHub stars (skills.sh, 2026-10-26)

## What it does

Searches and installs HyperFrames registry items — about 450 blocks and components — with `npx hyperframes add` and `catalog`, then wires them into `index.html` as sub-compositions or merged snippets. It covers transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D and camera moves, plus the quality bar and steps for contributing a new block upstream.

## Use when

- A brief names a look or effect (glitch, film grain, CRT, a chart)
- Installing or wiring a registry block or component
- Contributing a new block to the registry

## Not for

- Hand-animating a one-off scene from scratch (use HyperFrames)

## Install

- Claude Code: `claude plugin marketplace add heygen-com/hyperframes && claude plugin install hyperframes@hyperframes`
- Codex: `npx skills add heygen-com/hyperframes --skill hyperframes-registry -a codex`
- Cursor: `npx skills add heygen-com/hyperframes --skill hyperframes-registry -a cursor`
- Gemini CLI: `npx skills add heygen-com/hyperframes --skill hyperframes-registry -a gemini-cli`

## Example output

https://skills.varg.ai/previews/hyperframes-registry.mp4 — Official docs loop: searching the registry catalog for 'macOS Notification' and dropping the block onto the timeline, where it appears in the video (credit: HeyGen (HyperFrames), https://hyperframes.heygen.com/studio/assets-and-blocks)

## Used for

- [SaaS launch or product promo](https://skills.varg.ai/use-cases/launch-video.md): A polished launch film for an app or website: UI cards, device mockups, kinetic type, music.
- [Logo animation / intro sting](https://skills.varg.ai/use-cases/logo-animation.md): Your logo animated into a short intro or outro: 3D chrome, liquid, shader, glitch or clean motion.
- [Animated chart or data video](https://skills.varg.ai/use-cases/data-video.md): Numbers from a CSV or a report as an animated chart: bar race, line, hero number.

## More tools & renderers skills

- [varg AI](https://skills.varg.ai/skills/varg-ai.md): The official varg skill: videos, images, speech and music through one API key, rendered in the cloud or locally.
- [Media Download](https://skills.varg.ai/skills/media-download.md): Save any video by link (X, YouTube, Instagram, TikTok, 1800+ sites) or Pinterest images as references, locally, no key.
- [Templates Gallery Ops](https://skills.varg.ai/skills/varg-templates-section.md): Internal runbook for the varg app Templates gallery: publish renders, preview clips, frame-0 posters, shelves.
- [HyperFrames CLI](https://skills.varg.ai/skills/hyperframes-cli.md): Drive the HyperFrames CLI: scaffold, check, preview, snapshot, edit the timeline, render locally or in the cloud.
- [HyperFrames Media Use](https://skills.varg.ai/skills/hyperframes-media-use.md): Find or make every asset a video needs: music, SFX, voiceover, images, logos, avatars, transcripts, grades.
- [Remotion to HyperFrames](https://skills.varg.ai/skills/remotion-to-hyperframes.md): Port Remotion, Lottie, Three.js, p5 or canvas animations into HyperFrames and verify them frame by frame.