Jonathon's AI Wiki

HyperFrames Block Catalog

8 min read

Source: HyperFrames catalog index (llms.txt), Examples, Data Chart, X Post Card, SDF Iris — HeyGen HyperFrames docs

The HyperFrames catalog is the prebuilt registry you assemble videos from instead of authoring every effect by hand. It ships two kinds of item: blocks — drop-in, parameterized sub-compositions you install with npx hyperframes add <name> (a shader transition, a social card, a lower third, a chart) — and examples — whole starter projects you scaffold with npx hyperframes init --example <name>. This page inventories what ships and dissects how a block is wired into a composition. For the framework, skills, and rendering pipeline see the HeyGen Hyperframes hub.

Key Takeaways

  • Two catalog item types. Blocks (npx hyperframes add) are installable pieces dropped into one composition; examples (npx hyperframes init --example) are full starter projects. Don’t confuse them — different commands, different scope.
  • Assembly from parts is the workflow. The agent picks blocks from the catalog and wires them onto timeline tracks, rather than hand-coding a shader or chart each time. This is the catalog’s whole reason to exist.
  • add copies HTML into your project. npx hyperframes add data-chart writes compositions/data-chart.html (a hyperframes:composition) into the current project — it’s yours to edit afterward.
  • Blocks mount as timed sub-compositions. You reference an installed block from a host composition with a <div> carrying data-composition-id, data-composition-src, data-start, data-duration, data-track-index, data-width, data-height.
  • Each block ships a native size + default duration. Most are 1920×1080; durations vary by purpose — Data Chart 15s, X Post Card 5s, SDF Iris 4s. You override per-instance via data-start / data-duration.
  • The catalog is large and growing. The 2026-06-26 llms.txt index lists 100+ blocks spanning shader transitions, transition showcases, social overlays, lower thirds, code blocks + editor themes, data viz + maps, VFX/3D/device, and frosted-glass UI components. The hub’s “50+ blocks” figure is already out of date.
  • Nine starter examples. warm-grain, play-mode, swiss-grid, kinetic-type, decision-tree, product-promo, nyt-graph (landscape), vignelli (portrait), and blank.

How blocks work

The block lifecycle is browse → add → mount:

  • Browse. The web catalog lives at hyperframes.heygen.com/catalog; the machine-readable index (every block + one-line description) is at hyperframes.heygen.com/llms.txt. From the terminal, npx hyperframes catalog lists the registry. ^[inferred — the catalog subcommand is not shown on the fetched block/examples pages; it is documented on the HyperFrames CLI. The web catalog URL and the llms.txt index are confirmed sources.]
  • Add. npx hyperframes add <name> installs the block into the current project. Per each block’s Files table, it writes a single composition file into compositions/<name>.html, typed as hyperframes:composition. After install the HTML is local and editable.
  • Mount. Reference the installed block from a host composition (e.g. index.html) with a <div> of data-* attributes. The block then renders as a timed sub-composition on a track — the same composition data model documented in HyperFrames Core Concepts.

Because every block is just HTML + a registered GSAP timeline, an added block is indistinguishable from one you wrote yourself — you can open it, restyle it, and re-time it.

Anatomy of a block

The three blocks fetched for this page show the consistent shape every catalog block follows: a one-line description, tags, an add command, a Details table (Type / Dimensions / Duration), a Files table (source → target), and a Usage snippet.

Blockadd commandTagsDimensionsDefault durationInstalls to
Data Chartnpx hyperframes add data-chartdata chart statistics1920×108015scompositions/data-chart.html
X Post Cardnpx hyperframes add x-postsocial overlay twitter1920×10805scompositions/x-post.html
SDF Irisnpx hyperframes add sdf-iristransition shader1920×10804scompositions/sdf-iris.html

Mounting each into a host composition uses the same attribute vocabulary, only the id, source, and duration change:

<!-- 15s data chart on track 1 -->
<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>
 
<!-- 5s X post overlay -->
<div data-composition-id="x-post"
     data-composition-src="compositions/x-post.html"
     data-start="0" data-duration="5"
     data-track-index="1" data-width="1920" data-height="1080"></div>
 
<!-- 4s shader iris transition -->
<div data-composition-id="sdf-iris"
     data-composition-src="compositions/sdf-iris.html"
     data-start="0" data-duration="4"
     data-track-index="1" data-width="1920" data-height="1080"></div>

What each attribute does:

  • data-composition-id — the block’s identifier (matches the catalog slug).
  • data-composition-src — path to the installed composition HTML.
  • data-start — when the block enters, in seconds on the host timeline.
  • data-duration — how long it plays; seed it from the block’s default duration, then tune.
  • data-track-index — which track (layer) it sits on — higher tracks stack over lower ones.
  • data-width / data-height — render resolution for the sub-composition.

The attribute set is the same one documented in HyperFrames HTML Schema; a block is just a pre-authored composition you point a track at.

Catalog inventory

Grouped from the live llms.txt index (fetched 2026-06-26). The catalog evolves — treat counts as a snapshot and run npx hyperframes catalog for the current set. ^[inferred — currency caveat; the listing itself is extracted from llms.txt]

  • Shader transitions (14) — single-effect GPU transitions: Chromatic Radial Split, Cinematic Zoom, Cross Warp Morph, Domain Warp Dissolve, Flash Through White, Glitch, Gravitational Lens, Light Leak, Ridged Burn, Ripple Waves, SDF Iris, Swirl Vortex, Thermal Distortion, Whip Pan.
  • Transition showcases (13) — transitions-* demo reels collecting many variants per family: 3D, Blur, Cover, Destruction, Dissolve, Distortion, Grid, Light, Mechanical, Other, Push, Radial, Scale.
  • Social overlays — platform-styled cards and follow/subscribe CTAs: Instagram Follow, TikTok Follow, YouTube Lower Third (subscribe), Reddit Post Card, X Post Card, Spotify Now Playing, macOS Notification, Blue Sweater Intro Video (creator intro that resolves into an X follow card).
  • Lower thirds — name/role chyrons. lt-*: Accent Underline, Bold Block, Clean Bar, Color Block, Dark Card, Kicker Name, Mask Reveal, Side Rule, Soft Pill, Stack Bars. Broadcast: BILD Style, News Ticker.
  • Code blocks (code-*) — animated treatments: 3D Extrude, Diff, Highlight Sweep, Morph, Particle Assemble, Scroll To Line, Shader Dissolve, Typing, Snippet Flight; snippet themes (code-snippet-*): Apple Terminal (Basic, Clear Dark, Clear Light, Grass, Homebrew, Man Page, Novel, Ocean, Pro, Red Sands, Silver Aerogel, Solid Colors) plus editor themes (Dark 2026, Dark Modern, Dark+, Light 2026, Light Modern, Light+, High Contrast, High Contrast Light, Monokai, Solarized Light, Visual Studio Dark, Visual Studio Light).
  • Data viz / diagrams — Data Chart, Flowchart, Flowchart Vertical; maps: US Map, US Bubble Map, US Flow Map, US Hex Grid Map, World Map, Spain Map, North Korea Locked Down (map zoom), NYC→Paris Flight (route animation).
  • VFX / 3D / device — device models: iPhone & MacBook 3D Showcase, iOS 26 Liquid Glass Home Screen, macOS Tahoe Liquid Glass Desktop, App Showcase (floating phones), VPN YouTube Spot; VFX: Liquid Glass, Liquid Background, Magnetic, Portal, Shatter, VFX Text Cursor; cinematic: Logo Outro, 3D UI Reveal, Apple Money Count (finance counter).
  • Components / overlays — frosted-glass UI panels: Liquid Glass Context Menu, Liquid Glass Media Controls, Liquid Glass Notification, Liquid Glass Widgets. (The project-supplied inventory also lists Grain Overlay, Grid Pixelate Wipe, and Shimmer Sweep — these were not returned by the 2026-06-26 live llms.txt fetch, so they may have been renamed or removed; verify against the live catalog.)

Examples are full starter projects, not single blocks — scaffold one with npx hyperframes init my-video --example <name>. Each lands with the correct composition structure, data attributes, and a wired GSAP timeline.

  • warm-grain — cream-toned, grain texture; lifestyle/branding/editorial (landscape).
  • play-mode — playful elastic motion; social media, product launches (landscape).
  • swiss-grid — structured Swiss/International-Typographic grid; corporate, data, technical (landscape).
  • kinetic-type — dramatic kinetic typography; promos, intros, title cards (landscape).
  • decision-tree — animated branching flowchart; explainers, tutorials (landscape).
  • product-promo — multi-scene showcase with SVG assets; product demos (landscape).
  • nyt-graph — print-editorial animated chart; data stories, reports (landscape).
  • vignelli — bold red-accent typography, 1080×1920 portrait; headlines, announcements.
  • blank — empty scaffolding only; full control / agent-generated builds.

Notes:

  • Source video. npx hyperframes init my-video --example warm-grain --video ./my-clip.mp4 probes the clip for duration/resolution/codec and auto-transcodes to H.264 MP4 (via FFmpeg) if the codec is incompatible.
  • Custom examples. Any directory with an index.html works as an example, provided it has a data-composition-id root element, a GSAP timeline registered on window.__timelines, and its assets alongside; validate with npx hyperframes lint.
  • Examples vs Showcase. Examples are minimal scaffolds to start from; the separate Showcase is finished HeyGen production projects, open-sourced to read and remix.

Try It

  • Scaffold and inspect a block end-to-end: npx hyperframes init demo --example blank, then cd demo && npx hyperframes add sdf-iris. Open compositions/sdf-iris.html to see a real block’s HTML + timeline.
  • Mount it: paste the sdf-iris <div> (above) into index.html, then npx hyperframes preview to watch the transition on the timeline.
  • Build a stacked overlay scene: add data-chart on data-track-index="1" and lt-clean-bar (a lower third) on a higher track to confirm track layering.
  • Pull the current registry before composing: open hyperframes.heygen.com/llms.txt (or npx hyperframes catalog) so the agent picks from the live block set, not a stale list.

Open Questions

  • The project-supplied inventory lists Grain Overlay, Grid Pixelate Wipe, and Shimmer Sweep, which the live llms.txt fetch (2026-06-26) did not return — renamed, removed, or fetch artifact? Unresolved.
  • Do blocks accept content/props beyond timing (e.g. passing chart data, post text, or follower counts into Data Chart / X Post Card), or is per-instance content edited directly in the installed HTML? Not specified on the fetched block pages.

Graph View

Backlinks