When working with Remotion video project code, load the corresponding rule files on demand to get detailed explanations and code examples.
Load on first use SETUP.md Check environment dependencies.
Project and Rendering
- project-setup.md - Project initialization, file structure, registerRoot, package.json configuration
- rendering.md - Complete list of rendering/preview/debugging commands (render, still, studio)
Core Concepts
- compositions.md - Composition definition, still frames, folders, default props, dynamic metadata
- calculate-metadata.md - Dynamically set a composition's duration, dimensions, and props
- parameters.md - Use Zod schemas to make videos parameterizable
- sequencing.md - Sequence patterns: delay, trim, limit element duration
Animation and Transitions
- animations.md - Basic animation techniques
- timing.md - Interpolation curves: linear, easing, spring animations
- transitions.md - Scene transition patterns
- trimming.md - Trim patterns: cut off the beginning or end of an animation
Text and Subtitles
- text-animations.md - Text typography and text animation patterns
- measuring-text.md - Text size measurement, responsive containers, overflow detection
- fonts.md - Load Google Fonts and local fonts
- subtitles.md - Subtitles handling overview
- display-captions.md - Display subtitles
- import-srt-captions.md - Import SRT subtitle files
- transcribe-captions.md - Speech to subtitles
Media Assets
- assets.md - Import images, videos, audio, and fonts
- images.md - Embed images using the Img component
- videos.md - Embed videos: trimming, volume, speed, looping, pitch
- gifs.md - Display GIFs synchronized with the timeline
- lottie.md - Embed Lottie animations
- transparent-videos.md - Render videos with transparency
Audio
- audio.md - Audio import, trimming, volume, speed, pitch
- audio-visualization.md - Audio visualization: spectrum bar charts, waveforms, bass response
- sfx.md - Sound effects
- voiceover.md - Add AI voiceover using ElevenLabs TTS
Media Information Extraction
- get-audio-duration.md - Get audio duration (Mediabunny)
- get-video-duration.md - Get video duration (Mediabunny)
- get-video-dimensions.md - Get video width and height (Mediabunny)
- extract-frames.md - Extract video frames at specified timestamps (Mediabunny)
- can-decode.md - Check whether the browser can decode a video (Mediabunny)
Data Visualization and 3D
- charts.md - Chart patterns: bar charts, pie charts, line charts, stock charts
- 3d.md - Create 3D content using Three.js / React Three Fiber
- maps.md - Add maps and animate them using Mapbox
Tools and Styling
- tailwind.md - Use TailwindCSS in Remotion
- ffmpeg.md - FFmpeg operations: trim videos, detect silence, etc.
- measuring-dom-nodes.md - Measure DOM element dimensions
- light-leaks.md - @remotion/light-leaks light leak overlay effect