Remotion Installation to First MP4 — Practical Guide for 3D Artists Part 2

What to Check Before Installation — Node.js

Remotion runs on Node.js. Like installing Maya or Blender, you need a separate installation. Open the terminal and check with the command below first.

1. Open Terminal (Windows: PowerShell, Mac: Terminal)
2. Type node –version → Pass if v18 or higher
3. If version is lower or missing, install LTS version from nodejs.org
4. Restart terminal after installation → Check version again

Once Node.js is ready, create a Remotion project. Just one line.

Project Structure — You Only Need to Know This

When a project is created with npm init video, multiple files appear in the folder. From a 3D artist’s perspective, there are only two files you need to care about.

• ▪ src/MyComp.tsx — The file that defines video content. Add images here, add text, and set timing.
• ▪ public folder — Copy render images, fonts, and audio files here to load them in code.
• ▪ Remaining files — No need to touch them. They’re configuration files.

If you have an image sequence rendered from Maya, copy it to the public folder. That’s it. Now you can load that image in code.

Asking Claude for Code — This is the Key

You don’t need to stop just because you don’t know React. Tell Claude in plain language and it will write working Remotion code for you. How you write the prompt determines the result.

Example of a good prompt:

• ▪ “Create a 5-second Remotion component at 30fps. Use public/render.jpg as background, and slide in white text with the project name from the left at the top”
• ▪ “I have an image sequence from frame_001.png to frame_120.png in the public folder. Write a 4-second Remotion video code that plays them in order”
• ▪ “Create a Remotion component with a black bar at the bottom and white text showing the client name with fadeIn. Based on 1920×1080”

When Claude gives you code, paste it into src/MyComp.tsx and save. Running npm start in the terminal will show a preview in your browser.

Render to MP4 — One Command

If the preview result looks good, export it as an actual video file. Running the command below in terminal will create an MP4 in the out folder.

1. Navigate to project folder in terminal
2. Type npx remotion render src/index.ts MyComp out/result.mp4
3. Rendering in progress — Parallel processing by CPU cores
4. Check out/result.mp4 file

A 30-second video at 1080p comes out in 5-15 minutes. Much faster than waiting for Maya Arnold render. You can work on other things while rendering.

3 Common Beginner Stumbling Blocks

Everyone gets stuck at the same places when starting. Knowing this in advance saves 30 minutes.

• ▪ Browser preview doesn’t appear — npm start may not automatically open localhost:3000. Type the address directly in your browser.
• ▪ Images appear black — You placed files in the src folder instead of public. Must go in public folder.
• ▪ Code error appears — You pasted Claude’s code as-is and got red lines. Copy the error message and send it back to Claude. Just say “Fix this error” and it will provide corrected code.

After Your First Video — Next Steps

Once you’ve exported your first MP4, it’s time to use Remotion’s real power. Put product names, prices, and color data in a JSON file and read it from code to generate videos. 100 lines of data = 100 videos. We’ll cover this in Part 3.

For now, just do one thing. Run npm init video and tell Claude, “Write my first Remotion video code, 5 seconds, white text with my name on a black background.” That’s the start.