Remotion Best Practices

Remotion Best Practices

This skill guides Remotion work in Canvas Notebook. It is a clean-room Canvas skill; do not copy vendor skill material, hidden prompts, or proprietary rule packs into this folder.

Core Contract

• Use Remotion's frame-based model for animation. Avoid CSS animations and transitions for timeline-critical motion because renders must be deterministic by frame.
• Keep compositions editable React components. Avoid baking the whole video into a single prerendered asset unless the user asks for that.
• Put local media in the project's public asset path and reference it through Remotion-compatible asset helpers.
• Make dimensions, FPS, duration, and default props explicit in composition registration.
• Verify representative frames or short renders before delivering meaningful video changes.

Workflow

1. Inspect the project: package scripts, Remotion version, composition registry, asset folders, styling system, and render command.
2. Choose the task mode: new composition, targeted edit, asset integration, captions/subtitles, audio/video timing, render debugging, or export.
3. Implement motion with frame-driven values and deterministic interpolation.
4. Keep timing centralized: FPS, durations, sequence offsets, and transitions should be easy to audit.
5. Render a still frame or short segment that covers the changed area. Inspect for blank frames, clipping, wrong asset paths, bad timing, text overflow, and audio/caption sync issues.

Implementation Rules

• Use useCurrentFrame and video config values for time-based calculations.
• Use sequences for staged entrances, exits, and scene timing.
• Clamp interpolations where values should stop changing.
• Avoid viewport-dependent typography that can shift between preview and render.
• Prefer reusable components for repeated lower thirds, captions, cards, charts, and scene shells.
• Keep text within safe margins and test the longest expected copy.
• Use official Remotion documentation for version-specific APIs when uncertain.

Media And Captions

• Confirm asset paths and dimensions before wiring media into a composition.
• For captions, parse source timing data once, normalize it, and render from a structured caption model.
• For audio, verify duration and align visual beats to frame boundaries.
• For transparent or alpha workflows, confirm the target codec/container supports the requested output.

Final Checks

• Composition renders at the intended size, FPS, and duration.
• Representative frames are not blank and have correct framing.
• Text is readable and does not overflow.
• Assets load without broken paths.
• Audio, captions, and transitions line up with the timeline.
• Any skipped render verification is clearly reported.