Remotion vs HyperFrames, and six other video skills: one 30-second video made 12 ways
Updated on
Remotion vs HyperFrames is the first choice most people face when an AI agent makes their video. We went further: we gave the same brief to an agent 12 times and changed only the motion graphics skill or tool each time. Remotion and HyperFrames are two of them; the others are skills that sit on top, a no-framework route, and Grok Bot's built-in video generator.
Every run below happened on 2026-10-23 or 2026-10-24. Each one has its commands, timings and problems recorded, and the videos are on this page.
How we tested
Every run got the same brief: a 25 to 35 second English explainer on one fact from xAI's docs. When a routine started without you needs approval, the request expires after about 10 minutes and the action does not run (source).
To make the runs comparable, these were the same every time:
- the same fact and the same closing line;
- the same 62-word narration, voiced with edge-tts (
en-US-AndrewNeural, -5% speed); - the same music bed, "Deep Urban" from Mixkit;
- 1920×1080 at 30 fps, unless the tool's own default was different.
Only the skill or tool changed. Two runs are not part of the skill comparison: V3 is the same setup in vertical format, and V5 is a different brief, a 20-second promo for this site.
Who made them. Run V0 was Claude Code with Claude Opus 5.5 on a Mac mini (Apple M6), described in our step-by-step guide. Runs V1 to V11 were Grok Bot on its cloud computer (Linux, 8 cores, 15 GB, Debian 13 with Node 20 installed by default). Grok Bot does not show which model it uses.
Results
| Run | What changed | Renders with | Minutes | Render | Problems: checker / looking |
|---|---|---|---|---|---|
| V0 | HyperFrames' own skills, Claude Code | HyperFrames 0.8.188 | about 6 | 38 s | 4 / 1 |
| V1 | HyperFrames' own skills | HyperFrames 0.8.188 | 6.9 | 26 s | 4 / 3 |
| V6 | V1 again, from an empty folder | HyperFrames 0.8.188 | 3.3 | 18 s | 1 / 4 |
| V2 | Remotion's Agent Skills | Remotion 4.0.538 | 3.4 | 20 s | 1 / 2 |
| V7 | HyperFrames + GSAP's skills | HyperFrames 0.8.188 | 2.8 | 21 s | 3 / 1 |
| V8 | HyperFrames + huashu-art-motion | HyperFrames 0.8.188 | 6.6 | 17 s | 4 / 2 |
| V11 | HyperFrames, storyboard first | HyperFrames 0.8.188 | 8.1 | 16 s | 4 / 7 |
| V4 | claude-motion-design, no framework | Playwright + FFmpeg | 10.7 | 6 min | 1 / 4 |
| V9 | lemo-opuscar, whiteboard style | Its own frame renderer, 24 fps | 13.6 | 2 min | 4 / 2 |
| V10 | Grok Bot's built-in video generator | Grok Imagine, 720p, 24 fps | 8 | 90–212 s per 15 s clip | 0 / 3 |
| V3 | V1's setup, vertical 1080×1920 | HyperFrames 0.8.188 | 5.7 | 17 s | 6 / 4 |
| V5 | video-shotcraft, a 20 s site promo | Remotion 4.0.484 | 9.5 | 44 s | 0 / 3 |
V9's time counts from a restart; a first attempt about five minutes long was interrupted. V10's clips were generated by the tool and joined with FFmpeg, because the tool stops at 15 seconds.
What changed the look
The renderer did not: HyperFrames and Remotion
V1 · HyperFrames' own skills
V2 · Remotion's Agent Skills
V1 (HyperFrames), V2 (Remotion) and V7 (HyperFrames plus GSAP's skills) came out nearly the same: a dark background, a small approval card in the middle, a countdown ring and a mono-spaced clock. HyperFrames' own skill bans "a black or dark navy void as the ground, with small elements floating in its middle" as a default, and all three still landed on it.
There is a catch. V1, V2 and V7 ran one after another in the same Grok Bot session, so the agent carried V1's design forward. V6 repeated V1 from an empty folder in the same session and still came out different, a light timeline instead of a dark card. In these runs, what the agent had just made shaped the next video more than the renderer did. Later runs (V10, V11) each started a new session.
Skills with a style did: huashu-art-motion and lemo-opuscar
V8 · HyperFrames + huashu-art-motion · its "keynote UI" explainer grammar on a paper palette.
V9 · lemo-opuscar, "Whiteboard Explainer" style
V8 put one large object, a phone, at the center of every scene on a paper-colored ground, and it reads like a finished explainer. V9 is the most distinctive of the twelve: markers draw the clock, the card and the arrows as the narration goes. It was also the slowest run, its 24 fps file is the largest, and the camera crops words while it moves, which the run left unfixed.
Working storyboard first did: V11
V11 · HyperFrames, storyboard first
V11 used the same renderer and skills as V1 but worked in four stages: a brief, three directions to pick from, one still per scene, then animation. The four stages took 0.8, 0.4, 3.2 and 2.6 minutes. At the still stage the agent found and fixed six layout problems, such as the big clock overlapping the card and the closing line breaking with one word left on the last line. The result has large type, a light ground and nothing floating in empty space.
No framework: claude-motion-design
V4 · claude-motion-design: HTML, Playwright and FFmpeg
This route needs no video framework: the page is plain HTML, Playwright takes a screenshot of every frame, and FFmpeg joins them. It worked, but rendering took about six minutes, the longest of all, and the layout left most of the right side of the frame empty.
No code at all: Grok Bot's built-in video
V10 · Grok Bot's built-in video generator · AI-generated footage, including the person. Two 15-second clips joined.
Grok Bot can make video without any code. Its changelog says Bots "can create videos from a description or from an image you share" (v0.75.2, 2026-10-22), and the tool's own description says it uses Grok Imagine. What we saw on 2026-10-24:
- each clip is at most 15 seconds, at 480p or 720p and 24 fps, with generated sound;
- there are no settings for narration, captions or music;
- the closing line came out misspelled twice; the third try, set as three short lines, was spelled right;
- the clock did not show 4:00, and nothing on screen says 4 a.m. is only an example.
It makes realistic footage that the code-based tools cannot, but it is not suited to exact text or timing.
Two runs outside the comparison
V3 · vertical 1080×1920 · captions sit 590 px above the bottom and 140 px in from the right, to stay clear of Shorts and TikTok buttons.
V5 · video-shotcraft, a 20-second promo for bests.one · built only from real screenshots of three of our pages, no narration.
What went wrong, run by run
These are the problems the runs actually hit, from their logs. Some depend on the machine: the Node version and the Python install error come from Grok Bot's Linux computer.
| Problem | Found by | Fix | Run |
|---|---|---|---|
| The system had Node 20; HyperFrames needs 22 or later | Version check | Installed Node 22 for the user | V1 |
pip install edge-tts refused with "externally-managed-environment" | The install command | Installed it in a Python virtual environment | V1 |
| edge-tts 7.2.8 failed with a 403 error | The voice step | Upgraded to 7.3.1 | V1 |
Installing HyperFrames skills replaced skills already there: skills update removed seven older ones, and init overwrote same-named ones | The commands' own output | Restored from a backup (V0); none (V1) | V0, V1 |
| Voice clips without a duration were treated as overlapping | HyperFrames check | Set each clip's length | V0 |
GSAP's skill says to prefer autoAlpha; HyperFrames' rules forbid it on timed elements | Reading both skills | Followed HyperFrames | V7 |
| Remotion's caption component hard-codes Arial | Looking at frames, then its source | Left as is, per Remotion's skill | V2 |
| A caption page ran across two sentences | Looking at frames | Broke pages at sentence ends | V2, V3, V4, V6 |
| Captions or the EXPIRED stamp covered a label or a button | Looking at frames | Moved the caption or the stamp | V0, V1, V7, V8 |
| lemo-opuscar's setup downloaded a 354 MB voice model that was never used | The setup output | None | V9 |
| On-screen text misspelled by the video generator | Looking at frames | Regenerated twice with stricter wording | V10 |
The pattern: the tools' own checkers caught timing and structure, but overlaps you can only see, such as a caption on a button, were found by looking at the frames. Every run that looked caught at least one.
How to choose
- You want a dependable default: HyperFrames or Remotion with its own skills. They gave similar results; pick by license and by whether you prefer HTML or React.
- You want a recognizable style: add a style skill. Check its license and how long it takes; the whiteboard run took the longest.
- You want fewer surprises: work storyboard first and approve stills before animating.
- You need realistic footage, not graphics: a video generator such as Grok Bot's, and expect to fix text by hand or keep it off screen.
The licenses for every tool here are in open-source tools for Claude Code video.
Coming later: we are packaging the workflow behind these runs into a kit for Claude Code, with the storyboard-first stages, word-timed captions, the checks before render and starter templates for 16:9 and vertical. It is not out yet. Subscribe on YouTube to hear when it ships.
Limits of this test
- One run per setup, except V1 and V6. A second run of the same setup can look very different, as V6 shows.
- Runs V1, V2, V6 and V7 shared one Grok Bot session, so each could draw on what came before. V10 and V11 each had a new session.
- Grok Bot made eleven of the twelve, and we cannot see which model it used. With Claude Code or another agent, the same skills may behave differently.
- We judged the pictures from frames and from watching the files; the sound was measured for loudness, not reviewed by a second person.
- The voice, music and narration were fixed on purpose, so this compares visuals and process, not script writing.
FAQ
Is Remotion better than HyperFrames?
In our runs neither was clearly better. The Remotion run and the HyperFrames runs produced very similar videos in similar time. The bigger differences are the license, where HyperFrames is Apache 2.0 and Remotion needs a company license above three employees, and what you write: HTML for HyperFrames, React for Remotion.
Which skill changed the result most?
Skills that bring a visual style. huashu-art-motion gave a paper-colored scene with a large phone, and lemo-opuscar drew the video as a hand-drawn whiteboard. Adding GSAP's animation skills did not visibly change the look.
Which agent made these videos?
Run V0 was Claude Code with Claude Opus 5.5 on a Mac mini. Runs V1 to V11 were Grok Bot on its Linux cloud computer. Grok Bot does not show which model it uses; Cursor chooses it.
How long does one video take?
From the first command to the finished file, our runs took between 2.8 and 13.6 minutes. Rendering alone took from 16 seconds to about 6 minutes, depending on the tool.
Can Grok Bot make the video without code?
Yes. Its built-in video tool, which says it uses Grok Imagine, made 15-second realistic clips at 720p and 24 fps. It has no narration or caption settings, and on-screen text came out misspelled twice before a third try got it right.
Related on bests.one
- Make a video with Claude Code and HyperFrames — run V0, step by step.
- Open-source tools for Claude Code video — every tool here, with its license.
- Can Claude make videos?
- Claude Motion vs Claude Code motion graphics
Sources: HyperFrames, Remotion Agent Skills, Remotion license, GSAP skills, claude-motion-design, huashu-art-motion, lemo-opuscar, video-shotcraft, Grok Bot changelog (video creation, v0.75.2), Grok Bot approvals and privacy (the videos' source). Checked on 2026-10-24.