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 17 of 511Show everything
HTML to video
- theme: boldDark purple-black ground, hot pink brand color, violet and cyan accents, Impact display type, quick 0.32 s beat with an overshoot ease. One…
- theme: editorialWarm paper ground, dark green-black ink, teal brand color, Georgia and Palatino serifs, slow 0.48 s beat. One 20-line CSS file that sets…
- theme: neutralLight gray ground, near-black ink, blue brand color, Inter throughout, 0.4 s beat. One 20-line CSS file that sets the 18 tokens the newer…
Starters
- frame preset: biennale-yellowWarm parchment, one deep indigo ink, solar yellow as bloom or panel, Instrument Serif with Archivo and JetBrains Mono, hairline rules, no…
- frame preset: blockframe4 px black borders, hard offset shadows, five candy pastels, Inter 800 uppercase with Space Grotesk labels, square corners, star bursts. A…
- frame preset: blue-professionalWarm cream canvas, one saturated cobalt accent, Space Grotesk and Inter, soft cobalt-tinted cards, pill labels, no shadows. A written…
- frame preset: bold-posterWhite, brown-black, tomato red and off-white; Shrikhand display tilted at poster scale, Libre Baskerville body, double-border grid. A…
- frame preset: broadsideInk black and fire orange, huge lowercase Barlow 900, IBM Plex Mono labels, flat, hairline dividers. A written design spec (FRAME.md) with…
- frame preset: capsulePill shapes with a 2 px ink outline, sun-bleached cream, nine candy colors, Bodoni Moda with Space Grotesk, grain overlay. A written design…
- frame preset: cartesianFive warm stone tones, Playfair Display with Inter, one taupe hairline as the only structure, compass-drawn rings, no fills. A written…
- frame preset: cobalt-gridCream paper, electric cobalt as the only ink, a permanent graph-paper grid, Newsreader serif with DM Mono, pixel-glitch marks. A written…
- frame preset: code-editorialWarm cream paper, a scarce terracotta coral, EB Garamond display, JetBrains Mono on a warm navy code surface, a coral spike mark. Very…
- frame preset: coralCoral, ink black and warm cream in hard splits, Bebas Neue uppercase, 45° hatch, big wallpaper numerals, no shadow, no radius. A written…
- frame preset: creative-modeWarm cream, 4 px ink borders, hard offset shadows, Archivo Black uppercase, JetBrains Mono labels, four accents. A written design spec…
- frame preset: daisy-daysSunny pastel garden palette with a coral accent, charcoal 3 px outlines, hard offset shadows, Fredoka with Quicksand, hand-drawn ornaments…
- frame preset: editorial-forestGreen, pink and cream, Source Serif 4 display with JetBrains Mono uppercase labels, flat paper, 2 px rules, a monogram stamp. A written…
Agent skills
- colour looks (teal-orange-blockbuster, bleach-bypass, film-fade)Three named color grades in a small catalog. No .cube files are in the repo: each look is downloaded from HeyGen's CDN when asked for, or…