remotion-video-builder

Remotion Video Builder

Your Remotion knowledge may be stale. When exact API behavior matters, prefer the official remotion-documentation MCP server or the docs at remotion.dev.

Start Here

• If the project does not exist yet, scaffold it with npx create-video@latest and prefer the blank template.
• Keep every remotion and @remotion/* package on the exact same version and avoid caret ranges.
• Standard entry shape:
• src/index.ts calls registerRoot()
• src/Root.tsx registers all videos with <Composition> or <Still>

Build Order

1. Model the input contract first:

• top-level props schema
• timeline or event data
• render profile

1. Define shared props with zod and pass the schema to each <Composition>.
2. Use calculateMetadata to derive durationInFrames, width, height, transformed props, and defaultOutName.
3. Build the scene structure with <Series> for narrative order and <Sequence> for overlays, entrances, footage windows, and callouts.
4. In Remotion v4.x projects, explicitly set premountFor on <Sequence> elements that need assets loaded before they appear.
5. Add sample data and render scripts before polishing animation.

Defaults And Rules

• Default to fps={30} and 1920x1080 for landscape unless the brief says otherwise.
• Use AbsoluteFill for layering.
• Use staticFile() for anything coming from public/.
• Use useCurrentFrame() and useVideoConfig() for frame-based logic.
• Prefer subtle motion:
• spring() with high damping
• interpolate() with clamping
• Do not use Math.random(). Use random(seed) from remotion.
• Keep text animation simple and legible.
• Keep landscape and vertical outputs on the same business logic unless the brief truly requires divergence.

Parameterized Video Checklist

• One shared top-level z.object() schema
• defaultProps matching the component prop shape
• calculateMetadata returning dynamic duration or dimensions when inputs require it
• Sample JSON or TypeScript data for local preview
• Render scripts for every target output

Footage Strategy

Support at least these modes when footage is optional:

• none
• placeholder
• real

The timeline and overlays should still render when no real footage exists.

Millrace Launch Video

If the request is about Millrace or the launch video pipeline, read [references/millrace-launch-video.md](references/millrace-launch-video.md) before implementing.

References

• [references/remotion-core.md](references/remotion-core.md)
• [references/millrace-launch-video.md](references/millrace-launch-video.md)