HyperFrames is a tool capable of transforming HTML, CSS and JavaScript into MP4 video. Everything is controlled directly from the terminal via AI agents such as Claude Code, Gemini CLI or Codex.
HyperFrames takes the opposite approach to classic editing software like Premiere Pro or After Effects. Here, no graphical interface: everything goes through the text. The creator describes his need (prompt), an AI agent generates the corresponding code, then the tool takes care of the rendering. HyperFrames then runs this script in an invisible (headless) version of Chrome, captures the visual frame by frame, then uses the FFmpeg library to assemble everything into an MP4 file.
A well-stocked catalog of components
The tool includes an accessible online catalog of more than 50 ready-to-use components. There are transition effects, data graphs, pop-ups from social networks (like X or Reddit), and even subscriber counters.
The HTML in Canvas feature allows you to create very advanced 3D visual effects, such as liquid glass, 3D objects (like a spinning iPhone), or glass shatter effects.
Faced with alternatives like Remotion, HyperFrames positions itself differently on two points. On the one hand, it relies on “classic” HTML/CSS/JavaScript, generally better mastered by AI models than the React ecosystem used by Remotion, another video generation tool in code. On the other hand, the tool is now completely free, unlike Remotion which provides for commercial licenses depending on usage.
Installation and handling
To install HyperFrames, all you need is a command line in the terminal:
npx skills add heygen-com/hyperframes
The tool automatically installs the necessary skills for AI agents (Claude Code, Cursor, Gemini CLI, Codex, GitHub Copilot CLI). In Claude Code, for example, these skills are recorded as slash commands: /hyperframes for the composition and /hyperframes-media for preprocessing media resources (Text-to-Speech, transcription, background removal).
Although everything happens in code, HyperFrames offers a very convenient local preview interface (localhost). This interface provides access to the effects catalog. By selecting a component, you obtain a specific prompt that you simply have to copy to explicitly modify the desired element. You can also manage your components, preview the video, take screenshots and launch the final export.
Our tests
To evaluate the suitability of HyperFrames, we subjected it to several distinct use cases, testing different agents and approaches.
The animated “shorts” with an AI voiceover
Our first test consisted of generating a short video in vertical format (9:16), integrating text-to-speech (TTS), emojis and dynamic elements on the theme: “AI is not going to replace developers”. The result turned out to be very qualitative from the first try, although the content itself generated by Gemini CLI was a little poor.
The prompt start was sufficient and did not require any adjustments. A progress bar was automatically integrated and the text synchronized perfectly with the voice. TTS does not reach the level of ElevenLabs, an AI speech synthesis service known for the naturalness of its voices, but remains passable.
Adding subtitles
In fact, HyperFrames automatically manages subtitles via its module /hyperframes-media : it transcribes the voice-over, synchronizes the text with the audio, and embeds it in the video, all locally, without going through an external API. The result on our test was correct from the first try.
A reporting video
We requested the creation of a 30-second video presenting a few simple slides with numbers, without graphics. This test allowed us to compare the behavior of different AI agents when faced with the same request.
Claude (via CLI) and Antigravity produced compliant results the first time, with no rework required. However, the cost should be noted: code generation can quickly consume a significant number of tokens. For Claude, generating the video cost around $0.75. Gemini (via CLI) was more finicky, requiring restarting the generation two or three times because of white backgrounds appearing without having been requested.
Here is the result with Claude Claude:
Website to Video: graphic charter extraction
This is one of the most interesting functions of HyperFrames: providing the URL of a website so that the agent can extract the graphic charter and generate a promotional video.
On the Stripe site, the exercise was laborious. HyperFrames did recover images and attempt to remove the backgrounds, but as Stripe’s pages were mostly white, the result lacked readability. Even so, the tool managed to integrate mock-ups of phones and Macs, with the final effect being a clean and professional Stripe logo.
The TikTok format video
This test aimed to produce a vertical informational video comparing Netflix and Blockbuster. The rendering is very qualitative. The dynamic effects specific to this format are present without being overloaded.
Notable point: the images were generated by the AI during the process via Antigravity (a feature that is not necessarily available in the same way with CLI agents). The result is directly publishable on social networks, all that is missing is a voice-over or music over it.
Mass production
One of the most interesting use cases for HyperFrames is the generation of serial videos from a single model.
For this test, we first iterated several times on the rendering of a single video, refining the layout, colors, animations, until obtaining a satisfactory template. Once this model was validated, we simply provided the agent with a JSON file containing variable information for each variation: city name, address, specific visuals.
For the images, the agent queried the Unsplash API (free photo library) to automatically retrieve a photo corresponding to each city. Result: ten videos generated in a few minutes, without manual editing between each, the same format being duplicated across the channel.
The limits encountered
In practice, the tool requires constant supervision. The most common problem concerns local preview: black screens, overlapping elements or texts that extend beyond the frame. These errors are easily corrected by asking the AI to regenerate the code, but each correction has a cost in tokens, and this cost adds up quickly. It is advisable to regularly compact the conversation history (/compact) to preserve your budget.
Another sticking point: HyperFrames in CLI is “blind”. Unlike Antigravity, which uses Gemini Vision to analyze what is displayed in the browser and self-correct, HyperFrames does not see the rendering. Once a composition model has been validated, errors tend to disappear, but it must first be achieved.
Some good reflexes
To save time and tokens, it is better to work in segments of 20 to 30 seconds rather than requesting an entire video at once. It is also recommended to enable “Plan mode” in your AI so that the AI explains what it plans to do before coding. Finally, generating a detailed, second-by-second script with AI first is a great way to precisely scope the production before launching.
Our Verdict
HyperFrames offers an original approach to automated video via code, with obvious advantages for short formats and data visualization. If the tool does not yet revolutionize video production, its free nature and flexibility make it an option to keep an eye on, particularly for volume or experimental uses.
