Auto-generate demo videos for repositories using Remotion and Claude

Problem

Every repository needs a demo video but most developers lack video editing skills. Screen recordings are tedious, require retakes, and go stale as the product evolves. You need a way to programmatically generate polished demo videos that can be updated by changing code, not by re-recording.

Solution

Use Remotion (a React-based video framework) with Claude to read your README, extract key features, and generate a video composition that showcases the project.

1. Set up Remotion

npx create-video@latest --template blank my-demo
cd my-demo
npm install

2. Create reusable video components

// src/components/TitleSlide.tsx
import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";

export const TitleSlide: React.FC<{
  title: string;
  subtitle: string;
}> = ({ title, subtitle }) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill style={{ backgroundColor: "#0a0a0a", padding: 80 }}>
      <h1 style={{ color: "#fff", fontSize: 72, opacity }}>{title}</h1>
      <p style={{ color: "#999", fontSize: 36, opacity }}>{subtitle}</p>
    </AbsoluteFill>
  );
};

// src/components/CodeSlide.tsx
export const CodeSlide: React.FC<{
  code: string;
  language: string;
  caption: string;
}> = ({ code, language, caption }) => {
  const frame = useCurrentFrame();
  const chars = Math.floor(interpolate(frame, [0, 90], [0, code.length]));

  return (
    <AbsoluteFill style={{ backgroundColor: "#1e1e1e", padding: 60 }}>
      <pre style={{ color: "#d4d4d4", fontSize: 24, fontFamily: "monospace" }}>
        <code>{code.slice(0, chars)}</code>
      </pre>
      <p style={{ color: "#888", fontSize: 28, marginTop: 40 }}>{caption}</p>
    </AbsoluteFill>
  );
};

3. Generate the video script with Claude

<!-- skills/generate-demo-video.md -->
---
name: generate-demo-video
description: Generate a Remotion video script from a README
---

1. Read the project README.md
2. Extract: project name, tagline, key features (max 5), install command, basic usage example
3. Create src/DemoVideo.tsx with this structure:
   - TitleSlide (3 seconds): project name + tagline
   - FeatureSlide (3 seconds each): one per key feature with icon and description
   - CodeSlide (5 seconds): animated typing of the install + usage example
   - ClosingSlide (3 seconds): GitHub URL + call to action
4. Update src/Root.tsx to register the composition

4. Render the video

# Preview in browser
npx remotion studio

# Render to MP4
npx remotion render DemoVideo out/demo.mp4 \
  --codec h264 \
  --image-format jpeg \
  --quality 80

5. Automate with GitHub Actions

# .github/workflows/demo-video.yml
name: Generate Demo Video
on:
  push:
    paths: ["README.md"]

jobs:
  render:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx remotion render DemoVideo out/demo.mp4
      - uses: actions/upload-artifact@v4
        with:
          name: demo-video
          path: out/demo.mp4

Why It Works

Remotion renders React components as video frames, so video creation becomes a coding task -- exactly what AI agents excel at. Claude reads the README to understand the project, then generates React components that tell the project's story visually. Because the video is code, it stays in sync with the project: update the README, re-render the video. The typing animation for code examples creates engaging content without screen recording.

Context

Remotion is used by GitHub, Shopify, and other companies for programmatic video generation
For higher quality, add @remotion/animated-emoji and @remotion/transitions for polish
Claude can also generate videos from a Figma screenshot or design mockup, not just READMEs
Render times are typically 10-30 seconds for a 30-second video on modern hardware
The GitHub Actions approach means your demo video auto-updates when the README changes
Consider adding a voiceover track using text-to-speech APIs for narrated demos