Get Started
← Creator toolkit · Mission 12 of 13

Write a web page, get a video: make Reels and explainers with HTML

HyperFrames turns one ordinary HTML file into a real MP4. Get any AI chatbot to write the file, watch it in your browser, then render vertical videos on your own laptop. Free, open source (Apache 2.0) and no account.

35 minBeginnerTools: FreeStep 1 free
Tested 9 Oct 2026 · HyperFrames 0.8.143, Node 26.7, FFmpeg 9.0.2, Chrome Headless Shell 152, Windows 11
An 11-second vertical (1080x1920) "3 tips" video with animated text, your photo, a progress bar and music, rendered to MP4 on your own laptop
A ready-to-paste prompt that gets any AI chatbot to write the video for you
A live preview in your browser (HyperFrames Studio) with a timeline you can scrub
  • One command that turns a short list into a folder of finished versions
Before you start
  • Windows, Mac or Linux, with about 600MB of free disk space (around 320MB of npm downloads plus 270MB for HyperFrames' own copy of Chrome)
  • Node.js 22 or newer, and FFmpeg. Step 1 shows how to check and install both
  • Any AI chatbot you already use (ChatGPT, Claude, Gemini and so on), and a plain text editor (Notepad, TextEdit or VS Code)
  • A photo for the video. Music is optional
  • Helpful but not required: Level 0's terminal survival kit
● What you'll have in 35 minutes
Preview
What you'll make in step 6: three finished versions from one batch command, playing side by side (sound removed for this preview). One HTML file, three titles and colours.
01/06Check you have Node.js and FFmpeg0 done
STEP 01 of 06~5 min

Check you have Node.js and FFmpeg

HyperFrames runs on Node.js and uses FFmpeg to stitch frames into an MP4. Its own checker tells you if anything's missing.

  1. HyperFrames is a free tool from HeyGen (the AI video company) that makes videos out of web pages. You write a normal HTML page, add a few labels saying when each part appears, and HyperFrames films it frame by frame in a hidden Chrome browser. Everything runs on your laptop. HeyGen also sells optional cloud services, but its docs say local rendering is free and uses no HeyGen credits, and you never need an account for this mission.

  2. Open a terminal (PowerShell on Windows, Terminal on Mac or Linux) and check for Node.js. HyperFrames needs version 22 or newer:

    Terminal
    node --version
    Output
    v26.7.0

  3. If you get an error, or a number below 22, install Node.js from nodejs.org ↗ (the LTS version) or with one command. Then install FFmpeg the same way, and open a new terminal afterwards:

    Windows
    winget install --id OpenJS.NodeJS.LTS -e
winget install --id Gyan.FFmpeg -e
    Mac (Homebrew)
    brew install node ffmpeg

  4. On Linux, install Node.js 22 or newer using the commands nodejs.org/en/download ↗ gives for your system, then FFmpeg from your package manager:

    Linux (Ubuntu / Debian)
    sudo apt install ffmpeg

  5. Now let HyperFrames check your machine. npx downloads it the first time (about 15 seconds) and runs it without installing anything permanently. If it asks Ok to proceed?, type y and press Enter:

    Terminal
    npx hyperframes doctor
    Output
    hyperframes doctor

  ✓ Version          0.8.143 (latest)
  ✓ Node.js          v26.7.0 (win32 x64)
  ✓ CPU              22 cores · Intel(R) Core(TM) Ultra 7 155H @ 2995MHz
  ✗ Memory           15.5 GB total · 1.9 GB available
  ...
  ✓ FFmpeg           ffmpeg 9.0.2-full_build-www.gyan.dev at C:\Users\...\ffmpeg.exe
  ✓ FFprobe          ffprobe 9.0.2-full_build-www.gyan.dev at C:\Users\...\ffprobe.exe
  ✓ Chrome           system: C:\Program Files\Google\Chrome\Application\chrome.exe
  ✗ Docker           Not found

  6. Only two rows matter: Node.js and FFmpeg need a tick. Crosses for whisper-cpp, TTS (Kokoro), MusicGen and Docker are fine: they're optional extras this mission doesn't use. A Memory cross just means lots of other programs are open; every render here still works.

✓
Checkpointnpx hyperframes doctor shows a tick next to Node.js and FFmpeg.
If it breaks'node', 'npx' or 'ffmpeg' is not recognised + 1 more
'node', 'npx' or 'ffmpeg' is not recognised
Close every terminal and open a new one, so it picks up the new install. If it still fails, restart the PC.
The Chrome row has a cross
Don't worry. The first render downloads HyperFrames' own copy of Chrome anyway (step 5).
Still stuck? Ask the community
Next mission · Creator toolkitVideo too big for WhatsApp or email? Shrink it in one click
→