Remotion tutorial for non-video-people: your first rendered MP4
A gentle Remotion tutorial for developers who don't do video, go from a blank scene to a rendered MP4 on your Mac with ReDock, no timeline editor required.
If you can write a bit of React, you can make a video — no timeline, no editing software, no keyframes to drag. This is a tutorial for developers who don’t think of themselves as video people. We’ll go from a blank Remotion scene to a rendered MP4 on your Mac. Remotion turns code into video: you describe a scene as a component, and a renderer draws each frame and encodes them into a file. ReDock runs Remotion as a one-click stack on the Bun runtime and shows live frame progress, so there’s nothing to install by hand.
The one idea you need first
A Remotion video is a React component sampled over time. There’s a current frame number, and everything you draw is a function of it. Frame 0 is the start; if you’re rendering 30 frames per second, frame 30 is one second in. To animate something, you compute its position or opacity from the frame number. That’s the entire mental model — no timeline, just “what should the screen look like at frame N?”
If a word appears halfway through a 60-frame scene, you show it when the frame is past 30. If a logo slides in, its X position is a value that changes as the frame grows. Once that clicks, video-as-code stops feeling foreign. The bigger picture is in the pillar post, free AI video with Remotion.
Setting up in ReDock
ReDock is a free (alpha) native macOS app. Create a Remotion site and it’s ready:
- Bun runtime, warm-started. ReDock keeps the runtime cached so the project comes up quickly instead of installing packages each time.
- A real preview URL. Your project lives at an
https://something.testdomain, so you can watch the studio preview in a browser. - Live frame progress. When you render, ReDock shows frames completing in real time — you see the work happening.
No terminal, no npm install, no build config. Setup basics are in the install guide and stacks reference.
Your first scene
The smallest useful scene is a title that fades in. In plain terms, you write a component that:
- Reads the current frame. Remotion gives you a hook for this.
- Computes opacity from the frame. Start at 0, ramp to 1 over the first half-second, then hold. Remotion’s interpolation helper maps a frame range to a value range for you.
- Renders centered text with that opacity, on a solid background.
That’s a complete one-second title card. You preview it in the studio, watch the fade, and adjust the numbers — longer fade, different color, bigger font — until it reads right. Because it’s code, every tweak is exact and repeatable.
Rendering to MP4
When the scene looks right, render it. ReDock hands the job to the Bun runtime, which walks the frames, captures each, and encodes them into an MP4. You watch the frame counter climb — frame 12 of 30, 13 of 30 — and when it finishes, you have a file. Play it, and it matches the preview exactly, because the renderer drew precisely what the code specified. No surprises, no re-rolls.
That determinism is the quiet superpower here: the same project renders the identical video every time, so you can commit it to git and hand it to a teammate.
Where to go next
Once you’ve made one title card, the same pattern scales: multiple scenes in sequence, images and shapes, data-driven text. Good next steps:
- Let an agent write scenes. Describe what you want and have it draft the component — see Claude-written Remotion scenes.
- Make a reusable intro. Turn your title card into a YouTube intro/outro template you own forever.
- Understand when this beats an editor. The trade-offs are laid out in programmatic video vs. editors.
FAQ
Do I need video editing experience?
No. If you can read and edit a React component, you can follow this. There’s no timeline, no keyframing, and no editing software — just code and a render button.
How long does a render take?
It depends on the length and complexity of the scene and your Mac’s power. ReDock shows live frame progress so you always know where it’s at. Short intro clips render quickly.
Can I reuse my first scene later?
Yes. A Remotion project is plain code in a folder. Save it, version it, and reuse it as a template — feed different text or data to render new videos from the same scene.
Your first MP4 is closer than you think — one component and a render button. Download ReDock and make it today.