3 steps to programmatic videos with Remotion

Programmatic videos with Remotion are videos rendered from React code instead of edited by hand. You describe each frame as a component, pass in data, and export the result. Render at scale with AWS Lambda. This guide walks through a real project that produced over 1,000 customer recap videos this way.

What Are Programmatic Videos With Remotion?

Programmatic videos with Remotion are videos generated from code: a React component renders each frame, and the framework exports the sequence as a finished video file. Remotion is a React-based framework, not a hosted platform, so the output is exactly what your code and data describe. The developer behind this project, who publishes as André Elias and runs the Crazystack TypeScript community (Crazystack), used it to build a year-in-review generator for his fintech's customers.

The mental model is simple. A video is a sequence of still frames played in order. Remotion hands your component the current frame number, and you return the visual state for that frame. Add data per user, and every render becomes a unique video. The Remotion documentation covers the component API, parametrized renders, and deployment options.

Why Build a Year-in-Review Generator?

The project goal was a customer recap: a short animated video showing each client's sales volume, customer count, and revenue over the year. Platforms like Spotify and Duolingo popularized this format with their annual Wrapped campaigns, and the strategy is the same here. Customers share flattering, personal stats on social media, their followers discover the product, and the share itself becomes organic distribution.

The build was scoped as an MVP. The developer planned a long list of features, then asked ChatGPT, OpenAI's AI assistant, to help prioritize which data points mattered most for the first version. One open question he flagged: whether to include total revenue, since some customers may not want to publish their earnings publicly. That decision belongs to the product team, not the rendering pipeline.

How the Rendering Pipeline Works

The pipeline has three stages, all driven from the same codebase. Each stage is a separate concern, which keeps the project maintainable as the animation grows.

1. Template. Write one React component tree that represents the recap: intro, stats cards, and outro animation.
2. Data mapping. Pass each customer's metrics as props so every render differs only in the numbers and labels.
3. Render and distribute. Render locally for previews, then use AWS Lambda, Amazon's serverless compute service, for cloud rendering at scale, following Remotion's own Lambda rendering guide.

The developer's practical tip is structural: define the animation as a list of scenes, each with its own duration and gap, then map over that list. Hand-tuning durations on individual components works for a first pass, but any later change turns into manual re-timing across the whole timeline. A data-driven scene list makes edits cheap.

Sourcing Animations: Lottie Files and Google's Animated Mode

Hand-crafting every animation is slow for a first project. The build pulled ready-made Notion assets from LottieFiles, a library of Lottie animations, which can be downloaded, recolored, and dropped into a Remotion composition. The developer also used Google's animated mode asset, which can be copied into a project directly as code.

One gotcha surfaced during the build: the platform defaults to dark mode, but the chosen Lottie animation carried a soft shadow designed for light backgrounds, which looked wrong on black. Switching to a white background fixed it. Animation assets carry their own visual assumptions, so test them against your actual background color before committing.

Remotion's own showcase includes a GitHub Wrapped example under its use cases, which the developer used as a reference for pacing and visual style. Copying a proven structure is faster than inventing one.

Rendering 1,000 Videos in the Cloud

Local rendering works for previews, but rendering 1,000 videos on a laptop is impractical. Remotion's Lambda layer distributes frames across parallel serverless functions, so the total render time scales with concurrency rather than with a single machine. The Remotion Lambda documentation walks through the AWS account setup, permissions, and the render call.

The developer describes the setup as straightforward: create an AWS account, follow the documented steps, and the render runs. Costs and concurrency limits depend on your AWS configuration, so check the current Remotion and AWS pricing pages before committing to a large batch. No figure quoted here should be treated as fixed.

Privacy and Distribution Choices

Personalized videos built from customer data raise two questions the code cannot answer. First, which metrics are safe to show: revenue figures may be sensitive even when the customer is proud of them. Second, where rendering happens: data leaves your system and enters the render environment, so the pipeline should handle customer data under your normal data-processing agreements.

The distribution model is deliberate. The videos are designed for customers to post on their own social channels, turning a per-customer recap into a referral loop. That only works if the shared metrics are ones the customer chooses to reveal. Making revenue optional, or omitting it, is a reasonable product decision.

Frequently Asked Questions

• Do I need to be a React developer to use Remotion? React knowledge is the core skill, since compositions are React components. If you can build a component with props and state, you can build a Remotion video. Animation timing takes some practice but follows the same code patterns.

• Can Remotion render videos for free? Rendering on your own machine is free under Remotion's license terms; check the current license on remotion.dev for company-use conditions. Cloud rendering through Remotion Lambda incurs AWS compute costs that scale with video length, resolution, and concurrency.

• How long did this project take to build? The developer planned it for a few weeks and then completed the MVP in a single working day, starting at 9 a.m. and iterating through the afternoon. That speed came from using ready-made Lottie animations and an existing framework rather than custom Notion design.

• Is the project code available? The developer stated he was considering releasing the code as open source through a GitHub link in the video description. Check the video description or the Crazystack site for the current status of that repository.

Turn Your Own Videos Into Written Articles

This article itself started as a 12-minute YouTube walkthrough of a code-driven video project, which shows how much explainable knowledge sits inside a typical developer video. If you publish walkthroughs, interviews, or lessons on YouTube, the same content can work in written form for readers who search instead of watch.

Skala Blog turns a YouTube video into a structured written article: paste the URL, the video is transcribed, and an article draft is generated for you to review and publish.

Source video