How We Built Our Promo Video Entirely in React

We needed a promo video for Alydo. Instead of hiring a production team or wrestling with After Effects, we built it entirely in React. Here's how that journey unfolded.

The Problem with Traditional Video

As a small team moving fast, traditional video production felt like a bottleneck. Hire an agency? Expensive and slow. Learn After Effects? Steep learning curve and hard to iterate. Every script change meant starting over.

We wanted something that fit how we already work: version controlled, component-based, and endlessly tweakable. That's when we discovered Remotion, a framework that renders video from React components.

Setting the Context

Before writing a single line of script, we had to answer a fundamental question: what kind of video is this? Problem-focused or feature-focused?

A feature-focused video shows off what your product can do. A problem-focused video makes the viewer feel the pain first, then presents your product as relief. We chose the latter. When someone feels understood, they pay attention.

This decision shaped everything that followed: the tone, the pacing, the visuals, even the voice direction. Getting this context right upfront saved us from countless rewrites later.

Crafting a Hook That Resonates

We studied what makes content spread. The best hooks create an emotional response in the first few seconds. They make you feel something before you think anything.

Our opening line: “Prices kept rising. Your budget felt it. Did you?”

That last question is designed to create a small moment of guilt or recognition. Most peoplehaven't been paying attention to how grocery prices have crept up. The question lands because it's true, and truth creates connection.

We borrowed this technique from viral content creators who understand that the hook isn't about being clever. It's about being felt.

Writing the Script

With our context set and hook crafted, we mapped out the full narrative. The video needed to tell a complete story in under 40 seconds:

1. The hook: Create that emotional jolt, make them feel heard
2. The problem: Deepen the pain, most families have no idea where their money goes
3. The magic moment: Introduce Alydo as the solution
4. The proof: Show the actual product in action
5. The close: Clear call to action

Each of these became a “scene”, a self-contained React component we could develop and polish independently.

Designing an Emotional Arc

The breakthrough came when we realised the video needed to feel different at each stage. The opening should feel anxious and unsettled. The solution reveal should feel calm and confident.

We built what we called a “mood system”, a simple concept where every visual element asks “what's the current mood?” and adapts accordingly:

• Anxious mood: Warm orange tones, jittery animations, elements floating erratically
• Confident mood: Fresh greens, smooth animations, calm and organised motion

This meant we didn't have to manually style every element. We just defined the mood for each moment, and everything followed.

Creating the Visuals

With React, we could build reusable components: a phone mockup, floating grocery icons, particle effects, animated charts. Once built, these became building blocks we could remix across scenes.

The hero moment, where chaotic grocery items spiral into the phone, took the most iteration. We wanted it to feel like the app was bringing order to chaos. After experimenting with different physics, we landed on a “vacuum” effect: items freeze dramatically, then accelerate into the centre with a satisfying spiral.

We also captured actual screenshots from the Alydo app and composited them into the video. This grounded the promo in reality. Viewers see the real product, not mockups.

Generating Voiceovers with AI

Rather than booking studio time or hiring voice talent, we used Google's Gemini text-to-speech API. We wrote the script with “director's notes”, things like “warm but slightly ominous” or “pause before the question.”

The AI-generated voice isn't perfect, but it's good enough for a startup promo. More importantly, we could iterate on the script endlessly without any additional cost or coordination.

We also experimented with ElevenLabs for different voice characters. Having options helped us find the right tone.

AI-Assisted Development

We leaned heavily on Claude Code throughout this project. Using its frontend-design skills, we could describe what we wanted for a scene and get working React components back. Need floating grocery icons with a specific animation feel? Describe it, iterate, done.

We also used the Playwright MCP integration in two ways. First, to capture screenshots of the actual Alydo app in action: the receipt scanner, the dashboard, the shopping list. These real screenshots went straight into the video, showing genuine product functionality rather than static mockups.

Second, we used Playwright to visually verify our Remotion output. Claude could take screenshots of rendered frames and help us spot issues: alignment problems, timing that felt off, colours that clashed. Having an AI assistant that could both write code and see the results made the feedback loop incredibly tight.

This combination of code generation and visual verification meant we could move fast without sacrificing quality. What might have taken days of manual tweaking became hours of collaborative iteration.

The Iteration Cycle

This is where building video in code really shines. Our workflow became:

1. Describe what we wanted to Claude Code
2. Get working components back
3. Preview in Remotion's studio
4. Use Playwright to capture and review frames
5. Iterate until it felt right
6. Commit to git

We went through roughly 40 iterations. Being able to git diff between versions, roll back experiments that didn't work, and track exactly what changed was invaluable. Try doing that with a Premiere Pro timeline.

Rendering the Final Video

When we were happy with the result, rendering was a single command. Remotion processes each frame and stitches them together with FFmpeg. Our 36-second video renders in about 2 minutes on an M1 Mac.

The output is a standard MP4 file we can upload anywhere: social media, our website, investor decks.

What We Learned

Start with the story

The script and emotional arc matter more than flashy visuals. We spent more time on the narrative structure than on any single animation.

Systems beat manual work

The mood system was a game-changer. Instead of making hundreds of individual styling decisions, we made a few high-level choices and let the system propagate them.

AI voices are viable

For certain use cases, AI-generated voiceovers are genuinely good enough. The ability to iterate without booking talent is worth a lot when you're moving fast.

Version control changes everything

Being able to treat video like code, with commits, branches, and diffs, made collaboration and iteration dramatically easier.

The Numbers

• ~16 hours across 2 days from start to finish
• 36 seconds of finished video
• 5 scenes telling a complete story
• 6 voiceover segments generated with AI
• ~40 iterations tracked in git
• $0 spent on video editing software

Would We Do It Again?

Absolutely. For a team that already thinks in components and version control, Remotion feels natural. The video isn't just an asset. It's part of our codebase. We can update it as the product evolves, localise it for different markets, or spin off variations for different channels.

If you're a developer curious about video production, Remotion is worth exploring. It won't replace professional video production for everything, but for certain use cases, especially where iteration speed matters, it's a compelling approach.

Curious about the final result? Watch the video on our homepage.