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 22 of 511Show everything
Tools
- @hyperframes/aws-lambdaAdapter that splits a render into chunks on AWS Lambda with Step Functions: handler, client and CDK construct. Package description and the…
- @hyperframes/engineThe lower layer under the producer: turns a seekable web page into frames with Puppeteer and FFmpeg. Package description read only.
- @hyperframes/gcp-cloud-runThe same split render on Google Cloud Run with Workflows, plus a Terraform module. Package description and the example README read.
- @hyperframes/playerA web component that plays a HyperFrames composition inside any web page, with no dependencies.
- @hyperframes/producerThe full render pipeline as a library: capture frames with Chrome, encode with FFmpeg, mix audio, in one call. It also has the split-up…
- @hyperframes/sdkA headless engine for editing compositions from code, with no framework tied to it. Package description read only.
- @hyperframes/shader-transitionsA small library of 14 WebGL scene-to-scene transitions driven by a GSAP timeline: domain-warp, ridged-burn, whip-pan, sdf-iris…
- @hyperframes/shareShared code for review identity, version upload and sharing between HyperFrames hosts: the part behind publish and share links. Package…
- @hyperframes/studioThe browser editor behind hyperframes preview: timeline, code editor and live preview. README head read; not started.
- audio-duck.mjsPrints a volume lane that ducks music under speech, for a composition's audio element. Sends one telemetry event unless the switches are…
- audio.mjs (audio engine)One request file in, voice, music and sound effects out, by provider: HeyGen, ElevenLabs, Kokoro, Gemini, Google Lyria, local MusicGen…
- bake-basemap.mjsRecords a map camera move to MP4 with headless Chrome and MapLibre, plus country outlines as JSON. Fetches map tiles (Esri or Carto) and…
- carve.mjsCarves room for speech in a music bed and rewrites the audio attributes in the composition HTML. Loads @hyperframes/core from the project's…
- dither.mjsError-diffusion dither for an image or an MP4, with 16 named palettes. No network.
- extract-audio-data.pyWrites per-frame loudness and frequency-band data for an audio file, for beat-driven motion. No network.
- hyperframes CLIThe command-line tool (npm hyperframes 0.9.23): scaffold a project, lint, take stills, preview in a local Studio, and render HTML to MP4…
- internal packages (core, lint, parsers, inspector, studio-server, sdk-playgroundSix packages with no description of their own: the shared runtime and composition contract (core), the linter behind hyperframes lint…
- lint_source.py (Remotion source linter)Scans a Remotion project and lists what blocks a move to HyperFrames (useState, useEffect with deps, async calculateMetadata, React UI…
- locate.mjsFinds a point in an image by drawing numbered grids over it with ffmpeg. Its auto mode posts the image to Google if GEMINI_API_KEY is set.
- transcribe.mjsLocal transcription with word times: Parakeet if present, else the CLI's whisper. Downloads a model on first use (about 640 MB for…
- transcript-cut.mjsCuts a video or audio file by word timestamps from a transcript. Sends one telemetry event unless the switches are set to 1.
- verify-motion.mjsCompares the motion in a render against a reference export (Figma's own MP4) and fails under 15 dB. Described in the figma SKILL.md; the…