--- title: Video Components description: "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 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 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
``` 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