Recording to Final Video — Remotion, Claude Code, ElevenLabs
How three AI tools chain together to turn a demo recording into a narrated, edited video with almost no manual editing.
Takeaway 01
Remotion turns code and assets into video — it is React for rendering MP4.
Takeaway 02
Claude Code orchestrates the pipeline with one prompt: "generate a video."
Takeaway 03
ElevenLabs supplies the voiceover via API; Claude wires credentials and script.
Remotion — Programmatic Video From Code
Remotion is a framework that lets you build video as if it were a React app. Components compose into scenes, timelines are first-class, and the final output is a real MP4 you can ship. It is the rendering engine at the end of this pipeline.
Remotion makes video editable like source code. That is what lets an AI agent meaningfully change the video — it can edit a file rather than re-do a non-linear edit.
For demo videos, Remotion is well-suited: the captured screenshots become image sequences, the narration becomes an audio track, and overlays are React components positioned with normal layout code.
Remotion does not "generate" video the way a diffusion model does. It deterministically renders code into frames — no LLM is involved in the pixels.
Claude Code as the Orchestrator
Claude Code reads the demo recording artifacts, the narration script, and the Remotion project, then writes the code needed to assemble the video. The user issues one high-level prompt: "Hey, I want to generate a video."
The agent is the glue. Without an LLM here, you would manually edit Remotion source files for every demo change. With Claude Code, the agent picks scenes, drops in voiceover, and trims dead air on request.
This is the "agentic" part: Claude Code does not run a fixed pipeline. It reads context, decides what to do, runs commands, and iterates. You can ask it to "cut this time" or "remove an overlay" in plain English and it modifies the Remotion project accordingly.
ElevenLabs for Voiceover
ElevenLabs provides a hosted text-to-speech API that produces natural-sounding voice from a script. You supply credentials to Claude Code once, and the agent calls the API to synthesize narration for each demo step.
The narration is the connective tissue. Recorded screenshots without a voiceover are just slides — adding TTS turns them into a real demo video.
The script comes from the demo file itself. Each demo step in the AI in SharePoint demo tool has descriptive text that doubles as a narration script. ElevenLabs reads it; the result lands on the Remotion timeline.
Remotion Studio for Iteration
Remotion Studio is the local preview UI. After Claude Code generates the initial video, you can open Studio to scrub the timeline, find rough cuts, and identify dead air. Then you go back to Claude Code with a specific ask like "find dead air and cut those things."
The loop is: generate → preview in Studio → describe issues to Claude → regenerate. You never touch a video editor directly.
This works because Remotion projects are source files. Claude can read what is there, understand which scenes are too long, and re-emit a tighter timeline.
Where the Pipeline Breaks
The result is not perfect. The author describes the cuts as "abrupt" and the ending as "an abrupt end but not bad." The pipeline is good enough for backup material and social posts, not for a polished marketing video.
An unattended AI pipeline does not yet produce broadcast-quality video. The economics are about saving hours of editing for content that did not warrant that polish anyway.
The win is asymmetric. A few prompts produce a watchable video in minutes that you would have otherwise skipped editing entirely. The bar is "exists at all" versus "perfect" — and exists at all wins for demo backups.
Flashcards — Guide 02
02 · Applied
Remotion
tap to reveal →
A React-based framework for programmatic video generation. Renders code into MP4 frames, making video timelines editable like source files.
← tap to flip back
02 · Applied
Claude Code Orchestration
tap to reveal →
Using Claude Code as the agent that reads recordings, writes Remotion code, calls ElevenLabs, and iterates on edits in response to plain-English asks.
← tap to flip back
02 · Applied
ElevenLabs
tap to reveal →
A hosted text-to-speech API that synthesizes natural narration. Provides the voiceover track for the AI-generated demo video pipeline.
← tap to flip back
02 · Applied
Remotion Studio
tap to reveal →
The local preview UI for Remotion projects. Used to scrub the timeline and identify rough cuts before asking Claude Code to refine the output.
← tap to flip back
02 · Applied
Dead Air Cut
tap to reveal →
An agent-driven edit that asks Claude Code to detect long silences in the timeline and shorten them. Iterative refinement via natural-language prompts.
← tap to flip back
02 · Applied
Unattended Pipeline
tap to reveal →
A workflow that runs end-to-end with only a couple of prompts and no manual editing — trading polish for radical reduction in human time per video.