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 16 of 511Show everything
HTML to video
- Animated Bar ChartA compact data card with deterministic bar growth and value callouts. Paste-in snippet: it registers no timeline, you wire it into your own.
- Apple Money CountApple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound. Credited to Stronkter.
- Bar Chart RaceRanked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the accent handing over to…
- Chart StoryOne chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line with area fill, a…
- Conic Progress RingA token-driven conic progress ring whose angular fill and center count settle together from one registered percentage.
- Count UpA token-native stat counter that eases between values, counting up or down, and lands with a restrained scale pulse.
- Count-Up Stat CardBig-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes.
- Data ChartAnimated bar + line chart with staggered reveal, NYT-style typography, and value labels.
- Decline ChartA metric line draws downward as its value counts down and the ambient background darkens in lockstep.
- Hairline Arc GaugeThin circular gauge that draws on while its percentage counts up; one helper call drives both.
- Minimal Line GraphOne or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend.
- Number Pop InA transitions.dev-inspired digit pop-in with blur, lift, and staggered value reveal. Paste-in snippet: it registers no timeline, you wire…
- Number WheelA rolling digit counter primitive for metrics, prices, counts, and scoreboards. Paste-in snippet: it registers no timeline, you wire it…
- Slot Machine RollA vertical reel scrolls characters from one value to another. Paste-in snippet: it registers no timeline, you wire it into your own.
- Star Rating FillA token-driven star row whose colored layer sweeps to a rating, preserves the fractional final star, and can count the value in sync.
- Week in MergesEach author's avatar bounces across their row at a speed set by how many pull requests they merged.