How to generate video with Claude Code: Remotion or HyperFrames

Making video usually means opening an editor, dragging clips on a timeline and manually exporting every time a piece of data changes. It works for one-off pieces, but it becomes torture the moment you need twenty versions of the same ad with different prices, or a new results summary every month. The alternative we use when video has to be repeatable, or when we want it to move with the precision of a website, is to generate it in code and let an AI assistant like Claude Code write that code for us.

In 2026 there are two serious tools for this: Remotion and HyperFrames. We've used both on real work, and this article is the guide we'd have liked to find: what each one is, how you work with it, when to pick one or the other and what problems we ran into along the way.

What making video in code means

The idea is the same with both tools: the video is described with code instead of being assembled by hand. It stops being a closed file you edit on a timeline and becomes a kind of "recipe" that can be run as many times as you want. In the end, that recipe produces a normal MP4, identical to what any editor would give.

That difference has three very practical consequences:

• The video is reproducible. It's saved as text, you can recover any previous version and it rebuilds exactly the same on any computer. No more "where's the real final project?".
• The video is dynamic. If the content comes from a spreadsheet or another system, the same design generates infinite variants without rebuilding it.
• The video is automatable. Creating one is giving a command, so the process can launch itself: in batches, overnight, or when new data arrives.

The trade-off is that each tool has its own rules, different from those of a website or an ordinary animation. A generic AI assistant doesn't know them and slips up; that's why, as we'll see, the key step is giving it the right context.

The two options: Remotion and HyperFrames

Both do the same thing —turn instructions into an MP4 video— and you work with both in the same way: you describe the video to Claude Code and review the result. Remotion is the veteran, in development since 2020. HyperFrames is the newcomer: it was released in 2026 by HeyGen, the AI video avatar company. Where they part ways is on five points.

1. Template or one-off piece. This is the difference that matters most. Remotion is built to repeat: you define what changes from one video to the next —a name, a figure, an image— and it generates hundreds of variants of the same design, checking that each one receives the right data. HyperFrames is built to design: it shines with the one-off video crafted shot by shot, such as a promo or a launch. It also supports variants, but that isn't its strong suit.

2. An application or a web page. Remotion builds the video as a piece of an application, with React. HyperFrames builds it as a web page and records it frame by frame. For you, the practical consequence is this: if you already have something made for the web —a design, a prototype, a landing page—, HyperFrames reuses it almost as-is, while in Remotion it has to be rebuilt. And everything a website can do, from typefaces to 3D effects, is available in HyperFrames with no extra effort.

3. How you make tweaks. Both have a studio in the browser to watch the video before generating it. In Remotion's you change the data the template lets you change. In HyperFrames' you can click any text or element in the video and change it by hand, without asking the assistant: fixing a typo or adjusting a size takes seconds.

4. What it costs. HyperFrames is open source and free with no conditions, including for commercial use. Remotion is free for individuals, companies of up to three employees and non-profits; above that you need a company licence.

5. Maturity. Remotion has been in use for years, with a large community, many templates and very thorough documentation. HyperFrames is young and changes very fast —it releases new versions almost daily—: it moves quickly, but it's worth pinning the version you work with so a project doesn't change from one day to the next.

The differences at a glance

If you already have videos made with Remotion and want to try HyperFrames, you don't have to start from scratch: HyperFrames offers a skill that translates the project and, according to its documentation, automatically converts around 80% of it and flags what it can't translate.

Where Claude Code fits

Creating videos this way, by hand, requires knowing how to code. This is where Claude Code comes in, Anthropic's AI assistant that works directly on your project: it understands the work as a whole, writes and modifies the files, and —this is the important part— fixes its own mistakes until something works. It doesn't matter whether the video is React or HTML: the assistant writes both.

The mindset shift is this: you stop assembling each animation and move to directing. You tell it "create a 5-second intro with the logo entering from below with a soft bounce and the slogan appearing half a second later", and the assistant builds it. You review the result and ask for adjustments: "the bounce is too abrupt, soften it". It's a conversation, in natural language, about a result you can always undo and redo without fear.

Install the tool's skill before you start

There's a preliminary step that makes a huge difference to the quality of the result: installing the tool's skill. A skill is a knowledge package the assistant loads when it detects you're working with that tool. It teaches it the rules and best practices, so it doesn't improvise. It doesn't overload the assistant with a giant manual: it hands over only the part needed at each moment (animation, audio, captions…).

The Remotion team publishes theirs on skills.sh:

npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices

HyperFrames publishes around twenty skills in its repository. The basic command installs the core, and the rest load when the brief calls for them:

npx skills add heygen-com/hyperframes

In Claude Code they can also be installed as a plugin, which bundles every skill into one versioned package that can update itself:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

These are the most used ones and what each is for:

Our promo came out of the product-launch-video workflow. A practical warning: the skills.sh directory still lists skills from the same repository, such as gsap or graphic-overlays, that are no longer in its skills folder. Install from the repository with the commands above instead of looking for them one by one.

The HyperFrames entry skill goes a step beyond rules. Before writing anything, it asks a few questions about the goal of the video, proposes a visual script (storyboard) scene by scene and doesn't build until you approve it. In our promotional video, that script stayed in the project next to the scenes, so every round of changes started from what had already been approved.

A complement for HyperFrames: the official GSAP skills

Since HyperFrames animates almost everything with GSAP, the most widely used web animation library, it's worth giving the assistant in-depth knowledge of that library. GreenSock, its creators, publishes official skills covering the full API, timelines and plugins. Since Webflow acquired GSAP, all its plugins are free, including the formerly paid ones such as SplitText (animating text letter by letter) or MorphSVG (morphing one shape into another).

There's an important caveat: they're written for the web, where animations start on their own or on scroll. In a video, the HyperFrames rules come first: a single paused timeline, no random values and no infinite loops. That's why it's best to install only the parts that fit and leave out the scroll and React ones:

npx skills add https://github.com/greensock/gsap-skills --skill gsap-core --skill gsap-timeline --skill gsap-plugins

The layer that separates a good video from a dull one

Knowing the rules guarantees a correct video, but not necessarily a beautiful one. Without guidance, an assistant tends to produce flat, robotic animations: text that appears with a boring fade, movements without rhythm. To raise the bar there are design skills that encode the craft of professional animation into concrete rules. You don't need to understand them in depth, but these are the ideas that turn a dull video into a commercial-looking one:

• Physics-based movement, not mechanical. Whatever enters, rotates or grows does so with a touch of inertia, like in the real world, instead of sliding rigidly.
• Appearing with several gestures at once. An element doesn't just fade in: it appears by combining opacity, a slight rise and a small scale-up. It feels more alive.
• Staggered entrances. When several elements enter, they do so one after another with a small offset, creating a cascade that reads better than a simultaneous flood.
• Exits faster than entrances. Whatever leaves does so decisively, making way for what comes next with energy.
• A centralised brand. Colours, typefaces and timings live in a single place, so readjusting the style of every video means changing one thing, not a hundred.

These skills install the same way, with a single command, and work with both tools. Two worth having at hand:

• ui-ux-pro-max, a catalogue of interface design criteria (styles, palettes, typefaces and UX rules) that helps the assistant make well-founded aesthetic decisions. Its page is on skills.sh:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

• frontend-design, Anthropic's interface design skill, designed to generate polished interfaces and compositions that avoid the generic look. Also available on skills.sh:

npx skills add https://github.com/anthropics/skills --skill frontend-design

And a third, specific to motion:

• review-animations, by Emil Kowalski, a design engineer and author of the web animation course animations.dev. It reviews animation code against a very high bar —timings, curves, what's superfluous— and flags problems by default rather than approving. It's designed for interfaces, but its criteria apply just as well to a video:

npx skills add https://github.com/emilkowalski/skills --skill review-animations

With one of these loaded alongside the tool's own, the assistant doesn't just follow the technical rules: it applies a visual judgement that shows in the result.

The Remotion workflow, step by step

1. Create the project

Remotion includes a wizard that sets up a blank project in seconds. You can ask Claude Code to do it or run it yourself with one command:

npx create-video@latest

2. Describe the video

With the project open, you explain to Claude Code what you want. The more specific you are about duration, format and style, the fewer rounds it will take. A good first brief looks like this:

Create a 6-second vertical video (reel format). Dark blue gradient background. In the centre, the text "Launch 2026" that appears with a fade and a soft rise during the first second, holds, and disappears in the last half second.

From that sentence, the assistant writes everything needed. You don't touch the code: you give instructions and review.

3. Preview

Before generating the final video, it's worth watching it live. Remotion includes a studio in the browser with its timeline and play button:

npx remotion studio

There you see the result instantly and ask for adjustments. This is the studio with the test video we built for this article: on the left the list of compositions, in the centre the preview and at the bottom the timeline.

4. Generate the final video

When you're happy with it, creating the MP4 is giving a command and waiting:

npx remotion render

And if you'd rather not touch the terminal, the studio itself has a Render button. Clicking it opens a panel with the export settings —the format (video, audio, still image or image sequence), the codec, which section to export, the file name, the quality or the resolution— and it's generated with one click.

The computer generates the video image by image and joins them into the final file, exactly as it looked in the preview. This is the real result, with the staggered entrances and quick exit we mentioned earlier:

The HyperFrames workflow, step by step

The steps are the same; what's inside changes.

1. Create the project

npx hyperframes init my-video

You need Node.js 22 or later and FFmpeg, the program that joins the frames into the final video, installed. With the skills in place, you usually won't run it yourself: you describe the video to Claude Code and it creates the project, the storyboard and the scenes.

2. Describe the video

The brief can be the same as before, word for word. What changes is what the assistant writes under the hood (a web page instead of an app), but you don't need to read it: you check the result in the studio, which is the next step.

3. Preview and tweak in the studio

npx hyperframes preview

This opens HyperFrames Studio in the browser. This is our own composition, the yuGraphik promotional video, open in the studio: each scene is an independent HTML file, and at the bottom you can see the seven scenes on the timeline next to the music track.

The most practical part of the studio is the right-hand panel. Click any element on the canvas and the inspector shows its properties and lets you change them by hand: the text, the font, the size, the weight. Or you can ask the agent for a change to that specific element. It's the quickest way to fix a typo or adjust a size without asking the assistant.

4. Generate the final video

npx hyperframes render --output video.mp4

From the studio, the renders tab has the export settings —format, resolution, frames per second and quality— and the history of videos already generated.

Two real cases: what we made with each

Theory helps, but where the differences really show is when you use them. These are two pieces of our own work, published on our own website.

With Remotion: our project videos

On our projects page, each piece of work plays a video on hover: the client's real website inside a browser window, moving through several pages, with a label for each one and transitions between them.

It's the perfect case for Remotion: six videos with the same structure. There's a single composition that receives the project's name and, from it, loads the screenshots of its pages, its domain and its logo. The screenshots are taken automatically from each website with a browser controlled by code. Adding a seventh project means adding a data entry, not building another video.

Since these videos are seen in a card and not full screen, we export them as WebM with AV1 at two sizes, 1600 and 960 pixels wide. Each one weighs between 180 and 670 KB. By tuning the encoder (SVT-AV1 with preset 0 and CRF 52) we cut the weight by 23% compared with our first settings, with a VMAF score —Netflix's perceived-quality metric— of between 96.8 and 99 against the original.

With HyperFrames: the yuGraphik promotional video

The promo is the opposite: a one-off piece with a lot of design. It's 37.5 seconds in seven scenes, with real Google searches, real Search Console data and our clients' websites, with 3D camera moves. Almost everything on screen is already web material: search results, a chart, browser windows. Writing it in HTML and CSS was the natural choice, and the inspector let us tweak texts and sizes in seconds.

Two rendering lessons you won't find in any tutorial:

• 4K at 60 fps needs disk space. The first attempt to generate the YouTube master failed because it stored the frames on disk before encoding them: about 9 GB for under 40 seconds. With the streaming capture mode, which sends each frame straight to FFmpeg (in the version we used it's enabled with the HF_CAPTURE_PARALLEL_STREAM=true variable), the full render took 1 minute 11 seconds locally.
• Watch out for giant images inside 3D layers. Full-page screenshots of 2880×9600 pixels hung the render inside the camera moves. Cropping them to the visible part fixed it.

Which format to export for the web: MP4/H.264 or WebM/AV1

Once the render is done, there's a decision that doesn't appear in any prompt and is the same with both tools: what format you upload the video in. For this very article we tried both routes with the "Launch 2026" reel, so the figures below are real, not lab figures.

• MP4 with the H.264 codec. It's what Remotion and HyperFrames export by default and the most compatible: it plays in any browser, phone or editing program without surprises, with hardware decoding even on the most modest devices. It's the safe option when the video may end up anywhere outside your control, and the one we used to upload the promo to YouTube, which re-compresses everything it receives anyway.
• WebM with the AV1 codec. It compresses noticeably better than H.264 —between 30% and 50% less weight at similar quality— in exchange for longer encoding time. Its support is already solid in Chrome, Firefox and Edge, but it still lags in older versions of Safari and iOS. Before dropping H.264 as a fallback, it's worth checking real compatibility on caniuse.com/av1.

We made four passes on this article's reel, and each adjustment genuinely cut weight:

The biggest jump didn't come from raising the CRF, but from lowering the resolution. The video is shown on this page at a maximum of 520 px tall: exporting it at 1920 px was spending bits on detail nobody gets to see. Matching the output resolution to the real size at which the video will play usually cuts more weight than squeezing the codec.

The practical recommendation: if you need maximum compatibility, or you're uploading the video to a platform, export as MP4/H.264. If you prioritise minimum weight and control where it plays, as in this article or on our projects page, export as WebM/AV1.

The detail that changes everything: the assistant reviews its own work

Here's the real difference between asking a chatbot for something and using an assistant that works on your project. A visual flaw —text overflowing its box, two elements overlapping, a colour that can't be read— doesn't show up as an "error": the file is valid, but the video looks bad. A blind assistant would hand it over without a second thought.

Claude Code, with the skill loaded, closes that gap by reviewing itself:

1. It builds the video.
2. It generates still images of the key moments (npx remotion still in Remotion, npx hyperframes snapshot in HyperFrames).
3. It looks at them —yes, it actually looks at them— searching for overflowing text, overlaps or poor contrast.
4. If something's off, it fixes it, checks again and repeats until it's right.

HyperFrames adds an automatic check, npx hyperframes check, that validates the composition before rendering: animations that can't be seeked to a specific instant, contrast problems or elements out of place. On our promo, we ran it after every change. It's the difference between "this should look fine" and "I've checked that it looks fine".

Why the movement feels natural

You don't need to master this to direct the assistant, but understanding it helps you ask better. The key to an animation feeling pleasant is the type of movement. Instead of a mechanical, constant shift, Remotion imitates springs: elements that arrive with inertia and settle naturally, like real objects. HyperFrames uses GSAP's easing curves, which achieve the same thing under another name: a power3.out starts fast and brakes smoothly; an expo.out brakes even later.

That movement can be tuned to achieve different feelings, and you can ask Claude for the character you're after:

It's exactly the kind of nuance a professional editor adjusts by hand for hours and that here is solved with a sentence.

The superpower: templated videos, at scale

All of the above is already convenient, but the compelling reason to adopt this approach is mass production of variants. The idea: you turn your design into a template and tell it which parts change —a headline, a figure, a colour, an image—.

From there, the same video works for an ad with "Save 20%" in blue and for another with "Free shipping" in green. And with a list of data, hundreds of videos are generated in one go. Each tool solves it in its own way:

• In Remotion, what changes are the composition's props, with their types validated. The duration can also be calculated from the data, so a video with more content runs longer without touching anything. It's what we use for the project videos.
• In HyperFrames, the composition declares its variables and each render receives them with --variables. With --batch and a JSON file, it generates one video per row.

The result stops being a dead file: it's a living piece rebuilt infinite times from your data. A traditional video editor simply can't compete here: making a hundred versions by hand is unfeasible; with a template, it's automatic. For this particular use, Remotion still has the edge: it's been its home turf for years and it's better documented.

Your brand inside the assistant: a skill with your brand guidelines

We saw that a skill is a knowledge package the assistant consults. Well: besides the Remotion or HyperFrames ones, you can create your own with your brand identity. It's probably the most valuable idea of this whole approach for a business.

The idea is to put two things in that skill:

• Your brand rules (your brand guidelines in a version the assistant understands): the exact colours, the typefaces, the tone, how and when to use the logo, safety margins, what's allowed and what isn't.
• The brand assets the video can access directly: the logo in its different versions, icons, typefaces, backgrounds or textures, product photographs…

With that installed, you don't have to explain your brand every time. You ask it to "make a reel announcing the new service" and the assistant already knows which blue is yours, which typeface to use, which version of the logo to place depending on the background and where to find the icon it needs. The video comes out on-brand by default, not by chance. And the skill doesn't depend on the tool: the project videos, made with Remotion, and the promo, made with HyperFrames, came from the same brand skill, which is why they share the blue, the typeface and the background without anyone checking by hand.

The benefits show straight away:

• Automatic consistency. Every video breathes the same identity, without endless reviews to fix a misplaced colour or logo.
• No loose assets. No more "where was the white logo?" or using an old version: the assistant always pulls the right resource.
• Scale without losing the thread. A hundred personalised videos that, despite being different, clearly look like the same brand.
• Consistency across people. It doesn't matter who asks for the video: the result follows the same rules, because the judgement lives in the skill, not in someone's head.
• One brand, one place. If the identity evolves —new colour, new logo—, the skill is updated once and all future videos inherit the change.

It's the video version of something we already champion on the web: the brand as a reusable system, not as a file everyone interprets in their own way.

Beyond the basics: voice, data and captions

Remotion doesn't live in isolation: it has official packages that connect it to external services, and Claude Code knows how to wire them up for you. You don't need to know what each one does, but it's worth knowing the map of what can be plugged into a brand video:

In HyperFrames, the map is the same but the plug is different. There are no specific packages because none are needed: since the video is an HTML page, fonts load as on any website, Lottie works as-is and any API that returns text, images or audio integrates just as it would on a website. For voice and captions, its skills include their own workflows for audio and for captions over recorded footage.

Beyond that table, there are three things worth being clear about in how the assistant works with these pieces:

• Captions can be local or in the cloud. If you'd rather not send the audio to any service, Whisper runs on your own computer; if you prioritise convenience, the OpenAI or ElevenLabs API solves it in seconds. You choose the balance between privacy and speed.
• Charts and data. Animating bars, lines or counters from a table is straightforward, ideal for results summaries; with the data coming from a spreadsheet or a dashboard, the chart redraws itself. The Search Console chart in our promo is made this way, with the real data.
• Images, audio and video clips. They're integrated, trimmed and combined with the animations; the assistant handles the technical details so that, for example, embedded videos don't flicker.

The beauty is that you don't install or configure any of this: you tell Claude Code "add a voice-over with ElevenLabs and automatic captions" and it picks the right piece, connects it and leaves it working.

Producing a lot: working in the cloud

Creating videos on your computer is fine for one-off pieces, but generating hundreds at once overwhelms it. To produce at scale, the heavy lifting is delegated to the cloud, which splits it across many machines working in parallel. What would take minutes locally is done in seconds.

Both tools allow it. Remotion does it on AWS Lambda with a very mature and documented system. HyperFrames renders on AWS Lambda, Google Cloud Run and HeyGen's cloud. For any service that generates video on demand or campaigns with thousands of variants, this isn't a luxury: it's what makes the idea viable.

When each option makes sense (and when neither does)

There's no tool for everything. This is the line we use to decide:

The short rule: if the video repeats with variations, Remotion; if it's a one-off piece with a lot of design, HyperFrames; if it's recorded footage, a good old editor.

Why we like this workflow as an agency

At yuGraphik we work with the same philosophy on the web: we build sites in code instead of relying on visual builders, because the result is faster, more reliable and cheaper to maintain (we explain it in Next.js vs WordPress). Video in code is the natural extension of that idea: the brand lives in reusable pieces and producing version one hundred costs the same as the first.

Having two tools isn't a problem, it's an advantage: the brand judgement lives in the skill, not in the tool, so we pick whichever fits each video best without the result changing style. And adding an assistant like Claude Code knocks down the barrier this approach had —you needed to know how to code—: now you describe what you want, the assistant builds it, checks that it looks right and you direct.

Conclusion

Generating video with Claude Code doesn't replace the video editor for recorded footage, but it elegantly solves what that editor can't handle. Remotion is the mature option for repeatable video at scale: data-driven templates, hundreds of variants, well-proven cloud rendering. HyperFrames is the new option for design-heavy video: everything a website can do, turned into video, with a visual studio and a free licence. The workflow is the same with both —create, describe, preview, generate— and with both the assistant reviews its own work.

If video has become a repetitive task in your business, or you need a piece that presents your brand with the same care as your website, that's exactly the scenario where this approach saves the most time. In our web development service we apply these same automation ideas; if you'd like to explore how it would fit your brand, let's talk.