Make a Video

Remotion is a tool for 'making videos with code'. You draw the screen with React (a web technology), and it stitches that screen 30 frames per second into a video. It sounds hard, but you won't be writing the code yourself.

You just talk to Claude in plain language: 'make an intro where a title rises up in yellow on a black background.' Claude writes the code, and the result shows live in Remotion Studio beside you. Don't like it? Say 'bigger title' or 'make it blue'. That is vibe coding.

First install Node.js, the engine that runs code. Go to nodejs.org, click the big button marked 'LTS', and keep clicking 'Next' through the installer.

Now confirm it installed. Open VS Code, go to Terminal → New Terminal (or Ctrl + `), and type the commands below one line at a time, pressing Enter.

$node -v
$npm -v

v20.18.0
10.8.2

Install VS Code from code.visualstudio.com. Then click the Extensions icon (four squares) in the left bar, search 'Claude Code', and install it.

A Claude icon appears in the sidebar. Click it, press 'Sign in', and log in with your Claude account in the browser that opens, this links your Pro/Max subscription. From now on you code by chatting with Claude inside VS Code.

Create an empty folder for your video project. The command below makes a my-video folder on your Desktop and moves into it.

Or make the folder in your file explorer, then in VS Code use File → Open Folder and open a new terminal there. The key point is: from now on, commands run inside this folder.

$cd Desktop
$mkdir my-video
$cd my-video

Now install Remotion. Type the single line below and press Enter. A few questions follow.

It asks for a project name, then to pick a template. Use the arrow keys to select 'Hello World (recommended)' and press Enter. It downloads and installs everything automatically (1-3 minutes).

$npx create-video@latest

┌  Welcome to Remotion!
│
◇  What would you like to call your video?
│  my-video
│
◇  Choose a template
│  ● Hello World (recommended)
│
◇  Installing dependencies...
└  Done! Created your project.

Inside the installed folder, run the command below. This launches the preview window (Remotion Studio) you keep open while working.

When you see a line like 'Server ready - Local: http://localhost:3000', a browser opens automatically, or open that address yourself. The studio appears with a sample video playing.

$npm run dev

> remotion studio

Server ready - Local: http://localhost:3000

Now describe the video to Claude in VS Code. Start small, one scene at a time. For example:

"Make a 5-second intro: a large white title 'VibeCampus' fades up in the center of a black background, with a yellow subtitle following below it."

When Claude edits a file in src, your open Remotion Studio auto-refreshes and you see the result. Keep refining: 'bigger title', 'add a purple glow in the background', 'bolder subtitle font'. That loop is all there is to vibe coding.

Happy with it? Render it to a real video file. Open a second terminal (keep the studio running) and run the command below. Replace MyVideo with the name shown in the studio's left-hand list.

--crf=12 is the quality setting: lower means higher quality, and this channel fixes it at 12 for top-tier output. When progress hits 100%, video.mp4 appears in the out folder.

$npx remotion render MyVideo out/video.mp4 --codec=h264 --crf=12 --pixel-format=yuv420p

Bundling video... 100%
Rendering frames... 100% (900/900)
Encoding... 100%
+ out/video.mp4 (24.1 MB)

Congratulations, you made and exported a high-quality video without writing a line of code yourself. That's vibe coding.

Next, try subtitles, background music, sound effects, scene transitions, even animated data charts, all the same way. Share your videos on the VibeCampus Studio or Launchpad with other vibe coders.