Skip to main content
The HyperFrames catalog is a registry of 50+ production-ready video components — captions, code animations, social overlays, shader transitions, data viz, and more. Each one installs into any project with a single command and renders to a deterministic MP4. Don’t rebuild a scene from scratch — install the one that already exists.
Terminal
npx hyperframes add x-post

​
Browse the catalog

Code Animations

Typing, diff, morph, highlight, scroll, and GPU 3D/particle/shader code reveals

Captions

15 caption styles — karaoke, kinetic slam, neon, gradient, glitch, emoji pop

Social Overlays

X posts, TikTok / Instagram follow cards, Reddit, Spotify, lower thirds

Shader Transitions

14 WebGL transitions — whip pan, glitch, light leak, vortex, iris, burn

Liquid Glass & VFX

HTML-in-canvas effects — iOS 26 glass, device frames, portals, shatter, magnetic

Data

Animated charts and US / world / region maps with bubbles, flows, and hexes

CSS Transitions

13 zero-dependency transitions — 3D, blur, cover, dissolve, push, radial

Code Snippets

24 syntax-highlighted code cards and Apple-terminal themes
Plus Effects (grain, vignette, shimmer, parallax), Text Effects (morph text, texture mask), and Showcases — browse them all under the Catalog tab.

​
Blocks vs components

The catalog ships two kinds of item, installed the same way but wired differently:
BlocksComponents
What it isA full standalone sceneA reusable snippet / effect
Has its own size & durationYesNo — adapts to the host
Installs tocompositions/<name>.htmlcompositions/components/<name>.html
Wired bydata-composition-src on a host elementPasting its HTML / CSS / JS into your composition
Examplesx-post, data-chart, code-morphgrain-overlay, caption-highlight, shimmer-sweep

​
Install and wire

1

Find it

Browse the Catalog tab, or have your AI agent consult the registry — every item lists its name, description, tags, dimensions, and duration.
2

Add it

Terminal
npx hyperframes add data-chart
The CLI writes the files and prints a snippet to paste into your host composition.
3

Wire a block

Blocks are standalone compositions — include them with data-composition-src and a timeline position:
index.html
<div
  data-composition-id="data-chart"
  data-composition-src="compositions/data-chart.html"
  data-start="0"
  data-duration="15"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>
4

Wire a component

Components are snippets — paste their HTML into your composition’s markup, their CSS into your styles, and any JS into your script, then hook their timeline calls into yours.
Using an AI agent? Install the HyperFrames skills with npx skills add heygen-com/hyperframes and ask it to “add a chart block” — the /hyperframes-registry skill discovers, installs, and wires the catalog item for you.

​
Contribute a video component

Your agent already knows how to build video components — it writes HTML, HyperFrames renders it. The registry is where that work ships to every HyperFrames user. Spotted a caption style on TikTok that doesn’t exist yet, or built a transition worth sharing? Add it to the catalog.
Quick version — Fork the repo. Write one HTML file with a paused GSAP timeline. Add registry-item.json. Run hyperframes lint + validate. Publish with npx hyperframes publish. Open a PR.
Every item is a single self-contained HTML file with a paused GSAP timeline — no build step, no framework. It must be deterministic (seeded randomness only, no Date.now() / Math.random()), register its timeline on window.__timelines, and meet the production-quality bar.

Contributing to the Catalog

The full idea → scaffold → build → validate → preview → ship workflow, the registry-item.json schema, the rules, and the quality bar

Open a component request

No code needed — share a visual reference and tag it component-request

​
Next Steps

Compositions

How blocks nest into a host composition

Variables

Parameterize an installed block to stay on-brand

The Pipeline

Design → plan → layout → build → validate → render

Contributing to the Catalog

Add your own block or component to the registry