What is HyperFrames?

You’ve got a logo, a few product photos and an idea for a short video. With HyperFrames, you can describe how you want those elements to move, then refine the result until you’re happy with it.

Here’s how it works and what you could use it for.

How does it work?

HyperFrames is an open-source tool from HeyGen that turns web code into video. An AI agent writes the code controlling the layout and animation, and HyperFrames turns it into a video file. You can supply your own images, logo and audio. Official documentation

HeyGen says it made its own launch video using HyperFrames in Claude Code. You can watch it below.

Why is that useful?

You keep an editable project. If the headline disappears too quickly, you can change its timing. If an offer changes, you can update the text and export the video again.

You can ask the agent to make those changes or adjust the project visually in HyperFrames Studio. That’s useful when you want to keep refining something rather than starting again each time. Editing guide

What does the code look like?

Here’s a small example using our own logo. The first part makes it rise, fade in and grow slightly. The second brings in an orange underline just before the logo finishes moving.

This is the animation part of the project. The logo, background and layout are defined separately.

const timeline = gsap.timeline({ paused: true });

timeline.fromTo(
  "#logo",
  { opacity: 0, y: 80, scale: 0.93 },
  { opacity: 1, y: 0, scale: 1, duration: 0.75, ease: "power3.out" },
  0
);

timeline.fromTo(
  "#underline",
  { scaleX: 0 },
  { scaleX: 1, duration: 0.4, ease: "power2.out" },
  0.45
);

You don’t need to understand every line. The numbers control things like timing, distance and size. You could change them yourself or ask the AI to make the logo rise more slowly or bring the underline in earlier.

We rendered this example from the code above using GSAP, the animation library used in HyperFrames. A complete HyperFrames project also needs its composition and timeline setup. Animation documentation

What could you make?

A few examples:

• Product announcements: turn photos, headlines and your logo into a short promo.
• Graphics over footage: introduce a speaker or highlight a statistic while someone talks.
• Visual explainers: build a diagram on screen as you explain each part.

If you’re explaining a process, you could reveal each step as you talk through it, giving the viewer time to follow along. Motion graphics guide

What still needs your attention?

Getting something moving is only part of the job. A headline can animate smoothly and still disappear before anyone’s read it.

You’ll need to check the wording, pacing and whether the movement actually helps explain anything. Having an editable project gives you somewhere to make those improvements. That balance of AI and human review is part of our AI content service.

Is it free?

HyperFrames itself is free and open-source. Rendering on your own computer doesn’t use HeyGen credits, although your AI agent and optional services, such as generated voices or hosted rendering, may cost money. Setup and costs

For me, the appeal is being able to change the details. Getting a first version is useful, but being able to adjust the timing, swap an image or rewrite a headline is what makes it practical for ongoing work. For content planned, filmed and posted for your business, see our organic social media service.

Have a video idea in mind? Talk to Lunr Launch about your content.