Remotion vs a screen recording for app demo videos, with Claude Code

Use Claude Code with Remotion when the video is something you can draw: a launch teaser built on big type, an animated chart, a logo sting, a feature that isn’t built yet. Use a screen recording of the real app when the viewer needs to see it work, as in a help-center clip, an onboarding walkthrough or an App Store preview. Everything in a Remotion video is drawn by code or placed there as media, so your app shows up in it as a rebuilt copy, as screenshots, or as a recording you drop in, which is how you get both.

The recording half of this page is a real cut of Ellie, the planner I build, made by Claude Code with Moonjar, our product (a Mac app in early access). No Remotion render was made for this article, so it makes no claims about how fast or easy Remotion is; the Remotion half is described from Remotion’s own docs, license and published skills, read on September 19, 2026.

If the answers point both ways, as they usually do for a launch video that should show the real product, animate the open and the end card in Remotion and put the recording in the middle. The last sections cover how, and what Remotion’s license costs a team.

Remotion is a React framework for making video. A React component draws what each frame should show, and a composition pairs it with the video’s width, height, frame rate and length in frames, all set in code. Claude Code’s part is writing and changing those components, opening Remotion Studio so you can preview them, and running the render. If you would rather have your agent write plain HTML than React, Remotion vs HyperFrames compares the two.

Remotion supports this directly. Its guide to prompting videos with coding agents names Claude Code, Codex, Kimi Code and OpenCode, lists Node.js as a prerequisite, and notes that most coding agents need a paid subscription. It starts a blank project, adds Remotion’s Agent Skills and starts the preview like this:

npx create-video --yes \
  --blank my-video
cd my-video
npm install
npx remotion skills add
npm run dev

Then you open a second terminal in the same folder, start claude and describe the video.

Remotion also maintains a Claude Code plugin with the same skills. You add Remotion’s marketplace with claude plugin marketplace add remotion-dev/claude-code-plugin, install the plugin with claude plugin install remotion@remotion and restart Claude Code. The plugin page says Claude Code then loads the relevant skills on its own, and you can also call /remotion-best-practices directly.

Remotion’s Claude Code plugin page, with the two commands that add its marketplace and install the plugin. Screenshot of remotion.dev, captured September 19, 2026.

Remotion’s skills cover creating projects, writing compositions (animation, layout, type, media and audio), opening the preview, rendering, captions and more. They are guidance for writing Remotion code; none of them records a screen. When the preview looks right, ask Claude Code to render, or run npx remotion render yourself; it asks which composition to render if you don’t name one, and writes to the project’s out folder.

A Remotion video shows what its code draws. For a product video, that leaves three ways to get the product on screen:

1. Rebuild the UI in React. Claude Code writes components that look like your screens and animates them. Every frame is under control, and nothing on screen comes from the running app, so the labels, timing and behavior are whatever the code says they are.

2. Animate screenshots. The screens are real stills, and any motion between them, such as a drawn cursor or a zoom, is added in code. What happens between two screens is made up.

3. Embed a recording. Remotion calls its <Video> component, from @remotion/media, the recommended way to embed video; it plays a file from the project’s public folder in step with the rest of the timeline.

The first way is the one most likely to drift from the app, and a Remotion workflow built for launches guards against it. EveryInc’s open-source product-launch-video skill (MIT licensed) is a Claude Code skill plus a Remotion scaffold for 15 to 30 second launch videos at 1920 by 1080. It asks for a screen recording of the product, but its SKILL.md says the recording is “used as design inspiration only”, a source of truth for the app’s real UI copy. Its rules say to screenshot the actual app, mirror what’s there and never invent labels. The scenes themselves are built in Remotion.

A recording starts from what the app actually did. The frames below are from a 9.5-second cut of one Ellie feature, dragging a task from Braindump onto the day’s calendar. The recording is of Ellie on the iPhone 17 Pro Simulator with demo data, made September 16, 2026, and the cut puts the phone in a frame on a photo background and zooms in 1.9 times on the drag.

Two frames from the finished cut, cropped to the phone. Left, 3.3 seconds in: the task is lifted out of Braindump under Ellie’s own Drag to calendar to schedule hint. Right, 6.0 seconds in: the task sits on the calendar from 11:00 to 11:35 AM, its 35-minute estimate. Made with Moonjar from Ellie’s demo data, recorded September 16, 2026. Background photo by Bernd Dittrich on Unsplash.

Two details in those frames came from Ellie, not from a prompt: the “Drag to calendar to schedule” hint that appears once the drag starts, and the block that lands from 11:00 to 11:35 AM, matching the task’s 35-minute estimate. A rebuilt version would need someone to know both and write them. A recording shows what the app did; what you add in the edit (cuts, speed changes, drawn taps) still needs checking against it.

What Claude Code edited here was the cut, not the app. The cut’s history in Moonjar lists each step, attributed to Claude Code: it made the cut from the take, one batch of edits kept two stretches of the recording (4.2 to 7.2 seconds and 8.1 to 14.6 seconds) and added a zoom at 1.6 times, a second edit raised the zoom to 1.9 times, and then it rendered a preview and a final 2560 by 1440 MP4 at 30 fps. The first and last entries are about two minutes apart. The recording itself is left untouched, so it can be cut again; Claude Code video editing walks through a second cut of the same take, call by call.

In Moonjar the agent works on a labeled timeline instead of code: clips are C1 and C2, zooms Z1, captions T1, and an edit is a batch of operations such as trim, cut, speed, add_zoom and add_caption that applies all at once or not at all. It records the iOS Simulator or a Mac window, runs as a local MCP server for Claude Code, Codex and other MCP clients, and reports the dead time in a take along with ready-to-send cuts. It’s in early access with no published price; you can ask for early access.

Recording has limits of its own:

• It can only show what exists. A feature that isn’t built, or a screen with the data you wish it had, has to be set up in the app before anything is recorded.

• A redesign means a new take. When the UI changes, you record again and cut again; the old cut keeps showing the old app.

• Sound comes later. Moonjar’s renders are silent, so music or a voiceover goes on in an editor afterward. In Remotion, audio is part of the composition.

• A take has no motion design. A recorder can add captions and zooms, but a title sequence, a chart or a branded end card is Remotion’s kind of work.

The last row is Apple’s rule. App Review Guideline 2.3.4 says previews “may only use video screen captures of the app itself”, and allows narration and text overlays to explain what the footage doesn’t. The App Store preview guide covers the sizes and export.

Remotion’s code is public on GitHub, but it isn’t free for every company. Remotion’s License & Pricing page and license FAQ said, as of September 19, 2026:

• Free License: individuals, companies of up to 3 people and non-profits. Commercial use is allowed. The FAQ adds the headcount of freelancers, agencies or studios you bring in to help operate Remotion on the same project, so 3 employees plus one freelancer on the project count as 4.

• Company License, Remotion for Creators: $25 a month per person who writes Remotion code, by hand or with a coding agent, for companies of 4 or more people. Everyone on the team who prompts Claude Code for videos needs a seat.

• Company License, Remotion for Automators: $0.01 per render with a $100 monthly minimum, for companies whose code calls Remotion’s render APIs, such as video editors, prompt-to-video apps and automated pipelines. Previews in Remotion Studio don’t count as renders. A company that needs both pays at least $100 a month in total.

• Enterprise License: from $500 a month, with custom terms and a private support channel.

A worked example: a company of six where two people prompt launch videos with Claude Code needs two Creators seats, $50 a month or $600 a year. It would need the Automators plan as well only if its own software rendered videos automatically, such as a pipeline or an in-app feature. Check the calculator on the pricing page for your own case. If the license is what puts you off, Remotion alternatives compares the other code, render-API and recording options.

Remotion’s License & Pricing page. Its calculator loads with Remotion for Automators switched on at 10,000 renders, which is where the $100 total comes from; a team that only prompts videos would switch on Creators instead. Screenshot of remotion.dev, captured September 19, 2026.

The terms will shift a little with the next major version. Remotion’s license file says the license changes slightly in Remotion 5.0, and the draft pull request preparing 5.0 names two changes: contractors count toward team size, and the Company License is bound to terms and conditions that arrive with 5.0. The latest release on September 19, 2026 was 4.0.526.

Moonjar has no published price while it is in early access.

You don’t have to pick one for the whole video. To combine them:

1. Render the cut to a file. Any recorder or editor works; Moonjar renders MP4, MOV, WebM or GIF.

2. Copy it into the Remotion project’s public folder. Remotion’s staticFile() turns a file there into a URL the composition can load.

3. Ask Claude Code to place it. For example: “Put public/demo.mp4 between a 2-second title and a 2-second end card, using <Video> from @remotion/media inside a <Sequence>, at 30 fps.”

4. Check the frame math. At 30 fps, a 9.5-second recording is 285 frames, so with a 60-frame title and a 60-frame end card the composition is 405 frames (13.5 seconds).

Remotion’s <Video> docs say it pulls the exact frame from the file during rendering, which keeps the footage in sync with Remotion’s timeline. This combination wasn’t built for this article; it is how Remotion’s docs describe embedding video.

Remotion also makes its own Recorder, which records a webcam and a screen in sync as separate streams and adds captions, layouts, chapters and music. It is built for videos with a facecam beside the screen, which a silent app demo usually doesn’t have.

• A launch teaser, a social clip built on type, a chart or a logo animation: Claude Code and Remotion. The design is the video, and the video lives in code, so a change is an edit and a re-render.

• A feature that isn’t shipped yet: Remotion, since there is nothing to record. Build the screens from the real designs and real labels, as EveryInc’s rules ask.

• A help-center clip, an onboarding walkthrough or a support answer: a recording. The viewer is about to repeat the steps, so the screen has to match what they’ll see.

• An App Store preview: a recording, because Apple accepts only screen captures of the app itself.

• A launch video that should show the real product: both, with the recording in the middle and Remotion around it. The Product Hunt guide covers the launch gallery the video sits in.

For the recording route from start to finish (planning the moments, recording, cutting and exporting), see how to make an app demo video.

How this was made: the Ellie frames and the cover come from a cut that Claude Code made with Moonjar, our product, on September 16, 2026, from Ellie’s demo data. They were taken from the cut’s render with ffmpeg on September 19, 2026, and the two frames were cropped and placed side by side. The Remotion pages were captured with Moonjar on September 19, 2026. No Remotion project was built or rendered for this article. Background photo in the Ellie frames and the cover by Bernd Dittrich on Unsplash. The text was drafted with AI assistance.