Remotion video: how we made a product launch commercial in code

What Remotion is

Remotion is a framework for making videos with React. Its homepage puts it in three words: “Make videos programmatically.” Instead of placing keyframes on a timeline, you write components. Remotion hands each render a frame number, and whatever the component draws for that frame is the picture (Remotion: the core idea).

A video is a composition: a component plus four numbers, its width, height, length in frames and frames per second. The first frame is 0 and the last is the length minus one. You preview compositions in Remotion Studio, in the browser, and render them to a file from the command line or from Node.js.

The pieces you use in every video

• useCurrentFrame() returns the frame being drawn. Everything that moves is a function of it.
• <Sequence> and <Series> place scenes on the timeline. Inside a sequence the frame count starts again at 0, so each scene can be written as if it opens the video (Sequence, Series).
• interpolate() maps the frame to a value: opacity from 0 to 1 over 20 frames, a position, a price. Clamping stops the value at the end of its range, and an easing curve shapes the motion in between (interpolate()).
• spring() is a physics-based animation that overshoots and settles, the kind of motion interfaces use (spring()).
• @remotion/transitions provides transitions between scenes (transitions).
• Props carry the data: text, prices, colors, language. Default props let you design without data, and input props replace them when you render (parameterized videos).

Because frames are drawn with React and web technology, anything a browser can draw can go in a frame: CSS, SVG, canvas, web fonts, and the components of a product that is already built in React.

The example: Superame’s 28.8-second commercial

Superame (superame.lol) is a public project ranking where position is bought in whole dollars: the highest verified total holds #1. Dardo designed and built the product (Superame case study), and we made its commercial, the example in this article.

It runs 28.8 seconds, in Spanish, on a white background, and it is built from Superame’s own interface: project cards, the bid panel with its “Superar” (outbid) button, and the ranking list. We added it to dardo.studio on 14 September 2026, and a muted 1280 × 720 cut plays in the Superame tile of our portfolio.

The file says how it was made. Remotion writes “Made with Remotion” and its version into the comment field of the files it renders (Remotion: video metadata), and this one reads “Made with Remotion 4.0.520”.

Scene by scene

We timed the scenes from frames extracted from the file, two per second and ten per second around the bid, so each boundary is accurate to about half a second.

The other cards in the video are stand-in listings.

The file as delivered

Source: ffprobe on the published file (superame-your-project-v33.mp4), read on 29 October 2026.

Why this commercial suits code

Three things about this video make code a good fit. They are also the questions to ask about your own launch video.

It is made of interface

Every scene is a card, a panel, a list or a line of type, which is what the product itself is made of. When a product is built in React, Remotion can render its real components with its own fonts and colors instead of redrawn screenshots. When it isn’t, interface is still boxes, type and numbers, which HTML and CSS draw precisely. A video of faces, hands or illustrated characters has no components to reuse.

Its numbers have to agree

The bid counts up from $650 to $781, and two scenes later the same $781 sits on the #1 card, above the $742 that held the top spot. The ad follows the product’s rule: the highest total holds #1. In code, one value can feed every scene, so a new price changes every scene on the next render, and the order of the list can be computed instead of placed by hand.

The counter passes through $651, $655, $673, $702, $741, $770 and $780 before it settles: fast in the middle, slow at both ends. In Remotion, that kind of count-up is an interpolate() call on the frame number with an easing curve, rounded to whole dollars.

It may need versions

Superame runs in Spanish, Portuguese and English, and the commercial exists in Spanish, as one 16:9 file. With the text, prices and project name as props, an English or Portuguese cut is another set of props and another render, plus a check that the longer lines still fit. A 4:5 or 9:16 version works the same way, except that its layout has to be designed for the new frame (see the formats below).

How each beat maps to Remotion

We aren’t publishing the project’s source, so this table is not a copy of our files. It lists the documented Remotion tool for each kind of beat in the commercial.

Code or After Effects?

After Effects and other motion-design tools aren’t an older way to do the same job; they are better at different work. They also handle versions: an After Effects author can expose text, colors and numbers in a Motion Graphics template that editors change in Premiere Pro. After Effects can drive animation from JSON, CSV and TSV files, and data-driven templates take spreadsheet data in Premiere (After Effects data-driven animation, data-driven templates in Premiere). The difference is what the video is made of and where it lives.

Our rule of thumb: if the frames are mostly interface, type and numbers, write them; if they are mostly people, drawings or texture, animate them by hand. The two also combine. Remotion can render ProRes 4444 with an alpha channel, which Premiere Pro, Final Cut Pro and DaVinci Resolve open, so an interface sequence made in code can go into a video edited by hand (Remotion: transparent videos).

Rendering: one machine or the cloud

The command line renders a composition to a file. Without options it encodes H.264, the codec with the widest browser support in Remotion’s encoding guide. The --crf flag trades file size for quality, --props passes data from a JSON file, and --scale renders larger or smaller than the composition (CLI render options).

npx remotion render src/index.ts LaunchVideo out/launch-en.mp4 --props=./props/en.json

For many versions, Remotion’s Node.js APIs loop over a dataset: select the composition for each entry, then render it with that entry as its input props (render a dataset).

Remotion Lambda renders on AWS by splitting the video into small parts that many Lambda functions render in parallel, then joining them and uploading the result to S3. Remotion calls it the fastest and most scalable way to render its videos; the documented limits include about 80 minutes of Full HD video per render and no AV1. Remotion Cloud Run, the Google Cloud equivalent, is in alpha and, in Remotion’s words, “not actively being developed”, so we wouldn’t start a new pipeline on it.

For a single launch video of about 30 seconds, rendering on one machine with the CLI is the documented starting point. Cloud rendering earns its setup when you render many versions, or render on demand.

Sound, captions and formats

Audio

Audio files go in the project’s public folder and play through the <Audio> component. More tags mix more tracks, volume can follow the frame through interpolate() (a one-second fade-in is the documented example), and trimBefore picks a section of a file (importing audio, controlling volume). The Superame file carries a stereo AAC track at 48 kHz.

Captions

@remotion/captions works with transcriptions from Whisper.cpp on a server, Whisper in the browser, or the OpenAI and ElevenLabs APIs (transcribing audio). Captions can be burned into the picture or exported as an .srt file next to the render (exporting subtitles).

Sound off

Facebook lets each person choose whether feed videos start with sound (Facebook Help), and Meta’s Facebook Feed video spec lists captions as “optional, but recommended” (Meta ads guide). LinkedIn lists captions as optional (LinkedIn video ad specs). A launch video has to make sense muted. Superame’s does: its message is carried by on-screen text, “Lo lanzaste.”, “¿Y el resto?”, “Sí. El tuyo.”, “Que te vean.”, and the same cut plays muted in our portfolio.

Formats

Remotion’s own example registers the same component twice, at 1920 × 1080 and at 1080 × 1920 (the core idea). That makes a vertical version easy to render, not to design: Superame’s cards are wide, so a 4:5 or 9:16 cut would need its own layout.

Who needs a Remotion license

Remotion’s source is public, but it isn’t free for every company. Its license has two tiers:

• Free License: individuals, for-profit organizations with up to 3 employees, non-profits, and anyone evaluating Remotion who isn’t using it commercially yet. Commercial use is allowed.
• Company License: everyone else, which in practice means companies of 4 or more people.

Prices from remotion.pro.

If a studio makes your video

Remotion’s license FAQ answers this directly. If you receive only the finished file, such as an MP4, your company isn’t a user of Remotion and your headcount doesn’t count: the studio needs a Company License if it has 4 or more people, and the Free License covers it otherwise. If you own or operate the Remotion project, for example to render new versions yourself, both companies’ headcounts are added together, and the license is bought by whoever owns the project’s intellectual property; the studio can administer it for you.

The license file also says the terms change with Remotion 5.0. The pull request with the new text lists two changes: contractors count toward team size, and the company license is bound to Remotion’s terms and conditions. This is a summary, not legal advice; read the license and the FAQ for your own case.

What to have ready before you brief a launch video

• The interface you want to show, as it ships: screens, components, the design system.
• The story in five to eight beats, with the line of text each beat carries.
• The numbers that have to agree across scenes, and the product rule they follow.
• Every version you will need (languages, aspect ratios, lengths), decided before the first render, not after.
• The sound plan: music license, voice, captions.
• Where the video will run, and each platform’s spec.
• Who owns the project after delivery, which decides who needs the Remotion license.

What this example doesn’t show

We are publishing the finished file, not the project behind it. This article doesn’t describe its source code or how its compositions are organized, how long it took, what its audio track contains, what it cost or how many people saw it, and it claims no results from it. The scene times come from frames we extracted, accurate to about half a second. The commercial exists in Spanish and in 16:9; the other versions discussed above are what code makes possible, not files that exist.

How Dardo can help

We design and build products, and the videos that launch them: product launch videos made in code from your real interface, and product design for the interface itself. The Superame case study shows the product behind this commercial. If the video is part of a wider launch, our rebrand launch checklist covers the website and brand rollout around it, and SaaS website best practices covers the product pages a SaaS site needs. Tell us about your launch.