Until now, my code-based video work had used Remotion. This week I added HyperFrames to my brand templates to try a different kind of piece: short scenes, kinetic type and compositions that feel closer to a small animated landing page.
I like being able to work with HTML, CSS and JavaScript and ask an agent for specific changes. That does not mean “make me an ad” solves the design of the ad. That part still takes a fair amount of work.
What I am testing
On November 5, I added a HyperFrames base project, promo scenes and a two-color kinetic template. Brand kits are stored separately for each project.
The kit fixes colors, type and logos before scene work starts. If an agent invents a fresh identity every time a headline changes, the output starts looking like ads for several unrelated companies.
The first pieces combine text entrances, product shots, transitions and a closing scene. Some include audio. I want to find out whether those composition decisions can carry across videos without being rebuilt for every piece.
Why code helps with the task
I can ask for a word to enter later, a shot to be shorter or a scene to respect a portrait format's margins. The change lives in a file, where I can see exactly what was modified.
I can also separate content from presentation. A new title should not silently change a transition curve or the logo size. That separation is easy to request and surprisingly easy to break when the composition is poorly organized.
The agent helps build and adjust the piece. Then I need to watch it at normal speed. Reading animation values does not establish whether a viewer can finish reading before the next cut.
How I am comparing it with Remotion
For the Diorama video, Remotion composes captured figures and adapts the layout to three formats. Frame-based composition and React components fit that particular job well.
With HyperFrames, I am exploring scenes built with web technologies and code-defined motion, including GSAP in my templates. HeyGen's documentation describes it as a framework for making video with HTML, CSS, JavaScript and AI agents.
I do not have a controlled performance or production-time comparison between the two. For now, I am choosing according to the piece I am making and how much I can reuse without fighting the template.
Start with one scene
For an initial test, I would give the agent a single scene with a fixed duration:
Prepare a typographic scene using the existing brand kit. One headline, one accent and a closing URL. No new colors or logo changes. Before rendering the full video, show frames from the entrance, the reading moment and the exit.
The visual constraints have a practical purpose. If ten new decisions appear at once, it becomes difficult to tell whether the idea, timing or composition is the problem.
After reviewing that scene, I would add a product shot. A real capture and a prepared demonstration need different descriptions and checks. Editing should not blur that distinction.
What remains to be checked
Having templates in the repository does not mean every piece is approved. I am still testing which compositions are worth keeping and which parts need another pass.
The next check is not particularly glamorous: open the render, watch it at a small size and see whether it makes sense without pausing. If I need a minute to explain what happens in a two-second shot, the shot probably needs changing.
HyperFrames: making videos with code and agents, HeyGen documentation