Render AI Videos Programmatically with HyperFrames (Free)

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.

Step 3: Add Animations and Captions

HyperFrames ships with a small set of CSS utility classes (hf-fade-in, hf-slide-up, etc.) that resolve to frame-accurate keyframes at render time. For captions, add a .srt or .vtt file to assets and reference it on your audio element:

html
<audio src="../assets/voiceover.mp3"
       data-track="main"
       data-captions="../assets/captions.srt" />

Captions are burned into the video, not a soft subtitle track.

Step 4: Render to MP4

bash
npx hyperframes render --output dist/my-video.mp4

HyperFrames launches a headless Chromium instance, steps through the timeline frame by frame, and pipes the frames through its built-in ffmpeg wrapper. Typical 60-second 1080p render takes 90-120 seconds on a standard laptop. No cloud queue, no credits.

Pro tip: pass --fps 30 or --fps 60 and --resolution 1920x1080 (or 1080x1920 for vertical) as CLI flags. Defaults are 30fps and 1080p landscape.

Step 5: Plug an LLM Into the Composition Step

This is where HyperFrames earns its "built for agents" positioning. Because the composition is just HTML, you can give an LLM a system prompt describing the schema and ask it to produce the full composition.html from a brief:

System: You output valid HyperFrames HTML compositions.
        Use data-start / data-end in milliseconds.
        Keep all assets referenced from ./assets/.
User: Make a 30-second product demo for [product].
      Voiceover file: assets/vo.mp3

Feed the LLM output straight to npx hyperframes render. No human review required for straightforward templates.

---

Why This Works

Browsers have spent 30 years perfecting layout, typography, and animation. HyperFrames borrows that entire engine instead of rebuilding it. Developers already know HTML and CSS, so the learning curve is near zero. And because the composition is a text file, it is trivially diff-able, version-controlled, and LLM-writable — three properties that After Effects project files will never have.

---

Pro Tips

• Start from the /examples folder in the repo. The social-reel template is the fastest path to a vertical short.
• Keep assets local during dev, then swap to absolute URLs for CI. HyperFrames resolves both; absolute URLs let you run renders in a Docker container without copying asset files.
• Use CSS custom properties for brand tokens (--brand-color, --headline-font). One variable change re-skins every composition that imports your base stylesheet.
• Cache the Chromium binary. On repeated CI runs, set HYPERFRAMES_CHROMIUM_PATH to a pre-installed binary path to skip the ~300 MB download.

---

The GitHub repo is at github.com/heygen-com/hyperframes. The social-reel example in /examples is the template worth cloning first.