# Remotion

> Best practices for Remotion - video creation in React. Use when building video compositions, animations, handling media assets, implementing transitions, working with captions, or using Remotion-specific APIs.

- Skill: `justbecauselabs/remotion` (Agent Skill, multi-file: 29 files)
- Install (CLI): `npx skillmds@latest add justbecauselabs/remotion`
- Raw SKILL.md: https://api.skillmd.com/api/skills/justbecauselabs/remotion/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: justbecauselabs (https://skillmd.com/u/justbecauselabs)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/justbecauselabs/remotion

---


# Remotion Best Practices

## When to Use

Use this skill whenever you are dealing with Remotion code to obtain domain-specific knowledge for video creation in React.

## How to Use

Read individual reference files for detailed explanations and code examples:

- [references/3d.md](references/3d.md) - 3D content in Remotion using Three.js and React Three Fiber
- [references/animations.md](references/animations.md) - Fundamental animation skills for Remotion
- [references/assets.md](references/assets.md) - Importing images, videos, audio, and fonts into Remotion
- [references/audio.md](references/audio.md) - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
- [references/calculate-metadata.md](references/calculate-metadata.md) - Dynamically set composition duration, dimensions, and props
- [references/can-decode.md](references/can-decode.md) - Check if a video can be decoded by the browser using Mediabunny
- [references/charts.md](references/charts.md) - Chart and data visualization patterns for Remotion
- [references/compositions.md](references/compositions.md) - Defining compositions, stills, folders, default props and dynamic metadata
- [references/display-captions.md](references/display-captions.md) - Displaying captions in Remotion with TikTok-style pages and word highlighting
- [references/extract-frames.md](references/extract-frames.md) - Extract frames from videos at specific timestamps using Mediabunny
- [references/fonts.md](references/fonts.md) - Loading Google Fonts and local fonts in Remotion
- [references/get-audio-duration.md](references/get-audio-duration.md) - Getting the duration of an audio file in seconds with Mediabunny
- [references/get-video-dimensions.md](references/get-video-dimensions.md) - Getting the width and height of a video file with Mediabunny
- [references/get-video-duration.md](references/get-video-duration.md) - Getting the duration of a video file in seconds with Mediabunny
- [references/gifs.md](references/gifs.md) - Displaying GIFs synchronized with Remotion's timeline
- [references/images.md](references/images.md) - Embedding images in Remotion using the Img component
- [references/import-srt-captions.md](references/import-srt-captions.md) - Importing .srt subtitle files into Remotion using @remotion/captions
- [references/lottie.md](references/lottie.md) - Embedding Lottie animations in Remotion
- [references/measuring-dom-nodes.md](references/measuring-dom-nodes.md) - Measuring DOM element dimensions in Remotion
- [references/measuring-text.md](references/measuring-text.md) - Measuring text dimensions, fitting text to containers, and checking overflow
- [references/sequencing.md](references/sequencing.md) - Sequencing patterns for Remotion - delay, trim, limit duration of items
- [references/tailwind.md](references/tailwind.md) - Using TailwindCSS in Remotion
- [references/text-animations.md](references/text-animations.md) - Typography and text animation patterns for Remotion
- [references/timing.md](references/timing.md) - Interpolation curves in Remotion - linear, easing, spring animations
- [references/transcribe-captions.md](references/transcribe-captions.md) - Transcribing audio to generate captions in Remotion
- [references/transitions.md](references/transitions.md) - Scene transition patterns for Remotion
- [references/trimming.md](references/trimming.md) - Trimming patterns for Remotion - cut the beginning or end of animations
- [references/videos.md](references/videos.md) - Embedding videos in Remotion - trimming, volume, speed, looping, pitch