# Remotion Best Practices

> 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.

- Skill: `canvascoding/remotion-best-practices` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add canvascoding/remotion-best-practices`
- Raw SKILL.md: https://api.skillmd.com/api/skills/canvascoding/remotion-best-practices/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Canvas Notebook Sustainable Use License
- Author: canvascoding (https://skillmd.com/u/canvascoding)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/canvascoding/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.