How we made our product film with Remotion

Remotion is a framework that lets you write a video as a React program. Each frame is a web page rendered at a given moment, and Remotion turns the sequence of frames into an MP4. We used it to make the five minute product film on our home page. Every product shot in it is a real screenshot of the running console, and the camera moves, captions and narration are all code. This post covers how that works, what it was good at, and where a timeline editor would have been the better tool.

What is Remotion?

Remotion renders React components to video. It is made by Remotion AG in Zurich and has been public since February 2021. You write a component, ask Remotion which frame it is on, and draw that frame. A composition declares the width, height, frame rate and length. Inside it, useCurrentFrame() returns the frame number, and helpers such as interpolate() and spring() turn that number into a position, a scale or an opacity. <Sequence> places a scene at a point on the timeline. Audio and video tags bring in sound and footage. The recommended ones now live in @remotion/media, so older tutorials that use the tags from the main package are out of date.

You preview in Remotion Studio, which runs in a browser with a scrubbable timeline. You render with the CLI or from Node, which opens each frame in a headless Chrome and encodes the result. H.264 is the default, and H.265, VP8, VP9, AV1 and ProRes are also supported. For long or frequent renders, Remotion Lambda splits a video into chunks and renders them in parallel.

Is Remotion free?

For individuals and small companies, yes. Remotion's licence is free for individuals, non-profits and for-profit companies with up to three employees. A company of four or more needs a company licence, and the rule goes by the whole company's headcount, not by how many people write video code. The licence FAQ says the free licence has no missing features. In October 2026 the company licence cost $25 a month for each person who writes Remotion code, or one cent a render with a $100 monthly minimum for automated rendering. The code is public on GitHub, but the licence is Remotion's own, not a standard open source licence, so read it before you build on it.

Why write a video as code?

Because our film is about a product that changes every week.

A screen recording goes out of date the day a label moves. Our film is built from screenshots taken by a script against a demo workspace. In that workspace, Quillfern Coffee, a made up company, real Claude agents did the work: real runs, real pull requests, real reviews and real proof. When a screen changes, we re-run the capture and render again. The camera moves, the captions and the timing stay where they were, because they are code that points at named shots.

Three other things were easier as code than in an editor:

• One design system. The film imports the console's own colour tokens and fonts, Inter and Nunito. A colour in the film is the same value as the colour in the product, not a match someone picked by eye.
• Review in a pull request. A change to a scene is a diff. Someone can see that a caption moved from frame 2,460 to 2,490 and why, which no exported project file shows.
• Rules you can enforce. We agreed a few rules for the film before anything was cut, and code holds them. Every shot opens on the whole screenshot before the camera moves in. What a line is about stays sharp and the rest dims, with no boxes or callout bubbles drawn on top. There is one caption track, so the film works with the sound off.

How did the narration work?

The voice is one continuous take, read straight through. A script cuts it at its own pauses into the 52 lines of the script, and each line starts on its caption. If a line runs long, the next one waits for it. The cut points were found by matching the pauses in the take to the lengths of the lines, so a new take means running that matching again, not editing a table by hand.

What did it cost to render?

Mostly patience. The film is 5 minutes 25 seconds at 1920 by 1080 and 30 frames a second, which is 9,750 frames, and every one is a page load and a screenshot. Screenshots are captured at twice the screen size and the camera zooms in to about twice, so 1080p is the native resolution. A 4K render would only upscale the product shots and soften them.

Two practical notes. Rendering needs a headless Chrome, and Remotion will download its own if none is installed. Our project reuses the one our capture script already had. Second, we kept the video project outside the product's package workspace, so the product's own builds never install Remotion or a browser.

When is a timeline editor better?

More often than code fans admit.

If the video is mostly live footage, a talking head or an edit that depends on feel, an editor is faster. You see the cut as you make it, and nobody needs to know React. Remotion's Studio narrows that gap but does not close it. Rendering runs in a browser, and Remotion's own performance notes warn that effects such as blur, shadows and gradients can be slow on cloud machines without a GPU. Every timing change is a code change, which is a cost when the person with the eye for timing is not the person who writes code.

Remotion is worth it when the video is built from things that already exist as data or screens, when it has to be redone as they change, or when you need many versions of the same video. A product walkthrough meets all three.

What does the film show?

A working day at Quillfern. People's tasks and agents' tasks sit on one board, each with a definition of done. An agent reconciles a month of invoices, finds a payment made twice, and files proof before a person closes the task. A review catches a regression in an agent's pull request and sends it back. A status change to Completed is refused because no proof is attached. The week ends with what was spent, what was refused and where the time went. Watch it on the home page.