name	remotion-best-practices
description	Use this Canvas-owned clean-room skill when working with Remotion or React-based video generation. Trigger for Remotion projects, compositions, sequences, frame-based animation, rendering, captions, audio, video assets, templates, and debugging programmatic video output.
compatibility	Requires a project with Remotion dependencies installed or a task that is explicitly planning a Remotion implementation.
license	Canvas Notebook Sustainable Use License

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

Inspect the project: package scripts, Remotion version, composition registry, asset folders, styling system, and render command.
Choose the task mode: new composition, targeted edit, asset integration, captions/subtitles, audio/video timing, render debugging, or export.
Implement motion with frame-driven values and deterministic interpolation.
Keep timing centralized: FPS, durations, sequence offsets, and transitions should be easy to audit.
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.

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

Inspect the project: package scripts, Remotion version, composition registry, asset folders, styling system, and render command.

Choose the task mode: new composition, targeted edit, asset integration, captions/subtitles, audio/video timing, render debugging, or export.

Implement motion with frame-driven values and deterministic interpolation.

Keep timing centralized: FPS, durations, sequence offsets, and transitions should be easy to audit.

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.

remotion-best-practices