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 37 of 511Show everything
HTML to video
- Beat TimelineA paused master-timeline orchestration spine that pins titled beat rows to evenly spaced named labels. Each row enters on its label, holds…
- Circle Carousel 1Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 1); 12 image slots. Credited…
- Circle Carousel 2Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 2); 12 image slots. Credited…
- Circle Carousel 3Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 3); 12 image slots. Credited…
- Circle Carousel 4Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 4); 12 image slots. Credited…
- Circle Carousel 5Image cards ride a circle with a size gradient by depth angle, sweeping in fast-slow-fast swings (Circle style 5); 12 image slots. Credited…
- Constellation HubFeature nodes brighten in narration order as real-length SVG connectors draw outward from a fixed central hub, then settle into one lockup.
- Grid Card AssembleN capability cards (thin-line icon that draws on, mono label, optional muted body) stagger-assemble into a grid or vertical list with a…
- Keyframe Scrub StackA keyframe-sequenced stack of cards with offset timing and easing presets. Paste-in snippet: it registers no timeline, you wire it into…
- Locked Nucleus OrbitA fixed center nucleus anchors deterministic satellite orbits that settle into a composed lockup.
- Marker Checklist CardA hand-lettered paper card: marker headline with an underline and a drawn ellipse around one word, then three checklist rows whose checks…
- Orbit Carousel 1Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 1); 24 image slots…
- Orbit Carousel 2Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 2); 24 image slots…
- Orbit Carousel 3Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 3); 24 image slots…
- Orbit Carousel 4Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 4); 24 image slots…
- Orbit Carousel 5Image cards on a spinning 3D Fibonacci sphere, billboarded to the camera, sized by camera distance (Orbit style 5); 24 image slots…
- Path Carousel 1Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 1); 24 image…
- Path Carousel 2Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 2); 12 image…
- Path Carousel 3Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 3); 12 image…
- Path Carousel 4Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 4); 24 image…
- Path Carousel 5Image cards ride an open bezier path (arc, V, diagonal, wave, S-curve) with depth scaling and tangent rotation (Path style 5); 24 image…
- Radial SurroundLabeled hairline chips assemble around a centered subject on an elliptical ring, then optionally converge inward with a subtle edge dim…
- Rounded Media GridN-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow…
- Screen Flow CarouselTwo to five app screens ride a horizontal rail: one primary at center, neighbors receded, advancing on cues with a velocity-matched throw…
- SeparatorA one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal. Paste-in snippet: it registers no…
- Specs ChecklistLeft-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes.
- Spring Stack ShuffleA stack of 3 to 5 slotted cards reshuffles on cues: the back card throws over the top and lands at the front with real mass, the rest…
- Stagger CascadeA responsive grid of tile cards that fades and travels into place with an evenly spaced per-item GSAP stagger. The ordered cascade is the…
- Stagger LatticeA staggered grid reveal inspired by Anime.js v4 stagger utilities, implemented with GSAP for HyperFrames. Paste-in snippet: it registers no…
- State Chip RailA rail of mono status chips advances a seek-safe data-state snap machine on a cue schedule: active chip ink on surface, done chips dim…
- Sticky Mock SwapA pinned product mock cross-fades through accent-tinted feature states while matching captions rise, hold, and exit beside it.
- Velocity Throw SnapA five-shot rail whips past on a fast decaying curve, then overshoots and snaps the selected hero shot exactly to center.
- Vision Carousel 1A ring of large image cards tilted into a row under a 3D camera, each card turning toward the center (Vision style 1); 12 image slots…
- Vision Carousel 2A ring of large image cards tilted into a row under a 3D camera, each card turning toward the center (Vision style 2); 12 image slots…
- Vision Carousel 3A ring of large image cards tilted into a row under a 3D camera, each card turning toward the center (Vision style 3); 12 image slots…
- Vision Carousel 4A ring of large image cards tilted into a row under a 3D camera, each card turning toward the center (Vision style 4); 12 image slots…
- Vision Carousel 5A ring of large image cards tilted into a row under a 3D camera, each card turning toward the center (Vision style 5); 12 image slots…