HyperFrames vs Remotion: 8 Video Jobs, 32 Claude Code Runs

HyperFrames is HeyGen's open-source framework for turning HTML into video, built for AI agents. It went public in March 2026 and by November 12 had 83,246 GitHub stars to Remotion's 72,708 (HyperFrames on GitHub, Remotion on GitHub). Both do the same job: open a page in a headless browser, capture every frame, encode a video. If you are going to hand one of them to an AI agent, which one makes better videos?

HeyGen's own comparison ran one launch video through each, once (HyperFrames vs Remotion). We wanted to know where the differences actually come from, so we gave Claude Code eight different video jobs on each framework, the kinds of videos people make most, then asked for a realistic change to every one: 32 runs on Claude Opus 5.5. Every video was checked frame by frame and judged blind in both orders.

Disclosure: iArt is built on Remotion, so we have a stake. We publish every prompt so you can rerun the test.

How we tested

• Agent: Claude Code 2.1.322 with Claude Opus 5.5, the model HeyGen used for its own comparison. No instructions beyond each prompt.
• Remotion 4.0.542: a blank project from npx create-video --blank --skills, which installs Remotion's official agent skills.
• HyperFrames 0.9.33: an empty folder with HeyGen's official skills from npx skills add heygen-com/hyperframes.
• Eight jobs chosen from what people most often make with AI motion graphics: kinetic typography, a logo reveal from an SVG file, a data chart, a product UI demo, a mechanism explainer, a transparent lower third for OBS, a route map and a text-message video. Every prompt ended "Render the final MP4 to out.mp4 in this folder. Don't ask me questions; make the choices yourself."
• One follow-up per job in the same session, each a different realistic change, and each asked the agent to keep the first file:
  • Kinetic typography: accent to #2B5BFF, 2 s shorter
  • Logo reveal from an SVG: vertical 1080×1920
  • Animated bar chart: two values changed
  • Product UI demo: dark mode, new task text
  • How a heat pump works: add a closing scene
  • Transparent lower third (OBS): new name, title, colour
  • Route map, Lisbon to Berlin: add Prague, update the distance
  • Text-message video (9:16): WhatsApp look, one more message
• Checks: resolution, length and codec of every file; the alpha channel of both WebM overlays; whether the edits left the first files untouched; every frame on contact sheets; and a blind judge (Gemini, given only the prompt and "video A" and "video B"), run twice per pair with the order swapped. A win counts only if both orders agree.
• Machine: Apple M3 MacBook, 16 GB, with a working FFmpeg on the path. Each pair ran at the same time so both had the same load. Nothing was edited by hand.

Results

Wall-clock time until the MP4 existed. All 32 runs produced files at the requested size and length; all 8 edits on each side did exactly what was asked, and none touched the original file.

The 8 jobs, side by side

Each job below shows the exact prompt, both first versions, our verdict, then the follow-up and how each side handled it.

1. Kinetic typography

Make a 12-second 1920x1080 kinetic typography video for the line "Ship small. Ship often. Learn fast." Each phrase gets its own distinct motion, and the video ends holding the full line on screen for at least two seconds. Dark background, one accent colour. No voice.

Both agents gave each phrase its own scene before assembling the full line. HyperFrames set the type bigger and its echoing "often." reads better; the Remotion version has one fully blank frame between beats. Blind judge: HyperFrames in both orders. Our call: HyperFrames, slightly.

Follow-up:

Change the accent colour to electric blue #2B5BFF and make the whole video 2 seconds faster (10 seconds total), keeping the final hold. Render to out-edit.mp4 and keep out.mp4 as it is.

Both changed the colour to the exact blue and cut the film to 10 seconds with the final hold intact.

2. Logo reveal from an SVG

Make an 8-second 1920x1080 logo reveal for a fictional coffee brand using the logo in logo.svg in this folder. Use the logo's own paths (don't redraw or replace it); the mark draws or assembles itself, then the wordmark appears, and the finished logo holds for at least 2 seconds. Warm, premium feel. No voice.

Both used the SVG's own paths: the circle draws on, the waves follow, then the wordmark arrives. Both also invented a tagline under the logo that nobody asked for. Blind judge: split between the two orders. Our call: a draw.

Follow-up:

Make a vertical 1080x1920 version for Instagram Stories. Same reveal, re-laid out for the tall frame. Render to out-edit.mp4 and keep out.mp4 as it is.

Here the two differed. The Remotion agent re-laid the logo for the tall frame, mark above wordmark. The HyperFrames agent kept the horizontal logo and shrank it, leaving most of the frame empty.

3. Animated bar chart

Make a 15-second 1920x1080 animated bar chart titled "Daily screen time by age (demo data)". Exact values in hours: 13–17: 8.5, 18–24: 7.2, 25–34: 6.1, 35–44: 5.0, 45–54: 4.3, 55+: 3.4. Bars grow in one after another, each value counts up as its bar grows, and the finished chart holds for at least three seconds. Clean, light, editorial style. No voice.

Both are exact. The Remotion chart is correct and plain. The HyperFrames chart highlights the 13–17 bar, greys the rest, adds one annotation ("Teens log 2.5× the daily screen time of the 55+ group", correct: 8.5 ÷ 3.4) and a source line, none of which the prompt asked for. Blind judge: HyperFrames in both orders. Our call: HyperFrames.

Follow-up:

The data changed: 25–34 is now 6.6 and 55+ is now 2.9. Update the chart and render to out-edit.mp4. Keep out.mp4 as it is.

Both updated the two values. HyperFrames also recalculated its own annotation to 2.9×.

4. Product UI demo

Make a 15-second 1920x1080 product micro-demo for a fictional to-do app called Tally. Show the app window; a cursor clicks "Add task", types "Send invoice", presses enter, then checks the task off. The list then shows an "All done for today" state with a small confetti burst. Clean light UI, realistic cursor movement. No voice.

Same layout, same cursor path, same confetti. HyperFrames' type holds up better at small sizes, and it added an end card with a slogan ("Count it done.") that wasn't in the prompt; Remotion fades out on the finished list. Blind judge: HyperFrames in both orders. Our call: a draw.

Follow-up:

Make it dark mode, and change the task text to "Book flights". Render to out-edit.mp4 and keep out.mp4 as it is.

Both switched to dark mode and typed "Book flights".

5. How a heat pump works

Make a 20-second 1920x1080 explainer animation of how a heat pump heats a house in winter. Show the outdoor unit pulling heat from cold outside air, the refrigerant loop carrying it indoors (compressor makes it hot, it releases heat inside, expansion valve cools it again), and the warm room. Label the four parts: evaporator, compressor, condenser, expansion valve. Keep it clear and diagrammatic, flat style, cold blues outside and warm oranges inside. The flow of heat must be easy to follow. No voice.

Both labelled all four parts and made the heat flow easy to follow. Remotion packs in more small text; HyperFrames uses bigger type, one idea per step, and closes on "It doesn't make heat. It moves heat inside." Blind judge: HyperFrames in both orders. Our call: HyperFrames.

Follow-up:

Add one final 4-second scene with the line "Up to 3× more heat than the electricity it uses" and render the full video to out-edit.mp4. Keep out.mp4 as it is.

Both added the closing scene. Remotion used an icon and two labels; HyperFrames drew one block of electricity against three blocks of heat.

6. Transparent lower third (OBS)

Make a 6-second animated lower third for a livestream: name "Maya Chen", title "Head of Product, Northwind". It slides in, holds, and slides out. It must have a truly transparent background so I can put it over my camera in OBS: render it as a WebM with an alpha channel to out.webm (VP9, yuva420p). 1920x1080, positioned in the lower left. Also render an MP4 preview of it over a mid-grey background to out.mp4. No voice.

Shown here over the grey preview background. The two are nearly identical, and both WebM files have a real alpha channel: 96% of pixels fully transparent, the bar fully opaque. Blind judge: HyperFrames in both orders, saying Remotion had no exit animation, which is wrong; it fades and retracts. Our call: a draw.

Follow-up:

Change the name to "Daniel Okafor" and the title to "Founder, Riverline", and make the accent colour green #19C37D. Render out-edit.webm (transparent) and out-edit.mp4 (grey preview). Keep the originals.

Both changed the name, title and accent colour in the transparent WebM and the preview.

7. Route map, Lisbon to Berlin

Make a 15-second 1920x1080 travel route map animation, Vox / documentary style: a stylised map of western Europe, and a route that draws itself Lisbon → Madrid → Paris → Amsterdam → Berlin, with each city dot and label popping in as the line reaches it, a gentle camera follow along the route, and a small counter of kilometres travelled. Muted paper map colours, one bold route colour. No voice.

Both drew real European geography, popped each city in as the line reached it and landed on the same 3,055 km. HyperFrames adds country names and a distance under each city; Remotion's camera follows the line more closely. Blind judge: HyperFrames in both orders. Our call: close to a draw.

Follow-up:

Add Prague as a final stop after Berlin and update the kilometre counter. Render to out-edit.mp4 and keep out.mp4 as it is.

Both added Prague and updated the counter to 3,405 km.

8. Text-message video (9:16)

Make a 15-second vertical 1080x1920 text-message conversation video, iMessage style, between "Sam" and "Alex". Messages appear one at a time with a typing indicator before each reply: Sam: "did you finish the deck?" / Alex: "almost 😅" / Alex: "20 min" / Sam: "client call is in 10" / Alex: "…" / Alex: "ok 5 min". Realistic phone chat UI, readable on a phone, end holding the full chat for 2 seconds. No voice.

Practically the same chat. HyperFrames types Sam's message into the input bar before sending it. Both left the bubbles small for a phone screen. Blind judge: split. Our call: a draw.

Follow-up:

Switch it to a WhatsApp-style look (green outgoing bubbles, beige patterned background) and add one final message from Sam: "🙏". Render to out-edit.mp4 and keep out.mp4 as it is.

Both switched to the WhatsApp look and added the 🙏.

Finding 1: on the same model, the videos converge

Looking across the eight jobs, the first thing you notice is how alike they are. Both drew real European geography and calculated the same 3,055 km for the route. Both built the to-do app with the same layout, cursor path and confetti. Both lower thirds came out the same size, in the same corner, with a true alpha channel. The framework decides how the agent writes the video, not what it imagines.

That matched what we saw in an earlier round of this test on Claude Sonnet 5.5. There the gap was large on kinetic typography: the Remotion agent stacked three lines of text in a corner. On Opus, both agents gave each phrase its own scene. The model closed most of the gap before the framework had a chance to matter.

Finding 2: Remotion is faster because Claude already knows it

Remotion finished seven of eight first versions sooner, and the totals were 25.9 minutes against 39.7, with 96 agent steps against 176. Rendering isn't the reason. Reading the session logs shows where the time goes:

• The Remotion agent opened Remotion's official skill in 1 of 8 sessions. Remotion has been around since 2020 and Claude writes it from memory.
• The HyperFrames agent loaded the HyperFrames skill in 8 of 8 sessions and read its reference files 15 more times. HyperFrames is eight months old; the agent has to learn it each time.
• It also ran more than twice as many shell commands (154 against 69), mostly HyperFrames' own init, check, lint and snapshot.

Both agents inspected their own frames about equally often (48 and 47 image reads), so the extra time is not extra quality control. Expect the gap to shrink as newer models learn HyperFrames.

Finding 3: HyperFrames' edge is a design guide

The bar chart (job 3) shows where the blind judge's preference came from. The Remotion chart is correct and plain. The HyperFrames chart highlights the 13–17 bar in orange, greys the rest, adds one annotation ("Teens log 2.5× the daily screen time of the 55+ group", which is right: 8.5 ÷ 3.4) and a small source line. None of that was in the prompt. It is in HyperFrames' skill, almost word for word:

Highlight one series, grey the rest.
Build a chart in reading order: the frame and axis, a reference line,
then the data drawing in, then one annotation on the point that matters.
Real data only, from the source, rounded the same way everywhere,
with a small source line on screen.

From HyperFrames' data reference.

The skill reads like a motion designer's style guide, with rules for charts, kinetic type, maps and pacing. Remotion's official skills are a technical reference: how to set up a project, render, add captions, use map libraries. So the quality gap is a prompt gap. If you use Remotion, put the design rules in your prompt or your project's instructions, and you get the same behaviour without the extra steps. The same applied to kinetic typography, where HyperFrames' rule is "3–7 English words per scene" (film reference).

Finding 4: both edit precisely; Remotion re-lays better

Every edit worked on both sides: new data, new colours, an extra stop, a dark mode, a new closing scene, and both kept the original file intact. The one real difference was layout. Asked for a vertical version of the logo reveal (job 2), the Remotion agent stacked the mark above the wordmark for the tall frame; the HyperFrames agent shrank the horizontal logo and left the frame half empty.

One more thing both did: add copy nobody asked for. Both logo reveals invented a tagline under the wordmark, and the HyperFrames UI demo ended on a brand card with a slogan. If the words matter, end your prompt with "No other text."

What you're left holding

You don't have to pick one timing model

HyperFrames' pitch is the seeking model: write a normal GSAP timeline and let the renderer jump it to each frame. You can do the same inside Remotion: create the timeline paused and set its time from the current frame.

const Title = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const ref = useRef(null);
  const tl = useRef(null);
  useLayoutEffect(() => {
    tl.current = gsap.timeline({ paused: true })
      .from(ref.current, { y: 40, opacity: 0, duration: 0.5, ease: "power3.out" });
  }, []);
  useLayoutEffect(() => { tl.current?.totalTime(frame / fps); }, [frame, fps]);
  return <h1 ref={ref}>Ship small.</h1>;
};

That is how iArt renders: the agent writes GSAP timelines, Remotion owns the clock, preview and export, and our agent's instructions carry the design rules. Which is the real lesson of this test: the renderer matters less than what you tell the agent.

Which one should you use?

Limits of this test

Eight jobs, one run each per framework, one model and one machine. A single run decides little about any one job; the pattern across eight is what we report. The blind judge is an AI model and was wrong at least once (it said Remotion's lower third had no exit animation; it does), so we list our own frame-by-frame verdict next to it. We tested both through Claude Code and their command-line tools, not HyperFrames Studio, Remotion Studio or either cloud renderer. Every prompt is above, so you can rerun it.

FAQ

Is HyperFrames better than Remotion?

For an AI agent working on its own, HyperFrames produced slightly more polished videos in our test: a blind judge preferred it on 6 of 8 jobs and never preferred Remotion consistently. Remotion finished every job but one faster and in about half the agent steps. Most of the quality difference comes from HyperFrames' design guidance, which you can also give a Remotion agent.

Why is Claude Code slower with HyperFrames?

HyperFrames is new, so the agent loads its skill and reads its docs in every session; in our runs it did so in all 8 jobs, while it opened Remotion's skill in only 1 of 8 and wrote from what it already knew. HyperFrames' command-line checks add more steps before each render.

Can I use GSAP with Remotion?

Yes. Create a paused GSAP timeline and set its time from Remotion's current frame on every render. That is the seeking model HyperFrames uses, inside Remotion. iArt renders its animations this way.

Can both render transparent video for OBS?

Yes. In our test both produced a VP9 WebM with a real alpha channel: 96% of pixels fully transparent, with the lower third opaque, checked frame by frame.

Is Remotion free?

Remotion is free for individuals, for-profit companies with up to three employees and non-profits; larger companies need a paid company license. HyperFrames is open source under Apache 2.0.

Does HyperFrames need FFmpeg installed?

Yes, its command-line tool needs Node.js 22 or later and FFmpeg, unless you use HeyGen's hosted rendering. Remotion has shipped its own FFmpeg inside the renderer since version 4.0.

Can I make these videos without setting up either framework?

Yes. iArt is a hosted video agent built on Remotion and GSAP: describe the video in plain words and it writes, renders and exports it, with no install, Node version or FFmpeg to manage.