We needed a way to produce professional explainer videos without paying for software every month. After Effects costs money. Premiere costs money. Outsourcing motion graphics costs even more. So we built our own video production system using Remotion, a tool that lets you write React components and render them directly to MP4. No subscriptions. No design software. Just code and a render command.

What Remotion Actually Does

Remotion works by treating every video frame as a React component. You write JSX, you define animations using hooks, and Remotion renders each frame to a PNG sequence before encoding the final MP4. The result is a fully programmatic video pipeline. If you can describe an animation in code, you can render it as a video. Text that types itself. Progress bars that fill on a timer. Browser windows that appear and scroll. All of it lives in a React file and re-renders in seconds when you change the content.

The video we built as our internal proof of concept is called the Claude Terminal Explainer. It runs 82 seconds at 1080p. The structure is four sections. Each section shows a workflow step inside a dark terminal window with a typing animation, then transitions to a browser preview showing the result. The whole thing was written in React and rendered locally on a standard PC. No cloud rendering. No After Effects project file. No timeline editor. The content lives in a data object at the top of the file. Change the copy, run the render command, get a new video.

After Effects costs around $55 per month. Our Remotion setup costs $0 per render. Every explainer video we produce after the initial template build has zero marginal cost.

Why This Matters for Businesses That Produce Content Regularly

The real power of this approach is reusability. A traditional motion graphics workflow means a designer opens a project file, edits text layers manually, re-exports, reviews, adjusts, and re-exports again. Each video is a fresh production job. With a Remotion template, the structure is already built. The animations are already tuned. You update the content variables and render. For an agency producing onboarding videos, product demos, or process explainers for multiple clients, that difference compounds fast. What takes a day in After Effects takes minutes in Remotion once the template exists.

This is not the right tool for every project. If you need a one-off brand video with custom transitions and a full soundtrack, a video editor still makes sense. But if you produce the same category of video repeatedly, whether that is client onboarding explainers, weekly summary animations, or workflow walkthrough content, then a code-based template is worth the upfront investment. Balay ni Bruno & Co. built this capability internally so we can produce explainer content for clients at a fraction of the usual production cost. The template gets better with each video we ship. The cost per video goes down over time. That is the compounding logic behind building a programmatic video system instead of renting software indefinitely.

Key Takeaways

  • Remotion renders React components as video. Change props, re-render, new video.
  • Programmatic video means templates, not manual editing. One animation built once, reused infinitely.
  • Local rendering eliminates per-render costs and keeps source files on your own machine.
  • The BBC Terminal Explainer is a reusable template — swap the workflow content and it renders a new video in seconds.