hyperframes-registry
The facts
Its description
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
The description the agent reads to decide when to use it.
When it starts
A person making a HyperFrames video wants a ready-made visual effect (transition, lower third, title, caption style, chart, map, camera move, film grain, glitch) rather than hand-building it, or asks to search the catalog or run hyperframes add. Also used when someone contributes a new block or component to the registry.
Things a person might say (the model's guesses)
- “Is there a ready-made CRT scanline or glitch effect I can drop into my HyperFrames video?”
- “Add a bar chart race and a lower third to my video”
- “Search the hyperframes catalog for a caption style with a word-by-word wipe”
A model's summary of when it is used.
Files it mentions
references/search.md, references/wiring-blocks.md, references/wiring-components.md, references/install-locations.md, references/contributing.md, references/templates.md, references/component-quality-bar.md
Files the text names, such as ones to read or write. Found by matching words, so treat them as pointers.
What leads to it
- hyperframes calls this before hand-writing a named effect, transition, caption style, chart or card hyperframes, line 16
Other skills that hand off to this one, call it, require it or offer it instead, as a model read them.
Licence
Apache-2.0, from LICENSE
The terms its author shares it under, which let it be shown here.
Other files in this skill (10) Close
The text
Most marks come from matching words in the file, so treat them as pointers.
Plugin installs: Inside a HyperFrames plugin, follow plugin execution rules.
Usage beacon: run npx hyperframes events --skill=hyperframes-registry once as this skill starts. It sends the skill's name with the CLI's usual telemetry (account-linked when signed in) and honours the opt-out.
HyperFrames registry
Starting from an item is faster and usually better than writing the effect yourself, and an installed item is ordinary source in your project: change it, cut it down, restyle it.
Raw lines 1 to 13Find and install
There is no hyperframes registry command; searching is catalog, installing is add.
npx hyperframes catalog --query "<what the beat should do, in English>" --json
npx hyperframes add <name> --json # prints the written files and the mount snippet- Query in English even when the video is not: the catalog is indexed in English, and another script returns
No searchable words in query, which is not a gap. - Search is local and sends nothing. The default
wordstier only finds items that reuse your words;--on-deviceranks by meaning after a one-time ~33 MB download. Offer that download and let the person decide; never enable it silently. The--jsonenvelope names the tier that answered. - Narrow with
--type block|componentand--tag <tag>.add <tag>installs every block with that tag; dependencies install first.addneeds the network even for an item installed before; search works offline from the cached manifest. - Nothing fits: report it before you hand-build, on either tier.
catalog --queryprints the line pre-filled (report_gapin--json):npx hyperframes feedback --search-miss "<query>" --wanted "<the move you needed>" --tier <tier>. Describe the effect, not an item name you imagined.
Tiers, dropped and unindexed, stale indexes, offline behaviour: references/search.md.
What's in it
| Blocks: a scene with its own timeline | Examples |
|---|---|
| Transitions | beat-freeze-cut, chromatic-radial-split, cinematic-zoom |
| Overlays and lower thirds | camcorder-hud, editorial-flash-overlay, lt-clean-bar |
| Title cards and kinetic type | canopy-part-title, code-slice-hero |
| Social, chat and UI cards | ai-chat-reveal, chatgpt-exchange |
| Code, charts, data and maps | code-diff, bar-chart-race, data-chart |
| 3D, shader and backgrounds | app-showcase, aurora, blob |
| Components: a snippet merged into your scene | Examples |
|---|---|
| Motion primitives and text effects | agent-cursor, blur-in, bottom-up-letters |
| Caption styles | caption-clip-wipe, caption-editorial-emphasis |
| Camera moves | camera-shake, camera-scan-gate |
| Product demo and UI props | before-after-wipe, browser-device-stage |
| Textures, particles and effects | ascii-render-pass, grain-overlay |
Wiring
- Block: installs to
compositions/<name>.html. Mount it withdata-composition-src,data-composition-idmatching the block's own id,data-startand thedata-durationyou need; the snippetaddprints is the starting point.references/wiring-blocks.md. - Component: installs to
compositions/components/<name>.html. Copy its markup,<style>and script into your scene, and follow its comment block if it hooks into your timeline.references/wiring-components.md. - Take the largest unit that fits, then edit it. Keep an installed item's ids prefixed as they are, so two items can't collide.
- An item keeps its own variables; set them for one mount with
data-variable-valueson its host (add --vars '{"title":"…"}'writes that), and point its colour and font variables at your brand's. - Beat-synced blocks take hit times from
npx hyperframes beats --json: the beat times minus the mount'sdata-start. - Install paths come from
hyperframes.json(references/install-locations.md).
Contributing
Authoring a new block or component for an upstream PR: references/contributing.md, starter templates in references/templates.md, quality bar in references/component-quality-bar.md.
From heygen-com/hyperframes at a595755, 2026-11-07. Skills read by Claude Sonnet 5.5 on 2026-11-07. Summary and techniques by Claude Opus 5.5 on 2026-11-07.