Remotion Best Practices

Remotion Best Practices

Domain-specific rules for writing correct, render-safe Remotion code (video creation in React). Apply these whenever reviewing or improving an existing Remotion project.

Golden Rules

1. Drive every animation from useCurrentFrame() — never from wall-clock time, Date.now(), setInterval, or requestAnimationFrame. The renderer advances frames deterministically; anything else desyncs.
2. Never use CSS animations or transitions — @keyframes, transition, and animation do not render frame-by-frame and will look broken or frozen in the output. Compute the animated value per frame instead.
3. Think in seconds, convert to frames — read fps from useVideoConfig() and multiply: const at2s = 2 * fps.
4. Use interpolate and clamp — map frame ranges to value ranges and pass { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } so values never overshoot.
5. Use spring() for natural motion — for physical easing, drive with spring({ frame, fps, config }) rather than hand-tuned easing curves.

Timing & Animation

• Linear/eased ramps: interpolate(frame, [in, out], [from, to], { easing: Easing.bezier(...), extrapolateRight: 'clamp' }).
• Springs: spring({ frame, fps }) returns a 0..1 progress you feed into interpolate or multiply directly.
• Delay a spring by subtracting frames: spring({ frame: frame - delay, fps }).

Sequencing & Trimming

• Wrap timeline items in <Sequence from={startFrame} durationInFrames={len}>; children see a frame reset to 0 at from.
• Trim the start of media with startFrom, the end with endAt (in frames) on <OffthreadVideo> / <Audio>.
• Limit an item's lifetime with durationInFrames rather than conditionally rendering on frame comparisons.

Assets & Media

• Import bundled assets with staticFile('name.png'); use <Img>, <OffthreadVideo>, <Audio> (never bare <img>/<video>/<audio>, which won't sync or render reliably).
• Preload/measure durations before rendering so composition length matches media length.
• Control volume, playbackRate, and pitch via the component props; a function volume={(f) => ...} fades over frames.

Compositions & Metadata

• Register with <Composition id durationInFrames fps width height component defaultProps /> inside <Root>.
• Set duration/dimensions dynamically from props or async data via calculateMetadata instead of hard-coding.
• Keep default props typed so Studio controls and renders stay in sync.

Text, Captions & Layout

• Measure text with @remotion/layout-utils (measureText) to fit or truncate before rendering — DOM measurement is unreliable mid-render.
• Load fonts with @remotion/fonts / @remotion/google-fonts and await readiness in calculateMetadata so glyphs don't pop in.
• For captions use @remotion/captions (parse .srt, page into TikTok-style word highlights driven by frame).

Advanced

• Tailwind: enable via @remotion/tailwind; class-driven styles render fine, but animation must still be frame-computed inline.
• 3D: use @remotion/three with React Three Fiber; advance the scene from useCurrentFrame().
• Lottie / GIFs: use @remotion/lottie and @remotion/gif so playback is frame-synced, not real-time.
• Transitions: use @remotion/transitions (<TransitionSeries>) for deterministic scene changes.

Common Mistakes to Fix on Review

1. CSS transition/@keyframes used for motion — replace with interpolate/spring.
2. Time read from Date.now()/timers — replace with useCurrentFrame().
3. Un-clamped interpolate causing values past the target — add extrapolate*: 'clamp'.
4. Bare <img>/<video>/<audio> — swap for Remotion components + staticFile.
5. Hard-coded duration that mismatches audio/video length — derive via calculateMetadata.

Output

Return the reviewed or corrected .tsx composition(s) with frame-driven, clamped animations and Remotion media components, plus a concise bullet list of the best-practice fixes applied. Preview in Remotion Studio before rendering.