Score
9.3
/ 10
Installs
1M
Repo Stars
79.1K
Last Updated
0d ago
Quality Ratio
96%
Description
Verified
Language
TypeScript
First Published
Apr 2026
Summary
The Hyperframes Registry agent skill helps developers install and integrate pre-built UI blocks and interactive components into Hyperframes compositions, streamlining development workflows. This is particularly useful for frontend developers building animations or interactive web experiences using the Hyperframes framework who need to leverage reusable UI elements. This agent skill is a niche skill with a smaller but dedicated user base. It guides the agent on using `hyperframes add` to fetch 'blocks' (standalone sub-compositions) or 'components' (effect snippets) from the registry, providing details on configuring install locations and discovering available items. The skill further provides explicit instructions for wiring these items into an `index.html` file, differentiating between using `data-composition-src` for blocks and merging HTML, CSS, and JavaScript for components. A notable limitation is that `hyperframes add` is specifically for blocks and components, not for installing full examples, which require the `hyperframes init --example` command.
Skill Definition
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.
Find 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.