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
2. Define shared props with zod and pass the schema to each <Composition>.
3. Use calculateMetadata to derive durationInFrames, width, height, transformed props, and defaultOutName.
4. Build the scene structure with <Series> for narrative order and <Sequence> for overlays, entrances, footage windows, and callouts.
5. In Remotion v4.x projects, explicitly set premountFor on <Sequence> elements that need assets loaded before they appear.
6. 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 before implementing.

References

• references/remotion-core.md
• references/millrace-launch-video.md

Source: hashgraph-online/awesome-codex-plugins → plugins/tim-osterhus/codex-remotion-plugin/skills/remotion-video-builder/SKILL.md