post agentic · 2026-04-29 · 3 min read

Coding a product demo video with Remotion and Claude Code

I’d just spent a few days standing up an in-house search index. Files in blob storage, Spark to transform, OpenSearch to host the result. By Wednesday the cluster was healthy, queries were returning, and someone asked the inevitable. Can you record a walkthrough?

I didn’t open After Effects. I opened a terminal.

npx create-video@latest demo-video

This post is about the hour that followed. Building a 2-minute product-deck-style video by writing React components and prompting Claude Code for the scenes. No timeline. No drag-and-drop. No keyframes. Just a src/scenes/ folder.

What Remotion actually is

Remotion lets you write a video as a React app. Each frame is rendered by your component tree. useCurrentFrame() is a hook. interpolate(frame, [0, 30], [0, 1]) is your fade-in. You preview in a hot-reloading studio at localhost:3000 and render to MP4 with npx remotion render.

The composition is regular code:

const SCENES = [
  { component: Scene01Title,           seconds: 7 },
  { component: Scene02TechStack,       seconds: 10 },
  { component: Scene03DataSources,     seconds: 26 },
  ...
];

Want a slide longer? Change a number. Want to swap two scenes? Reorder an array. Branch the file in git, diff your changes, revert a regression.

That’s the part that surprised me. Video, but with the same tooling discipline as a TypeScript service. No proprietary .aep file you can’t merge.

How Claude Code fit in

I prompted scenes one at a time. Build a tech-stack slide with five architectural layers. Make the data-sources slide animate per file with explanations. Drop the cursor, it didn’t add anything. Claude wrote the React, I scrubbed the timeline, gave feedback in plain English, it edited the file, hot-reload showed the change in 2 seconds.

The loop:

   prompt  →  file edit  →  hot reload  →  eyeball
     ↑                                        │
     └──────────────  refine  ────────────────┘

Cycle time matters more than the model. This loop is what made it feel like pair-programming a video.

Five things I learned

1. AI defaults are visually amateur. First-pass scenes had rainbow gradient bars under titles, repo names as titles, and emoji hexagons standing in for Kubernetes nodes. Every single one needed a senior eye to say no, drop the gradient. The title isn’t a github handle. The model writes plausible code. It doesn’t have taste yet.

2. Pacing is the dominant variable. I gave the same correction four times across different scenes. Too fast, I couldn’t read it. The instinct is to dwell on visuals. AI’s instinct is to cycle through them. Every STEP_FRAMES = 120 ended up at STEP_FRAMES = 210.

3. Cursors and “interactive” gimmicks are cheap to add and the right instinct to remove. I had Claude render a fake cursor that “clicked” highlighted fields. It looked like a placeholder for an interaction that wasn’t there. I pulled it. The scenes were clearer.

4. Real data makes every scene land. The video is grounded in actual numbers. The total document count. A sample restaurant from the index. The exact latency of one query. Synthetic placeholder copy would have read as marketing. The pipeline that produced the video is the same pipeline that produced the data the video is about.

5. The feedback loop is the product. Remotion Studio hot-reloading on file save is what makes the Claude collaboration work. Without it you’re prompting blind. With it, each correction is verifiable in two seconds and you can iterate twenty times in an hour.

What I’d do differently

Storyboard first, code second. I started with a list of nine scenes. About a third got rewritten because the framing was wrong, not the implementation.

Pick a typography stack on day one. I left font-family: 'Inter', system-ui and never installed @remotion/google-fonts. Inter never actually loaded. Most of the looks slightly off feedback traced to that one missing import.

Treat the AI as a junior who writes fast and has no taste. That framing, fast hands and no eye, sets up the right division of labor.

Try it

npx create-video@latest
# pick "Blank", say yes to TailwindCSS and Skills
cd <project> && npm install && npm run dev
# in another tab:
claude

Then prompt it. Ten minutes in you’ll be diffing scenes like they’re React components, because they are.