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 14 of 511Show everything
HTML to video
- Annotate CursorA marker pen glides onto the frame and hand-draws a loose loop, an underline, or an arrow around a region, the ink laid exactly under its…
- Arc Motion PathA GSAP MotionPath primitive that flies a callout along a curved arc with autorotation. Paste-in snippet: it registers no timeline, you wire…
- Feathered SpotlightDims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets.
- Hand-Drawn ArrowWobbled draw-on arrow with straight, gentle, and swoop curve poses, a four-way stroke texture matrix (plain/soft/sharp/spray), and a…
- Hand-Drawn Box LabelWobbled rounded rectangle draws on — across the authored stroke matrix (plain/soft/sharp/spray) — or drops in and lands with a volume-true…
- Inline HighlightA clean marker-style inline highlight that animates behind text using a CSS scale variable. Paste-in snippet: it registers no timeline, you…
- Marker HighlightDisplay text settles in, then one hand-drawn marker stroke (highlight, circle, underline, or scribble) draws over the emphasized word on…
- Outline DrawA rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure.
- Pointer Circle + CountdownDraw-on annotation ellipse around a target plus a countdown chip that pulses each tick.
- Scribble Callout CircleWobbled ellipse draws around a target with optional scribble fill and curved connector; the handwritten label pops in WITH momentum and the…
- Speech BubbleHand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils.
- Squiggle MarksHand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on.
- Tracing BeamA glowing dash follows one SVG path through three UI elements, lifting and brightening each element in sequence.
- Vox AnnotateThe Vox-style annotate gesture: a keyword in a held sentence gets a hand-drawn marker while a thin connector draws up to a mono callout…