Ship the Scene: Remotion × Claude

Most marketing videos are assembled on a timeline. This one is a React app. Every frame is driven by code. The same codebase that runs the animation in Remotion Studio renders the final MP4.

That matters. The animation is in git. If the app screenshot changes, one prop changes and the video re-renders. No re-export, no round trip to a designer. That's the bet.

One of the trickiest parts of the build was placement and scale: where exactly the head overlay should sit relative to the full body, how far the phone should slide in, where the mic stand lands during a 1.8× camera zoom. Getting these right by editing pixel values in code and re-rendering was painfully slow.

The solution was Zod schemas registered with each Remotion composition. Zod's .min(), .max(), and .step() constraints automatically generate interactive sliders in Remotion Studio's sidebar:

export const cantFindPoemSchema = z.object({
  micScale:   z.number().min(0.5).max(3).step(0.1).default(1.8),
  micYOffset: z.number().min(-600).max(600).step(10).default(370),
});

This turned a guess-and-render cycle into a drag-and-see workflow. Scrub to the frame you care about, drag a slider, watch the element reposition in real time. The test compositions (BlinkTest, ExpressionTest) used the same technique with sliders for headLeft, headTop, headSize, and clipBottom to nail the head overlay geometry before wiring it into the main animation.

Remotion moves video from a craft skill to an engineering skill. I can own the product, the code, and the marketing video that explains it. No handoff, no waiting for someone else.

Data visualisation is where this gets interesting. D3 charts have always been code, but they've always been stuck in the browser. Remotion lets you render a D3 animation straight to MP4. Real data, real motion, no screen recording. Think about what that means for financial reporting or investor updates. The chart becomes a video, and the video is generated from the data.

Same template, different data, different video. Swap one prop, re-render. An onboarding walkthrough today, a personalised summary tomorrow. The video stops being a one-off and starts being a function.

Now add an LLM. The hard part of programmatic animation was always the fiddly stuff: spring values, interpolation curves, frame offsets. I keep the creative direction. Claude handles the "nudge that 40px left and ease it differently" part. That split works surprisingly well.

Some SaaS businesses should be paying attention. There's a whole category of video creation tools that exist because making video without code was hard. That's getting less true every month. When a developer with an LLM can produce the same output and own it completely, the pitch for the subscription gets harder to make.