Remotion Best Practices

Problem

Remotion renders video with React, but implementation details are scattered across timelines, spring, interpolate, captions, audio/video assets, Lottie, Tailwind, 3D, fonts, and DOM measurement. This skill collects those patterns into rule files so you do not need to re-search docs for every video feature.

Capabilities and workflow

• Animation: rules/animations.md, rules/sequencing.md, and rules/timing.md cover sequences, delays, trimming, interpolation, and spring animation.
• Media: rules/assets.md, rules/videos.md, rules/audio.md, rules/fonts.md, and rules/images.md guide importing, playback, and embedding.
• Captions: rules/display-captions.md, rules/import-srt-captions.md, and rules/transcribe-captions.md cover display, .srt import, and transcription.
• Detection: rules/calculate-metadata.md, rules/can-decode.md, and rules/get-video-duration.md support dynamic metadata and browser decode checks.
• Visualization: rules/charts.md, rules/lottie.md, rules/gifs.md, and rules/3d.md cover charts, Lottie, GIFs, and React Three Fiber.

This is Remotion engineering practice, not a video editor or design system. If a rule references Mediabunny, @remotion/captions, or React Three Fiber, confirm project dependencies and target browser support. Dynamic props, dimensions, and duration changes should stay in sync with composition definitions.