🎬 HyperFrames v0.7.70
Write HTML. Render video. Built for agents.
Open-source framework by HeyGen that turns HTML, CSS, and JavaScript animations into deterministic MP4 videos. No build step, no React — just an index.html file.
Status
Installed on local Linux (RTX 3060 Ti)
Node.js 22 · FFmpeg 6.1 · Apache 2.0 license
37,406 ★ on GitHub · 19 agent skills installed
Quick Start
# Create a new project
cd ~/my-video
npx hyperframes init my-project --example blank
# Preview in browser (live reload)
npm run dev
# Check for errors
npm run check
# Render to MP4
npm run render
# Install more blocks
npx hyperframes add data-chart
npx hyperframes add flash-through-white
Available Skills
- hyperframes — Router: describe what you want, it picks the right workflow
- product-launch-video — Promo from a URL or brief
- faceless-explainer — Text-to-video explainer
- embedded-captions — Add subtitles to existing video
- talking-head-recut — Overlay graphics on recorded footage
- motion-graphics — Short kinetic type, logo stings, transitions
- music-to-video — Beat-synced music visualizer
- pr-to-video — GitHub PR → changelog video
- general-video — Any other video composition
Examples
From the showcase at hyperframes.heygen.com/showcase
- Product intro with fade-in title, background video, and music
- Data visualization: CSV → animated chart race
- PR walkthrough with animated code diffs
- Kinetic typography social clips
- Caption overlay on talking-head footage
Project
~/my-video/ — first test project (renders to renders/)
Latest render: 10s 1080p30 H.264, 91.7 KB, rendered in 14.5s