Product videos made in code
Why I build product and promo videos in Remotion, and the storyboard, motion system and QA loop that make code-made video look intentional.
Outcome at a glance
Videos are versioned like software, so a product change becomes an edit and a re-render instead of a new production.
Context
A SaaS product changes every month. Launch and demo videos made in a traditional editor go out of date quickly and are slow to update.
Problem
Each update meant rebuilding scenes by hand. Brand colors, type and timing drifted between videos, and there was no consistent quality check before a video went out.
My role
I storyboarded, built, reviewed and rendered the videos.
Approach
I build videos in Remotion, a framework that renders React code to MP4. Every scene is code, so it can be versioned, reviewed and re-rendered.
- StoryboardWrite the shot list before any code, using a fixed shot grammar for product promos.
- BuildCompose scenes from a brand motion system with shared colors, type and timing.
- Review stillsRender still frames, check them, fix, and repeat until every shot reads clearly.
- Final checksCheck captions, safe zones, aspect ratios and audio loudness before export.
What I built
- A brand motion system with shared tokens for color, type and timing.
- A visual QA loop that renders stills for review before a full render.
- A local AI voiceover server using Kokoro text-to-speech for narration drafts.
- Two Claude skills: one for directing product videos and one that holds the brand motion facts.
Outcome
Updating a video is now an edit and a re-render. Every video uses the same motion rules, so they look like one family.
What I learned
Video is easier to keep consistent when it is treated like software: one source, shared components, and a check before release.