remotion-best-practices

When to Use

When working with Remotion code, use this skill to get domain-specific knowledge and best practices.

Read the individual rule files for detailed explanations and code examples:

rules/animations.md - Basic animation techniques in Remotion
rules/compositions.md - Defining compositions, stills, folders, default props, and dynamic metadata
rules/timing.md - Interpolation curves in Remotion - linear, easing, spring animations
rules/sequencing.md - Sequencing patterns in Remotion - delay, trim, limit item duration

rules/images.md - Embedding images in Remotion using the Img component
rules/videos.md - Embedding videos in Remotion - trimming, volume, speed, looping, pitch
rules/audio.md - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
rules/gifs.md - Displaying GIFs synchronized with the Remotion timeline
rules/assets.md - Importing images, videos, audio, and fonts into Remotion

rules/3d.md - Creating 3D content in Remotion using Three.js and React Three Fiber
rules/display-captions.md - Displaying captions in Remotion, with support for TikTok-style pagination and word highlighting
rules/import-srt-captions.md - Importing .srt subtitle files into Remotion using @remotion/captions
rules/transcribe-captions.md - Transcribing audio to generate captions in Remotion
rules/lottie.md - Embedding Lottie animations in Remotion
rules/charts.md - Chart and data visualization patterns in Remotion
rules/maps.md - Adding maps with Mapbox and animating them

rules/fonts.md - Loading Google Fonts and local fonts in Remotion
rules/text-animations.md - Typography and text animation patterns in Remotion
rules/measuring-text.md - Measuring text dimensions, fitting text into containers, and checking for overflow
rules/measuring-dom-nodes.md - Measuring DOM element dimensions in Remotion

rules/extract-frames.md - Extracting frames from a video at specific timestamps using Mediabunny
rules/get-video-duration.md - Getting the duration of a video file (in seconds) using Mediabunny
rules/get-video-dimensions.md - Getting the width and height of a video file using Mediabunny
rules/get-audio-duration.md - Getting the duration of an audio file (in seconds) using Mediabunny
rules/can-decode.md - Checking whether the browser can decode a video using Mediabunny

rules/parameters.md - Making videos parameterizable by adding Zod schemas
rules/calculate-metadata.md - Dynamically setting composition duration, dimensions, and props
rules/tailwind.md - Using TailwindCSS in Remotion
rules/transparent-videos.md - Rendering videos with transparency
rules/trimming.md - Trimming patterns in Remotion - cutting the beginning or end of an animation
rules/transitions.md - Scene transition patterns in Remotion

All animations must be driven by the useCurrentFrame() hook
Do not use CSS transitions or animations - they will not render correctly
Do not use Tailwind animation class names - they will not render correctly
Write animations in seconds and multiply by the useVideoConfig() value in fps value in