video by remotion

💡 Examples

Complete example projects are available in assets/examples/:

fourier-transform/: Full Fourier Transform explainer with 9 custom scenes

- Copy scenes to your project as reference - Demonstrates SVG animations, data visualization, comparison layouts

📋 Tips & Best Practices

Chrome Headless Shell Download Fails

Remotion requires Chrome Headless Shell (~94MB) for rendering. If the automatic download fails (network issues, proxy, etc.):

Quick Install (recommended):

# Auto-detect zip in current or parent directories
make install-chrome
From a specific zip file
make install-chrome CHROME_ZIP=/path/to/chrome-headless-shell-mac-arm64.zip
Copy from another project (avoids re-downloading)
make install-chrome CHROME_FROM=/path/to/other-project

Manual Install (if make install-chrome doesn't work):

Step 1: Find the required version:

node -e "console.log(require('@remotion/renderer/package.json').version)"
Then check: node_modules/@remotion/renderer/dist/browser/BrowserFetcher.js
Look for TESTED_VERSION (e.g., "144.0.7559.20")

Step 2: Download manually:

https://storage.googleapis.com/chrome-for-testing-public//mac-arm64/chrome-headless-shell-mac-arm64.zip

Replace with the version from Step 1. For Intel Mac, use mac-x64.

Step 3: Install to the correct directory:

CHROME_DIR="node_modules/.remotion/chrome-headless-shell"
mkdir -p "$CHROME_DIR/mac-arm64"
Unzip and move to platform directory
unzip chrome-headless-shell-mac-arm64.zip -d "$CHROME_DIR/mac-arm64/"
Write VERSION file (MUST match the TESTED_VERSION exactly)
echo "144.0.7559.20" > "$CHROME_DIR/VERSION"
Ensure executable permission
chmod +x "$CHROME_DIR/mac-arm64/chrome-headless-shell-mac-arm64/chrome-headless-shell"

Expected directory structure:

node_modules/.remotion/chrome-headless-shell/
├── VERSION                                    ← Must contain exact version string
└── mac-arm64/                                 ← Platform directory
    └── chrome-headless-shell-mac-arm64/       ← Unzipped folder
        └── chrome-headless-shell              ← Executable

Pipeline Fails Mid-Way

If the pipeline fails after TTS but before rendering:

make render              # Just re-run the render step

If TTS partially completed:

make pipeline-edge       # Incremental: only regenerates missing/changed audio

To force full regeneration:

make clean-tts           # Remove hash manifest
make pipeline-edge       # Full regeneration

Audio Quality Issues

If narration sounds too loud/quiet or inconsistent:

Audio normalization runs automatically (EBU R128 standard)

Skip with make rebuild-fast or --no-normalize flag

Adjust tts.speedRate in config (1.0-1.5 recommended)

JSX Common Pitfalls in Scenes

When writing custom scene components, watch out for these JSX gotchas:

Curly braces in text: { } in JSX is treated as JavaScript expressions, not literal text. This is especially common when displaying math formulas.

// ❌ Wrong — JSX interprets { f(t) } as an expression, causing "f is not defined" error
ℒ { f(t) } → F(s)
// ✅ Correct — wrap in a string literal
{"ℒ { f(t) } → F(s)"}
// ✅ Also correct — use a variable
const formula = "ℒ { f(t) } → F(s)";
{formula}

Angle brackets in text: < and > can be misinterpreted as JSX tags.

// ❌ Wrong
when x < 0 and y > 1
// ✅ Correct
{"when x < 0 and y > 1"}

Tip: When in doubt, always wrap text containing special characters ({ } < >) in {"..."} string expressions.

Video Renders But Looks Wrong

1. Use make dev to open Remotion Studio for visual debugging 2. Check build/render-props.json for correct frame counts 3. Verify scene components are registered in sceneMap.ts