Render AI Videos Programmatically with HyperFrames (Free)

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.

Locked · rest of the letter

Read the rest of this letter

Drop your email and we'll unlock the full guide right here.

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