Uploaded July 2026 | Updated September 2026, 1 week ago
Remotion: How To Get Started Making Videos With Code (Beginner's Guide)
In this tutorial, you will learn how to get started with Remotion: setting up your first project from an empty folder, launching the built-in preview editor, and animating a graphic using nothing but a plain English prompt to Claude Code. This is the beginner's on-ramp for making real videos with code, no timeline editor required.
🧠 What You Will Learn
- Remotion setup: scaffolding a project from a single command
- npm i: the beginner mistake that trips almost everyone up
- Remotion Studio: previewing your video live in the browser
- Claude Code: animating a graphic with a plain English prompt
- Live edits: changing colors and code that sync instantly
- Project structure: what src, public, and package.json actually do
- Rendering: exporting a finished video or GIF
- Restarting: bringing the local server back after you shut it down
🏠 Full Tutorial Post:
mikemurphy.ai/tutorials/remotion
🔗 Links Mentioned:
🎬 Remotion: https://remotion.dev
🟢 Node.js: nodejs.org
🧑💻 VS Code: code.visualstudio.com
Tools I Use:
🌐 Mike Murphy AI: mikemurphy.ai
🚀 Hostinger VPS: go.mikemurphy.ai/vps
🎙️ ElevenLabs: go.mikemurphy.ai/elevenlabs
⏱️ Timestamps:
00:00 Intro: About The Tutorial
00:17 What is Remotion?
01:00 How it works?
02:27 Step 1: Create Project Folder
02:53 Remotion Starter Code
03:33 Open Terminal in VS Code
03:48 Scaffold Remotion
05:12 npm i (Dependenies)
05:24 Remotion Code Base Basics
05:51 Launch Remotion Studio
07:47 Relaunch Remotion Studio
08:25 Launch Claude Code
09:52 New Terminal in VS Code
10:43 Claude + src
11:50 npm run dev
12:26 Edit Animation
13:05 Render Video
14:05 Rendered Video Location
15:10 Recap
⭐ Connect with Me
➜ Website: mikemurphy.ai
➜ YouTube: youtube.com/mikemurphyco
➜ Newsletter: mikemurphy.ai/newsletter
➜ X: https://x.com/mikemurphyai
⚖️ Disclosure
Some links may be affiliate links, which means I may earn a commission if you purchase through them at no extra cost to you. I only share tools and services I use, trust, or think are useful for creators, small businesses, and tutorial makers.
#remotion #claudecode #aivideo #videowithcode #reactjs #nodejs #vscode #generativevideo #aiagents #contentcreation #codingtutorial #tutorial #mikemurphyai
Remotion: How To Get Started Making Videos With Code (Beginner's Guide)
In this tutorial, you will learn how to get started with Remotion: setting up your first project from an empty folder, launching the built-in preview editor, and animating a graphic using nothing but a plain English prompt to Claude Code. This is the beginner's on-ramp for making real videos with code, no timeline editor required.
🧠 What You Will Learn
- Remotion setup: scaffolding a project from a single command
- npm i: the beginner mistake that trips almost everyone up
- Remotion Studio: previewing your video live in the browser
- Claude Code: animating a graphic with a plain English prompt
- Live edits: changing colors and code that sync instantly
- Project structure: what src, public, and package.json actually do
- Rendering: exporting a finished video or GIF
- Restarting: bringing the local server back after you shut it down
🏠 Full Tutorial Post:
mikemurphy.ai/tutorials/remotion
🔗 Links Mentioned:
🎬 Remotion: https://remotion.dev
🟢 Node.js: nodejs.org
🧑💻 VS Code: code.visualstudio.com
Tools I Use:
🌐 Mike Murphy AI: mikemurphy.ai
🚀 Hostinger VPS: go.mikemurphy.ai/vps
🎙️ ElevenLabs: go.mikemurphy.ai/elevenlabs
⏱️ Timestamps:
00:00 Intro: About The Tutorial
00:17 What is Remotion?
01:00 How it works?
02:27 Step 1: Create Project Folder
02:53 Remotion Starter Code
03:33 Open Terminal in VS Code
03:48 Scaffold Remotion
05:12 npm i (Dependenies)
05:24 Remotion Code Base Basics
05:51 Launch Remotion Studio
07:47 Relaunch Remotion Studio
08:25 Launch Claude Code
09:52 New Terminal in VS Code
10:43 Claude + src
11:50 npm run dev
12:26 Edit Animation
13:05 Render Video
14:05 Rendered Video Location
15:10 Recap
⭐ Connect with Me
➜ Website: mikemurphy.ai
➜ YouTube: youtube.com/mikemurphyco
➜ Newsletter: mikemurphy.ai/newsletter
➜ X: https://x.com/mikemurphyai
⚖️ Disclosure
Some links may be affiliate links, which means I may earn a commission if you purchase through them at no extra cost to you. I only share tools and services I use, trust, or think are useful for creators, small businesses, and tutorial makers.
#remotion #claudecode #aivideo #videowithcode #reactjs #nodejs #vscode #generativevideo #aiagents #contentcreation #codingtutorial #tutorial #mikemurphyai
