# HyperFrames

> Write HTML, render video: a motion graphics framework built for AI agents

Category: Open source alternatives (https://aiarabicdev.com/alternatives)
Canonical page: https://aiarabicdev.com/alternatives/hyperframes
Tags: video, motion-graphics, html, ai-agents, rendering

HyperFrames turns HTML, CSS, media and seekable animations into MP4 videos, and it is designed so an AI coding agent can write the compositions for you. It is an Apache-2.0 alternative to After Effects and template video editors for product videos, captions, charts and social clips.

## Facts

- Licence: Apache-2.0
- Language: TypeScript
- Cost: Free and open source
- Self hostable: no
- Added: 2026-10-25
- Last checked: 2026-10-25

## Links

- Website: https://hyperframes.dev
- Source: https://github.com/heygen-com/hyperframes
- Docs: https://hyperframes.heygen.com/introduction

## A video is an HTML file

In After Effects or a template editor you build a video by dragging layers on a timeline. In HyperFrames the video is an HTML page: clips, images and audio are elements with data attributes for start time, duration and track, and the motion comes from GSAP, CSS animations, Lottie, Three.js or similar libraries driven by a paused timeline. You preview it in the browser and render it with the CLI, which steps through every frame in headless Chrome and encodes the result with FFmpeg.

The point of that design is that agents already write HTML well. The project ships skills for Claude Code, Codex, Cursor and other coding agents, so you can ask for a ten second product intro and get a composition you can read, edit and render again. It also has a catalog of ready-made blocks such as transitions, captions, charts and overlays, a browser Studio for previewing, and an optional AWS Lambda path for rendering at scale.

## What switching really costs

This is not a drop-in replacement for a designer's timeline. There is no keyframe graph editor, no rotoscoping and no compositing of footage the way After Effects does it. If you think in layers and easing curves on a canvas, you will be reading and editing code, or asking an agent to, and that is a different way of working.

Your work does not lock into a proprietary project format, because a composition is plain HTML you can keep in git. The price is setup: you need Node.js 22 or newer and FFmpeg, and render times depend on your machine because every frame is captured in a real browser. The project moves fast, so expect commands and skills to change between versions.

## Reach for it when

- you want an AI agent to produce product videos, captions or animated charts
- you want videos you can version in git and render again from a script
- you know HTML and CSS better than a motion design timeline

## Watch out for

- it is code first, so it does not replace hand animation, compositing or rotoscoping in After Effects
- rendering captures each frame in headless Chrome, so long or heavy videos take real time on a modest machine
- it is a young project backed by one company, and commands and skills change often

## Get started

Create a project:

```sh
npx hyperframes init my-video
```

---

aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements.
New entries are announced at https://t.me/arabic_Intelligence