Back to Blog
AI ApplicationsVideo TutorialsClaude CodeautomationReactJSTutorial

I Built a YouTube Shorts Generator with AI (Remotion + Claude Code)

By Ayyaz Zafar
I Built a YouTube Shorts Generator with AI (Remotion + Claude Code)

Creating YouTube Shorts manually takes hours. You have to edit each one, add animations, render, export... and if you want to make 10 of them, that's basically a full day of work.

But what if you could just describe what you want, and AI builds the entire video for you?

In this tutorial, I'll show you how to build your own YouTube Shorts generator using Claude Code and Remotion. By the end, you'll have a system that takes a simple JSON data file and generates as many videos as you want.

Watch the Full Tutorial

What We're Building

A "Top 5" style YouTube Short with:

  • Animated title that slides in
  • Each item appears one by one with smooth spring animations
  • Progress bar at the bottom
  • Dark theme with vibrant colors
  • Particle effects in the background

And the best part? All of this is generated from a simple JSON file:

{
  "title": "Top 5 Programming Languages 2026",
  "items": [
    { "name": "Rust", "emoji": "🦀", "description": "Performance and safety" },
    { "name": "TypeScript", "emoji": "💙", "description": "JavaScript with superpowers" },
    { "name": "Python", "emoji": "🐍", "description": "AI and data science" },
    { "name": "Go", "emoji": "🐹", "description": "Cloud and backend" },
    { "name": "JavaScript", "emoji": "⚡", "description": "The language of the web" }
  ]
}

Change the data, get a new video. That's it.

Tools Used

  • Remotion - A React framework for creating videos programmatically. Think of it as React for videos - each frame is a React component rendered at a specific point in time. remotion.dev
  • Claude Code - AI coding assistant that writes the entire video code through conversation. claude.ai/code
  • Remotion Agent Skills - Pre-built skills that give AI assistants knowledge of Remotion best practices. github.com/remotion-dev/skills

Step-by-Step Process

1. Create a New Remotion Project

npx create-video@latest

During setup:

  • Select the blank template
  • Enable Tailwind CSS
  • Add Agent Skills (important for AI integration)
  • Select Claude Code as your AI agent

2. Start Remotion Studio

npm install
npm run dev

This opens Remotion Studio - a live preview environment where you can scrub through your video frame by frame.

3. Build with Claude Code

Start Claude Code in your project directory and give it this prompt:

Create a YouTube Shorts generator for "Top 5" listicle videos.

Requirements:
- 9:16 vertical format (1080x1920)
- Duration: 30 seconds at 30fps
- Dark theme with vibrant accent colors
- Animated title that slides in at the start
- Each of the five items appears one by one with smooth animations
- Progress bar at bottom showing video progress
- Read data from a JSON file (title + 5 items with name and description)
- Make it look modern and engaging

Create the component, register it as a composition, and create a sample data file.

4. Iterate and Improve

The magic is in the iteration. Ask Claude to make improvements:

  • "Make animations smoother - use spring physics instead of linear interpolation"
  • "Add emojis before each item name"
  • "Change color scheme - use a gradient background from dark purple to dark blue"
  • "Add subtle particle effects in the background"

5. Render to MP4

Add this script to your package.json:

"scripts": {
  "render:short": "remotion render src/index.ts TopFiveListicle out/short.mp4"
}

Then run:

npm run render:short

Your video is ready to upload!

Video Timestamps

  • 0:00 - 10 Shorts in 5 minutes (hook)
  • 0:34 - Final result demo
  • 0:51 - Setting up Remotion project
  • 4:24 - Remotion Studio walkthrough
  • 5:22 - Building with Claude Code (live session)
  • 10:05 - Preview first version
  • 11:29 - Iteration: Smoother animations
  • 12:06 - Iteration: Adding emojis
  • 12:55 - Iteration: Color scheme change
  • 13:40 - Iteration: Particle effects
  • 15:13 - Changing data = new video
  • 16:00 - Rendering to MP4
  • 18:02 - Wrap up

Why This Approach Works

The power of this setup is scalability:

  1. Build once, use forever - Create the template once with Claude Code
  2. Data-driven videos - Just change the JSON file to create new content
  3. No video editing skills needed - React developers can create videos
  4. Batch rendering - Generate 10, 50, or 100 videos programmatically

What's Next?

This is just the beginning. You could:

  • Connect this to n8n for automated video generation
  • Create different templates (quotes, facts, product showcases)
  • Deploy rendering to the cloud (Lambda/Cloud Run)
  • Build a full content pipeline

Drop a comment on the video and tell me what kind of Shorts you'd generate with this!

Share this article

TwitterLinkedIn