Instead of wiring together Puppeteer, ffmpeg, and GSAP by hand (or paying Creatomate $200/mo), you write a composition in plain HTML and CSS, add timing markers, and run one CLI command. The output is a frame-accurate MP4. It is designed from the ground up for AI agents to generate video without a human in the loop.
Step 1: Install HyperFrames
Make sure Node 18+ is installed, then run:
bash
npx hyperframes init my-video
cd my-video
This scaffolds a starter project with a sample composition, an assets/ folder, and a render.config.json.
Step 2: Write Your Composition in HTML + CSS
Open src/composition.html. Think of it as a normal webpage, except you annotate elements with data-start and data-end attributes (milliseconds) to control when they appear:
html
<div class="title"
data-start="0"
data-end="3000"
style="font-size:64px; color:#fff;">
Your headline here
</div>
<audio src="../assets/voiceover.mp3" data-track="main" />
Drop any font, image, Lottie JSON, or caption file into assets/ and reference it with a relative path — no upload step, no dashboard.
Read the rest. Free.
One short email a week. Drop yours and the full guide unlocks below — instantly.
- The n8n workflow you can import
- The SQL schema you can paste
- Step-by-step setup
One short email a week. Unsubscribe anytime.
Already subscribed? Drop your email above (skip the name) — we'll let you back in instantly.
Want bespoke AI automation built for your business?
Book a free 30-min discovery call — we'll map the workflows worth automating, the tools that fit, and tell you straight up where the wins are.
Book a discovery call