Remotion Video Creation

Credit

Keep the original author name and license in every copy or fork. Show the credit in a clear place. Do not remove copyright or license notes.

When to use this skill

Use this skill when you build or edit a video with Remotion and React.

Use it for:

• Video and audio files
• Images, GIFs, and fonts
• Captions and text
• Motion and timing
• Scene changes
• Charts
• 3D scenes
• Lottie files
• Video size and length

How to use this skill

1. Read only the rule files that match the task.
2. Check the Remotion version and installed packages.
3. Follow the patterns in those rule files.
4. Keep all motion tied to the frame number.
5. Test the first, middle, and last frames.
6. Render a short test before a full render.

Do not use browser time, setTimeout, or random values for motion. A frame must look the same each time it is rendered.

Do not guess a media file's size or length. Read its data with the matching rule.

If a rule needs a package that is not installed, check the project setup before adding it. Do not change package versions unless the task needs it.

If two rules do not agree, use the rule that is closest to the task. Keep the current project style when it is safe.

Pick the right rule

Core setup

• rules/compositions.md: Set up compositions, still images, folders, default props, and changing data.
• rules/calculate-metadata.md: Set video length, size, and props from input data.
• rules/sequencing.md: Delay, cut, and limit the length of parts.
• rules/timing.md: Use straight, eased, and spring motion.
• rules/trimming.md: Cut time from the start or end of an animation.
• rules/transitions.md: Move from one scene to the next.

Motion and text

• rules/animations.md: Build basic Remotion motion.
• rules/text-animations.md: Animate text and type.
• rules/measuring-text.md: Measure text, fit it in a box, and stop overflow.
• rules/measuring-dom-nodes.md: Measure page elements.

Media

• rules/assets.md: Load images, videos, audio, and fonts.
• rules/images.md: Show images with the Img component.
• rules/videos.md: Show, cut, loop, speed up, slow down, or change video sound.
• rules/audio.md: Load, cut, speed up, slow down, and set the level or pitch of sound.
• rules/gifs.md: Keep GIF files in step with the video frame.
• rules/fonts.md: Load Google fonts and local fonts.
• rules/lottie.md: Show Lottie motion files.

Captions

• rules/import-srt-captions.md: Load .srt files with @remotion/captions.
• rules/display-captions.md: Show page-based captions and word highlights.
• rules/transcribe-captions.md: Make captions from speech.

Media checks

• rules/can-decode.md: Check if the browser can play a video with Mediabunny.
• rules/get-audio-duration.md: Read an audio file's length in seconds.
• rules/get-video-duration.md: Read a video file's length in seconds.
• rules/get-video-dimensions.md: Read a video's width and height.
• rules/extract-frames.md: Get a video frame at a set time.

Extra tools

• rules/charts.md: Build charts that work well in video.
• rules/3d.md: Build 3D scenes with Three.js and React Three Fiber.
• rules/tailwind.md: Use Tailwind CSS in Remotion.

Edge cases

Check these before the final render:

• A media file may be missing, broken, or in a format the browser cannot play.
• Audio may be shorter or longer than the video.
• Captions may start before frame 0 or end after the last frame.
• Long words may leave the text box.
• A font may load late and change text size.
• A spring may move past its end value.
• A scene change may make two scenes show at once.
• A zero or negative length must not create a Sequence.
• Input props may be missing or wrong.
• Very large images and videos may use too much memory.
• A 3D scene may look wrong if the frame size changes.
• Code that works in preview must also work in a full render.

Give each bad input a safe result or a clear error.

Example

Task: Make a 15-second video with a title, music, captions, and a fade to the last scene.

Read these files first:

1. rules/compositions.md for the 15-second composition.
2. rules/assets.md for file paths.
3. rules/audio.md for the music.
4. rules/import-srt-captions.md for the caption file.
5. rules/display-captions.md for caption layout.
6. rules/text-animations.md for the title.
7. rules/transitions.md for the fade.

Then check that the frame count matches 15 seconds:

const durationInFrames = 15 * fps;

Keep the title, captions, music, and fade inside that frame range. Test frame 0, a frame during the fade, and the last frame.