HyperFrames
heygen-com/hyperframes · Apache-2.0 · 511 entries
HeyGen's open-source way to make video from HTML. You write a web page with one paused GSAP timeline, and its command-line tool renders it frame by frame. It comes with 456 ready-made blocks and components, nine agent skills, and the tools around them.
- Get it
npm install hyperframes@0.9.23 --ignore-scripts export DO_NOT_TRACK=1 HYPERFRAMES_NO_TELEMETRY=1 HYPERFRAMES_NO_UPDATE_CHECK=1 HYPERFRAMES_NO_AUTO_INSTALL=1 HYPERFRAMES_SKIP_SKILLS=1The second line stops it reporting each command to HeyGen and checking for updates. For one block, copy its folder from the repo, or run: npx hyperframes add <name>
- Needs
Node 22, FFmpeg and a headless Chrome (it downloads one on first render unless you point it at yours). Pages load GSAP and fonts from the network at render time unless you make them local. The WebGPU blocks want a GPU. A HeyGen sign-in only for cloud render, publish and generated media.
- Sends off your machine
Out of the box it sends a usage event to HeyGen for every command and checks GitHub and npm for updates. The five switches in the second line above turn that off. One command, "hyperframes usage", reads your coding agent's login token and no switch stops it, so skip that one. Publish, cloud render and feedback send your project or your words to HeyGen, only when you run them.
- We watched it run
A 6-second film written by hand rendered in 16 seconds, with no browser download.
A news overlay (a stat plate, a source chip, a name plate) rendered in 17 seconds, to MP4 and to a MOV with a clear background that sits over footage.
Three registry blocks drew right the first time: a chart, a lower third, a code diff.

The whip-pan transition block rendered, but it is a demo card. It proves the shader runs, not what the cut looks like on real scenes.
- Not tried here
Cloud render, publish, the two Pro skills, and most of the 456 blocks were read, not run.
- License
Apache-2.0
That covers the code. Some things inside are under other terms: GSAP has its own no-charge license, the bundled sound effects are under Pixabay's, and many blocks imitate other companies' interfaces. The code is free to use. The brands are theirs.
Everything in it
Showing 51 of 511Show everything
HTML to video
- 3D TransitionsShowcase of 3D perspective flip and rotate transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Beat Freeze CutA beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.
- Blur TransitionsShowcase of blur-based transitions between scenes. A reel of several transitions, not one drop-in: lift the one you want.
- Chromatic Aberration WipeA fast slide wipe with RGB channel split on peak frames. Paste-in snippet: it registers no timeline, you wire it into your own.
- Chromatic Radial SplitDemo card for the chromatic-split shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is…
- Cinematic ZoomDemo card for the cinematic-zoom shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is…
- Cover TransitionsShowcase of cover/uncover slide transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Cross Warp MorphDemo card for the cross-warp-morph shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is…
- Curtain RevealTwo pleated stage curtains gather outward from center, the way real velvet bunches at the tieback, revealing the stage underneath. A static…
- Cut the CurveA velocity-matched directional hard cut: the outgoing subject accelerates with power4.in, swaps at peak velocity, and the incoming subject…
- Destruction TransitionsShowcase of destructive break-apart transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Directional WipeA directional scene push that slides one panel over another. Paste-in snippet: it registers no timeline, you wire it into your own.
- Dissolve TransitionsShowcase of dissolve and fade transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Distortion TransitionsShowcase of warp and distortion transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Domain Warp DissolveDemo card for the domain-warp shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not…
- Fade ThroughA calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer. Paste-in snippet: it registers no…
- Flash Through WhiteDemo card for the flash-through-white shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card…
- GlitchDemo card for the glitch shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a…
- Gravitational LensDemo card for the gravitational-lens shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card…
- Grid Pixelate WipeTransition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes. Paste-in…
- Grid TransitionsShowcase of grid-based tile transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Halftone DissolveScene A dissolves into scene B through a growing halftone dot field: accent ink dots pop onto a fixed grid smallest-first, each opens into…
- Iris RevealA circle clip-path opens from an authored origin revealing state B over state A in one confident pass, then holds on B. Classic register…
- Light LeakDemo card for the light-leak shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a…
- Light TransitionsShowcase of light-based glow and flash transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Match CutA circle accelerates into a hard single-frame scene swap, matches the incoming circle exactly, and continues into a smaller resting pose.
- Mechanical TransitionsShowcase of mechanical shutter and iris transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Morph SwapTwo slotted siblings stacked at one shared center: A holds, then condenses or reshapes into B on a shared 50% 50% transform origin…
- Other TransitionsShowcase of miscellaneous creative transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Page SlideA transitions.dev-inspired page slide primitive with outgoing and incoming panels. Paste-in snippet: it registers no timeline, you wire it…
- Paper Collage RevealA scrapbook patchwork of torn paper scraps, each with its own texture and tilt, flutters away in a staggered scatter to reveal the content…
- Parallax Device DiveA canonical phone rises into view before the camera pushes through its screen and layered app UI expands to fill the frame.
- Parallax UnzoomReveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom). Paste-in…
- Parallax ZoomCenter card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition. Paste-in snippet…
- Push TransitionsShowcase of push and slide transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Radial TransitionsShowcase of radial wipe and reveal transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Ridged BurnDemo card for the ridged-burn shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not…
- Ripple WavesDemo card for the ripple-waves shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not…
- Rubber Band BumperAn outgoing panel pulls against increasing resistance, holds at tension, then snaps past an edge with overshoot as the incoming panel…
- Scale TransitionsShowcase of scale and zoom transitions. A reel of several transitions, not one drop-in: lift the one you want.
- Scribble TransitionOverlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears.
- SDF IrisDemo card for the sdf-iris shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a…
- Swirl VortexDemo card for the swirl-vortex shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not…
- Text Clone Wall TransitionOverlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while…
- Text Match CutOne line of text becomes another mid-move: both ride a single 85 % easy-ease curve and hard-swap at the speed peak, as scale, tracking, or…
- Thermal DistortionDemo card for the thermal-distortion shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card…
- Torn Paper RipA fibrous paper tear runs across the frame: the torn sheet shows its white paper core along the edge and lifts away on a soft shadow…
- Type Match CutA headline splits vertically around an incoming panel, which grows from the negative space and takes the frame as the words exit through…
- Whip PanDemo card for the whip-pan shader transition: two flat-color sample scenes blended by the shader, beside a label panel. The card is not a…
- Whip Pan CutA full-frame whip pan: scene A whips off laterally with capped directional motion blur while scene B enters in the same direction at…
- Zoom Through TransitionA transition that zooms through a focal card into the next scene.