remotion-best-practices
Audited by Runlayer on Feb 21, 2026
Malicious tool definition detected
Tool: SKILL.md Description: --- name: remotion-best-practices description: Best practices for Remotion - Video creation in React metadata: tags: remotion, video, react, animation, composition --- ## When to use Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.
Malicious tool definition detected
Tool: rules/3d.md Description: --- name: 3d description: 3D content in Remotion using Three.js and React Three Fiber.
Malicious tool definition detected
Tool: rules/animations.md Description: --- name: animations description: Fundamental animation skills for Remotion metadata: tags: animations, transitions, frames, useCurrentFrame --- All animations MUST be driven by the `useCurrentFrame()` hook.
Malicious tool definition detected
Tool: rules/assets.md Description: --- name: assets description: Importing images, videos, audio, and fonts into Remotion metadata: tags: assets, staticFile, images, fonts, public --- # Importing assets in Remotion ## The public folder Place assets in the `public/` folder at your project root.
Malicious tool definition detected
Tool: rules/assets/charts-bar-chart.tsx Description: import { loadFont } from "@remotion/google-fonts/Inter"; import { AbsoluteFill, spring, useCurrentFrame, useVideoConfig, } from "remotion"; const { fontFamily } = loadFont(); const COLOR_BAR = "#D4AF37"; const COLOR_TEXT = "#ffffff"; const COLOR_MUTED = "#888888"; const COLOR_BG = "#0a0a0a"; const COLOR_AXIS = "#333333"; // Ideal composition size: 1280x720 const Title: React.FC<{ children: React.ReactNode }> = ({ children }) => ( <div style={{
Malicious tool definition detected
Tool: rules/assets/text-animations-typewriter.tsx Description: import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig, } from "remotion"; const COLOR_BG = "#ffffff"; const COLOR_TEXT = "#000000"; const FULL_TEXT = "From prompt to motion graphics.
Malicious tool definition detected
Tool: rules/assets/text-animations-word-highlight.tsx Description: import { loadFont } from "@remotion/google-fonts/Inter"; import React from "react"; import { AbsoluteFill, spring, useCurrentFrame, useVideoConfig, } from "remotion"; /* * Highlight a word in a sentence with a spring-animated wipe effect.
Malicious tool definition detected
Tool: rules/audio.md Description: --- name: audio description: Using audio and sound in Remotion - importing, trimming, volume, speed, pitch metadata: tags: audio, media, trim, volume, speed, loop, pitch, mute, sound, sfx --- # Using audio in Remotion ## Prerequisites First, the @remotion/media package needs to be installed.
Malicious tool definition detected
Tool: rules/calculate-metadata.md Description: --- name: calculate-metadata description: Dynamically set composition duration, dimensions, and props metadata: tags: calculateMetadata, duration, dimensions, props, dynamic --- # Using calculateMetadata Use `calculateMetadata` on a `<Composition>` to dynamically set duration, dimensions, and transform props before rendering.
Malicious tool definition detected
Tool: rules/can-decode.md Description: --- name: can-decode description: Check if a video can be decoded by the browser using Mediabunny metadata: tags: decode, validation, video, audio, compatibility, browser --- # Checking if a video can be decoded Use Mediabunny to check if a video can be decoded by the browser before attempting to play it.
Malicious tool definition detected
Tool: rules/charts.md Description: --- name: charts description: Chart and data visualization patterns for Remotion.
Malicious tool definition detected
Tool: rules/compositions.md Description: --- name: compositions description: Defining compositions, stills, folders, default props and dynamic metadata metadata: tags: composition, still, folder, props, metadata --- A `<Composition>` defines the component, width, height, fps and duration of a renderable video.
Malicious tool definition detected
Tool: rules/display-captions.md Description: --- name: display-captions description: Displaying captions in Remotion with TikTok-style pages and word highlighting metadata: tags: captions, subtitles, display, tiktok, highlight --- # Displaying captions in Remotion This guide explains how to display captions in Remotion, assuming you already have captions in the [`Caption`](https://www.remotion.dev/docs/captions/caption) format.
Malicious tool definition detected
Tool: rules/extract-frames.md Description: --- name: extract-frames description: Extract frames from videos at specific timestamps using Mediabunny metadata: tags: frames, extract, video, thumbnail, filmstrip, canvas --- # Extracting frames from videos Use Mediabunny to extract frames from videos at specific timestamps.
Malicious tool definition detected
Tool: rules/fonts.md Description: --- name: fonts description: Loading Google Fonts and local fonts in Remotion metadata: tags: fonts, google-fonts, typography, text --- # Using fonts in Remotion ## Google Fonts with @remotion/google-fonts The recommended way to use Google Fonts.
Malicious tool definition detected
Tool: rules/get-audio-duration.md Description: --- name: get-audio-duration description: Getting the duration of an audio file in seconds with Mediabunny metadata: tags: duration, audio, length, time, seconds, mp3, wav --- # Getting audio duration with Mediabunny Mediabunny can extract the duration of an audio file.
Malicious tool definition detected
Tool: rules/get-video-dimensions.md Description: --- name: get-video-dimensions description: Getting the width and height of a video file with Mediabunny metadata: tags: dimensions, width, height, resolution, size, video --- # Getting video dimensions with Mediabunny Mediabunny can extract the width and height of a video file.
Malicious tool definition detected
Tool: rules/get-video-duration.md Description: --- name: get-video-duration description: Getting the duration of a video file in seconds with Mediabunny metadata: tags: duration, video, length, time, seconds --- # Getting video duration with Mediabunny Mediabunny can extract the duration of a video file.
Malicious tool definition detected
Tool: rules/gifs.md Description: --- name: gif description: Displaying GIFs, APNG, AVIF and WebP in Remotion metadata: tags: gif, animation, images, animated, apng, avif, webp --- # Using Animated images in Remotion ## Basic usage Use `<AnimatedImage>` to display a GIF, APNG, AVIF or WebP image synchronized with Remotion's timeline: ```tsx import { AnimatedImage, staticFile } from "remotion"; export const MyComposition = () => { return ( <AnimatedImage src={staticFile("animation.gif")} width={50
Malicious tool definition detected
Tool: rules/images.md Description: --- name: images description: Embedding images in Remotion using the <Img> component metadata: tags: images, img, staticFile, png, jpg, svg, webp --- # Using images in Remotion ## The `<Img>` component Always use the `<Img>` component from `remotion` to display images: ```tsx import { Img, staticFile } from "remotion"; export const MyComposition = () => { return <Img src={staticFile("photo.png")} />; }; ``` ## Important restrictions **You MUST use the `<Img>` c
Malicious tool definition detected
Tool: rules/import-srt-captions.md Description: --- name: import-srt-captions description: Importing .srt subtitle files into Remotion using @remotion/captions metadata: tags: captions, subtitles, srt, import, parse --- # Importing .srt subtitles into Remotion If you have an existing `.srt` subtitle file, you can import it into Remotion using `parseSrt()` from `@remotion/captions`.
Malicious tool definition detected
Tool: rules/light-leaks.md Description: --- name: light-leaks description: Light leak overlay effects for Remotion using @remotion/light-leaks.
Malicious tool definition detected
Tool: rules/lottie.md Description: --- name: lottie description: Embedding Lottie animations in Remotion.
Malicious tool definition detected
Tool: rules/maps.md [1/2] Description: --- name: maps description: Make map animations with Mapbox metadata: tags: map, map animation, mapbox --- Maps can be added to a Remotion video with Mapbox.
Tool: rules/maps.md [2/2] Description: `lineSliceAlong`.
Malicious tool definition detected
Tool: rules/measuring-dom-nodes.md Description: --- name: measuring-dom-nodes description: Measuring DOM element dimensions in Remotion metadata: tags: measure, layout, dimensions, getBoundingClientRect, scale --- # Measuring DOM nodes in Remotion Remotion applies a `scale()` transform to the video container, which affects values from `getBoundingClientRect()`.
Malicious tool definition detected
Tool: rules/measuring-text.md Description: --- name: measuring-text description: Measuring text dimensions, fitting text to containers, and checking overflow metadata: tags: measure, text, layout, dimensions, fitText, fillTextBox --- # Measuring text in Remotion ## Prerequisites Install @remotion/layout-utils if it is not already installed: ```bash npx remotion add @remotion/layout-utils # If project uses npm bunx remotion add @remotion/layout-utils # If project uses bun yarn remotion add @remot
Malicious tool definition detected
Tool: rules/parameters.md Description: --- name: parameters description: Make a video parametrizable by adding a Zod schema metadata: tags: parameters, zod, schema --- To make a video parametrizable, a Zod schema can be added to a composition.
Malicious tool definition detected
Tool: rules/sequencing.md Description: --- name: sequencing description: Sequencing patterns for Remotion - delay, trim, limit duration of items metadata: tags: sequence, series, timing, delay, trim --- Use `<Sequence>` to delay when an element appears in the timeline.
Malicious tool definition detected
Tool: rules/subtitles.md Description: --- name: subtitles description: subtitles and caption rules metadata: tags: subtitles, captions, remotion, json --- All captions must be processed in JSON.
Malicious tool definition detected
Tool: rules/tailwind.md Description: --- name: tailwind description: Using TailwindCSS in Remotion.
Malicious tool definition detected
Tool: rules/text-animations.md Description: --- name: text-animations description: Typography and text animation patterns for Remotion.
Malicious tool definition detected
Tool: rules/timing.md Description: --- name: timing description: Interpolation curves in Remotion - linear, easing, spring animations metadata: tags: spring, bounce, easing, interpolation --- A simple linear interpolation is done using the `interpolate` function.
Malicious tool definition detected
Tool: rules/transcribe-captions.md Description: --- name: transcribe-captions description: Transcribing audio to generate captions in Remotion metadata: tags: captions, transcribe, whisper, audio, speech-to-text --- # Transcribing audio To transcribe audio to generate captions in Remotion, you can use the [`transcribe()`](https://www.remotion.dev/docs/install-whisper-cpp/transcribe) function from the [`@remotion/install-whisper-cpp`](https://www.remotion.dev/docs/install-whisper-cpp) package.
Malicious tool definition detected
Tool: rules/transitions.md Description: --- name: transitions description: Scene transitions and overlays for Remotion using TransitionSeries.
Malicious tool definition detected
Tool: rules/transparent-videos.md Description: --- name: transparent-videos description: Rendering transparent videos in Remotion metadata: tags: transparent, alpha, codec, vp9, prores, webm --- # Rendering Transparent Videos Remotion can render transparent videos in two ways: as a ProRes video or as a WebM video.
Malicious tool definition detected
Tool: rules/trimming.md Description: --- name: trimming description: Trimming patterns for Remotion - cut the beginning or end of animations metadata: tags: sequence, trim, clip, cut, offset --- Use `<Sequence>` with a negative `from` value to trim the start of an animation.
Malicious tool definition detected
Tool: rules/videos.md Description: --- name: videos description: Embedding videos in Remotion - trimming, volume, speed, looping, pitch metadata: tags: video, media, trim, volume, speed, loop, pitch --- # Using videos in Remotion ## Prerequisites First, the @remotion/media package needs to be installed.