FreeApache-2.0TypeScript

HyperFrames

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

Alternative toAfter EffectsCanva video

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.

Website Source Docs

Best for 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

Install

Create a project

npx hyperframes init my-video

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.

Last checked: 2026-10-25.md