How I made a narrated product video in code

Kindred Tales needed a short video that explains the product: you give a parent a year of questions, they answer one at a time, and the answers become a hardcover book. I made it with Claude Code and never opened a video editor. Claude Code wrote the script, built the scenes, recorded the narration, made and mixed the music, wrote the captions, and rendered the film.

The idea underneath is the same one in Make a motion graphics video in code: every frame is drawn by code from a moment in time. That guide builds the machinery from scratch for a 12-second film set to music. This film needed a narrator, and a narrator changes almost everything about how you work.

What it was built with

Claude Code worked inside the Kindred Tales code repository, so it already had the brand colors, the fonts, and the files our book renderer makes. The rest:

• Remotion 4, a framework that turns React components into video. Every scene and headline is a component. It’s free for individuals and companies with up to three employees. Larger companies need a paid license.
• ElevenLabs for the narrator’s voice and for the music bed.
• faster-whisper, a free speech-to-text model, so the AI could check what the narrator actually said.
• ffmpeg to trim bad takes, lay the music under the voice, and check loudness.
• Our own book renderer for the book on screen: a real cover and a real chapter page from a sample book.

Write it to be heard

One rule did more for the script than any other: the narrator never reads the words on screen. The screen says “A year of questions. One book of answers.” The narrator says, “You give her a year of questions. She answers them one at a time, whenever she feels like it.”

Spoken lines need contractions, small asides, and room to breathe. The first version opened on a tagline, and the first slide showed up too fast and then just sat there. The second version opened with a question instead: “You know that story your mom tells? The one about how she met your dad… Could you tell it? All of it? Yeah. Me neither.”

Let the voice set the clock

Each line was recorded on its own. A small script sends one line at a time to ElevenLabs and saves how long each take runs, and the scene lengths come from those numbers. Re-record a line and the film re-times itself. Nobody nudges cuts by hand.

Every line also went out with the same direction in front of it: “Warm, relaxed, unhurried. Talking to a friend across a kitchen table, not presenting.”

Give the AI ears

This is the step I’d copy first. Claude can look at frames, but it can’t hear audio. Left alone, it will hand you a take with a stutter in it and call it done.

So every take was transcribed back to text with faster-whisper and checked word by word against the script. That caught takes where the voice repeated a phrase, stuttered, or read its own stage direction out loud. ffmpeg then cut out the clean pass.

The transcripts did a second job. Whisper reports when each word is spoken, so each scene got a cue table from those times: the headline appears at 2.3 seconds, the book opens at 7.98. The second half of a headline lands on the word that says it. The same timings made the caption file for YouTube.

Show the real thing

The third version swapped the drawn book for a real cover and a real chapter page from our renderer, shown flat. Photos of a printed book clashed with the flat style of everything around them. Each scene that shows the book says plainly that it’s an example and that the name and story are illustrative.

The brand lives in one theme file: Cormorant Garamond and DM Sans, the teal and cream, and a rule of one italic phrase per headline. Every scene inherits it, so no scene picks its own colors or type.

Match the music to the narrator

The first three music options were slow and tender, around 72 beats per minute, and they fought the upbeat narrator. The second round asked for something “bright and optimistic… about 100 to 108 bpm… nothing that competes with speech.” Bright acoustic guitar won. It sits 19 dB under the voice with a 1.5-second fade-in. At 15 dB under, it was too loud.

Keep every cut

Versions 1 through 4 all still exist as separate files. A revision never overwrites the last cut, so going back is opening a file, not rebuilding from memory. The final render is 1920 by 1080 at 30 frames a second, and the YouTube thumbnail is a single frame rendered from the same components.

Which way to build

If you’re making a narrated video for a real product, this is the way I’d build it. Remotion handles the components, the assets, and keeping audio and picture together, so you’re not writing that yourself. Recording line by line makes every fix cheap. And transcription is the only check I trust on audio, because it reports what was said, not what you asked the voice to say.

Help and support content is the next use I’m working through, right now. A how-to video built this way is cheap to keep current. When a step in the product changes, I change a line and render again instead of recording the whole thing over.

The plain-canvas studio from the other guide still earns its place. It’s short enough to read in one sitting, it needs no framework, and its music is composed in code, so there’s no license to check. For a short piece cut to music, or for learning how any of this works, I’d start there.

A few things held for both. Feedback works in plain language. “The first slide sits too long” and “there’s an awkward pause after Ali” each turned into a code change within minutes. More than about a second and a half of silence between lines feels like the film has stalled. And the second film comes together quicker than the first, because the kit already exists.

Exploring AI for your business?

I’m happy to compare notes. Tell me what you’re trying to do and where it’s stuck.