Source: HeyGen HyperFrames catalog — transitions & shader effects (https://hyperframes.heygen.com/catalog), pulled 2026-06-27; pages archived under ai-research/hyperframes-block-*.md.
HyperFrames ships its scene-to-scene transitions and standalone GPU effects as installable catalog blocks — you don’t hand-write a shader, you npx hyperframes add <slug> and mount the result over the cut. This page is the per-item reference for the 27 transition-related catalog entries: 14 single-effect shader transitions (one GPU effect each, 4s) and 13 transitions-* showcase reels (each a demo composition bundling many variants of one family). It expands the two summary lines in hyperframes-block-catalog into a lookup table you can scan to choose an effect.
Key Takeaways
- Install with
npx hyperframes add <slug>. Each transition/effect is a block; the command writes onecompositions/<slug>.html(typedhyperframes:composition) into your project, which you then mount and can edit. - Mount as an overlay clip across the cut. Every block ships the same embed shape — a
<div>carryingdata-composition-id/data-composition-src,data-start,data-duration,data-track-index="1",data-width="1920"data-height="1080"— placed on overlay track 1 so the effect plays above the base content over a scene change. All entries are 1920×1080. - Two families ship. Single-effect shader transitions (14, tagged
transitionshader, 4s each) are one GPU effect per block. Transition showcases (13, thetransitions-*slugs, taggedtransitionshowcase, 11–24s) are demo reels that collect many variants of one motion family (3D, blur, push, dissolve, etc.). - Showcase = browse, single-effect = ship. ^[inferred] The
transitions-*reels are longer because they play several variants in sequence (duration scales with variant count); the 14 shader blocks are the 4s units you actually drop on a cut. - Catalog pages expose only the mount attributes (
data-start,data-duration,data-track-index, dimensions) — no shader uniforms/params are documented on the page. The installed HTML is local and editable afteraddif you need to tune the effect. - Reach for a shader transition for stylized, motion-heavy cuts (glitch, cinematic zoom, gravitational lens, ridged burn) and a geometric showcase family for cleaner editorial cuts (push/slide, cover, grid, scale). ^[inferred]
Transition Categories (transitions-*)
Shared across all 13 — identical except the family they demo and their runtime:
- Type Block · Dimensions 1920×1080 · Tags
transitionshowcase - Install
npx hyperframes add transitions-<x>→compositions/transitions-<x>.html - Mount (default
data-start="0"; setdata-durationto the value below):
<div data-composition-id="transitions-push"
data-composition-src="compositions/transitions-push.html"
data-start="0" data-duration="24"
data-track-index="1" data-width="1920" data-height="1080"></div>Each catalog page describes its family and shows the demo reel, but does not enumerate the individual transition clips by name — the named variants are demonstrated in the showcase video, not listed in the page text. The “Bundles” column below captures the transition types each page names; per-clip counts are inferred from runtime.
| Category page | add slug | Bundles (transition types named on the page) | Duration |
|---|---|---|---|
| 3D Transitions | transitions-3d | 3D perspective flip + rotate | 11s |
| Blur Transitions | transitions-blur | blur-based scene transitions | 20s |
| Cover Transitions | transitions-cover | cover / uncover slide | 21s |
| Destruction Transitions | transitions-destruction | destructive break-apart | 14s |
| Dissolve Transitions | transitions-dissolve | dissolve + fade | 24s |
| Distortion Transitions | transitions-distortion | warp + distortion | 21s |
| Grid Transitions | transitions-grid | grid-based tile | 11s |
| Light Transitions | transitions-light | light-based glow + flash | 21s |
| Mechanical Transitions | transitions-mechanical | mechanical shutter + iris | 15s |
| Other Transitions | transitions-other | miscellaneous creative | 20s |
| Push Transitions | transitions-push | push + slide | 24s |
| Radial Transitions | transitions-radial | radial wipe + reveal | 20s |
| Scale Transitions | transitions-scale | scale + zoom | 15s |
Standalone Shader / Effect Blocks
The 14 single-effect GPU transitions are near-identical in packaging — grouped here in one table rather than repeated per block. Shared across all:
- Type Block · Dimensions 1920×1080 · Duration 4s · Tags
transitionshader - Install
npx hyperframes add <slug>→compositions/<slug>.html - Mount (one line; same shape as above,
data-duration="4"):
<div data-composition-id="glitch" data-composition-src="compositions/glitch.html"
data-start="0" data-duration="4" data-track-index="1"
data-width="1920" data-height="1080"></div>| Block | add slug | Renders (per catalog description) |
|---|---|---|
| Chromatic Radial Split | chromatic-radial-split | chromatic-aberration radial split |
| Cinematic Zoom | cinematic-zoom | dramatic zoom blur |
| Cross Warp Morph | cross-warp-morph | cross-warped morphing |
| Domain Warp Dissolve | domain-warp-dissolve | fractal-noise domain warping |
| Flash Through White | flash-through-white | white-flash crossfade |
| Glitch | glitch | digital glitch artifacts |
| Gravitational Lens | gravitational-lens | gravitational-lensing distortion |
| Light Leak | light-leak | cinematic light-leak overlay |
| Ridged Burn | ridged-burn | ridged-turbulence burn |
| Ripple Waves | ripple-waves | concentric ripple-wave distortion |
| SDF Iris | sdf-iris | signed-distance-field iris reveal |
| Swirl Vortex | swirl-vortex | swirling vortex distortion |
| Thermal Distortion | thermal-distortion | heat-haze thermal distortion |
| Whip Pan | whip-pan | fast camera whip pan (simulated) |
Try It
- Drop a shader cut between two scenes.
npx hyperframes add glitch, then paste its<div>onto overlay track 1 withdata-startat the cut time anddata-duration="4". - Browse a family before committing.
npx hyperframes add transitions-dissolve(or anytransitions-*slug) installs the demo reel; preview it to see every variant of that family in sequence, then pick the single-effect block closest to what you want. - Scaffold, install, inspect, preview.
npx hyperframes init demo --example blank && cd demo && npx hyperframes add sdf-iris, opencompositions/sdf-iris.htmlto read the real shader HTML, thennpx hyperframes previewto watch it on the timeline. - Tune it. The installed
compositions/<slug>.htmlis yours — edit it directly to adjust an effect, since the catalog page exposes no parameters.