🎯 What HyperFrames Is
HyperFrames is an open-source framework that transforms animated HTML pages into MP4 files, frame by frame, with complete precision. Official repository: heygen-com/hyperframes on GitHub.
HyperFrames treats the browser like a film camera. Each video frame is an exact capture of the DOM at the moment t — no screen codec, no loss of antialiasing, no flickering.
The result is an MP4 with browser-rendering quality: perfect fonts, vector SVG, and shadows and gradients without degradation.
- ✓ Open-source framework (MIT), free forever
- ✓ Runs 100% locally: no account, no API key
- ✓ Deterministic output: same HTML → same MP4
- ✓ Integrates with any JS library: GSAP, Three.js, D3
- ✗ It’s not a screen recorder (doesn’t capture external apps)
- ✗ It’s not a nonlinear video editor (no GUI timeline)
- ✗ Doesn’t depend on a cloud service
- ✗ Doesn’t use generative AI for images or voices
npx hyperframes.🔄 HTML → MP4
How an animated HTML page with GSAP becomes an MP4 video rendered frame by frame — the heart of HyperFrames.
One file index.html defines each scene with HTML/CSS. The animations are coded in GSAP inside a function anim() that receives t (time in seconds).
For each frame, HyperFrames calls anim(t) in the browser, waits for the DOM to stabilize, and triggers a high-resolution PNG screenshot. At 30 fps, that's 30 screenshots per second of video.
The PNGs are passed to FFmpeg, which encodes them in H.264 with the WAV audio generated by Kokoro TTS — producing the final MP4 with synchronized narration.
The resulting video is saved in renders/nome-16x9.mp4 or renders/nome-9x16.mp4, ready to upload to YouTube or Shorts.
Screen recording captures in real time—if the CPU is slow, the video comes out broken. HyperFrames controls time virtually: no frames are lost, regardless of the machine's speed.
🔊 Local TTS with Kokoro
PT-BR narration generated 100% on your machine, with the voice pf_dora, with no API key and no dependency on espeak-ng. Kokoro handles Portuguese phonetics.
Most open-source TTS engines use espeak-ng for phonemization — and espeak-ng is notoriously poor at Portuguese. Kokoro has its own PT-BR phonemizer, producing more natural speech without external dependencies.
- ✓ Write the text as if it were spoken (spell out acronyms)
- ✓ Use
--speed 0.98for a more natural voice - ✓ Measure each WAV with ffprobe before assembling
- ✓ Text files in
assets/txt/sN.txt
- ✗ Don’t install espeak-ng — Kokoro doesn’t use it, and it causes conflicts
- ✗ Don’t use a speed above 1.05 (metallic voice)
- ✗ Don’t forget to download the model on the 1st run (~340 MB)
- ✗ Don't use uppercase acronyms without spelling them out (e.g., "GSAP" → "jee-sap")
Beyond pf_dora (female, recommended default), there is pm_alex e pm_santa. The first run automatically downloads ~340 MB of the Kokoro model.
💻 All local, no API
HyperFrames runs entirely on the user’s machine — no cloud, no per-render cost, and no content sent to external servers.
SaaS video tools (Synthesia, HeyGen, Pictory) charge per rendered minute, and your slides and scripts are processed on third-party servers. With HyperFrames: zero cost per render, and no content leaves your machine.
| Aspect | HyperFrames | SaaS (Synthesia etc.) |
|---|---|---|
| Cost per video | R$ 0,00 | Monthly plan required |
| Content Privacy | 100% local | Uploads to servers |
| Visual customization | Unlimited HTML/CSS | Fixed templates |
| API key | Doesn’t need to | Required |
If you produce courses with sensitive content, internal code, or proprietary methodologies, keeping everything local is essential. Each render happens without requiring an internet connection.
📐 Two formats: 16:9 and 9:16
From the same HTML project, HyperFrames generates YouTube (1920×1080) and Shorts/Reels (1080×1920) with a single command-line flag.
The generator build-index.mjs accepts the flag --vertical. When passed, it rewrites the index.html at 1080×1920, and HyperFrames renders the vertical MP4 — without duplicating scene code.
node build-index.mjs (without a flag)node build-index.mjs --verticalUse --quality draft first to check individual frames quickly. Only then run --quality high for the final MP4 — saves time during iterations.
🧭 When to use HyperFrames
Explainer videos, technical tutorials, product onboarding — any situation where you want full control over the visuals and zero cost per render.
- ✓ Create explanatory videos about code or technical concepts
- ✓ Create step-by-step tutorials with precise animations
- ✓ Build product onboarding with its own brand design
- ✓ Need 16:9 AND 9:16 from the same content
- ✓ Want zero cost, even in high-volume production
- ✗ Need to capture real interactions in applications
- ✗ The video requires a talking-head camera (realistic avatar)
- ✗ Complex nonlinear editing (Adobe Premiere / DaVinci)
- ✗ No Node.js available in the environment
Animated slides with code, diagrams, and local narration. Same quality every time, with no platform variation.
Welcome videos and feature tours with the brand’s premium dark design — without relying on designers or SaaS.
Product teaser in 9:16 for Reels and 16:9 for YouTube — generated from the same HTML in minutes.
If you can describe the video as "slides with animations + narration," HyperFrames is the right tool. If you need a live camera or app capture, use screencast.
📋 Module 2.1 summary
- ✓ HyperFrames is open source, local, MIT — no cost per render
- ✓ Stack: headless Chrome captures frames + FFmpeg encodes MP4
- ✓ HTML + GSAP → function
anim(t)→ frames → MP4 - ✓ Kokoro TTS:
pf_dora --speed 0.98, no espeak-ng, no key - ✓ 16:9 (1920×1080) and 9:16 (1080×1920) from the same project
- ✓ Ideal for explainers, tutorials, and onboarding with custom design
npx hyperframes init.