Skip to content
motion lab

08 Render & export

The right codec, size and settings for where the video will play.

Floor
08 of 09
Demos
Export planner
Skills
RemotionHyperFrames

Rendering is the easy part

Because a coded video is a function of the frame, rendering is mechanical: load each frame in a headless browser, take a picture, and stitch the pictures into a file. Frames are independent, so they can render in parallel. Remotion and HyperFrames both do exactly this.

The decisions that matter come after: which codec, what size, and how much quality to spend. Get them wrong and a beautiful film arrives blurry, huge, or with its text cropped.

Export planner

Pick where the video is going. The planner suggests settings, estimates file size and render time, and writes the commands.

Destination

Upload high quality; YouTube re-encodes everything anyway.

Resolution
Aspect
Frame rate
Codec
30 s
120 ms

Time one frame takes on your machine. Heavy 3D or blur costs more.

4 at once

Frames rendered in parallel.

Output
1920 × 1080
Frames
900
Bitrate
8.2 Mbps
File size
≈ 31 MB
Render time
≈ 27 s
Audio
AAC 192k

Sizes are estimates from typical bitrates (YouTube’s upload recommendations for H.264, Apple’s for ProRes). Real files vary with how much moves on screen.

These settings suit the destination.

# Width, height, fps and length come from the <Composition>:
#   width={1920} height={1080} fps={30} durationInFrames={900}
npx remotion render src/index.ts LaunchFilm out/launch-film.mp4 \
  --codec=h264 --crf=18 \
  --concurrency=4

Codecs in one paragraph each

H.264 in an MP4 plays everywhere. It is the default for anything you upload or share. H.265 is roughly 30 to 50% smaller at the same quality, but not every browser plays it. VP9 in WebM is the web’s open option and works well for silent autoplay loops. ProRes is huge on purpose: it keeps quality for editing and archiving, never for upload. GIF is a 1987 image format; a muted video loop is almost always better.

Rules of thumb

  • Render one master at the highest quality you need, then make every delivery file from it.
  • Upload what the platform asks for. Re-encoding a heavily compressed file twice is how text gets mushy.
  • Add -movflags +faststart to web MP4s so they start playing before they finish downloading.
  • Render a draft at half resolution to check timing; render full size once.
  • Name files with what is in them: launch-film_9x16_1080p_30fps_v3.mp4.