> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes.heygen.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Video Components
> Install production-ready video blocks and components from the HyperFrames catalog with one command — or contribute your own.
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.
```bash Terminal theme={null}
npx hyperframes add x-post
```
## Browse the catalog
Typing, diff, morph, highlight, scroll, and GPU 3D/particle/shader code reveals
15 caption styles — karaoke, kinetic slam, neon, gradient, glitch, emoji pop
X posts, TikTok / Instagram follow cards, Reddit, Spotify, lower thirds
14 WebGL transitions — whip pan, glitch, light leak, vortex, iris, burn
HTML-in-canvas effects — iOS 26 glass, device frames, portals, shatter, magnetic
Animated charts and US / world / region maps with bubbles, flows, and hexes
13 zero-dependency transitions — 3D, blur, cover, dissolve, push, radial
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](/catalog/blocks/data-chart) tab.
## Blocks vs components
The catalog ships two kinds of item, installed the same way but wired differently:
| | **Blocks** | **Components** |
| --------------------------- | ---------------------------------------- | ----------------------------------------------------- |
| What it is | A full standalone scene | A reusable snippet / effect |
| Has its own size & duration | Yes | No — adapts to the host |
| Installs to | `compositions/.html` | `compositions/components/.html` |
| Wired by | `data-composition-src` on a host element | Pasting its HTML / CSS / JS into your composition |
| Examples | `x-post`, `data-chart`, `code-morph` | `grain-overlay`, `caption-highlight`, `shimmer-sweep` |
## Install and wire
Browse the [Catalog](/catalog/blocks/data-chart) tab, or have your AI agent consult the registry — every item lists its name, description, tags, dimensions, and duration.
```bash Terminal theme={null}
npx hyperframes add data-chart
```
The CLI writes the files and prints a snippet to paste into your host composition.
Blocks are standalone compositions — include them with `data-composition-src` and a timeline position:
```html index.html theme={null}
```
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.
The full idea → scaffold → build → validate → preview → ship workflow, the `registry-item.json` schema, the rules, and the quality bar
No code needed — share a visual reference and tag it component-request
## Next Steps
How blocks nest into a host composition
Parameterize an installed block to stay on-brand
Design → plan → layout → build → validate → render
Add your own block or component to the registry