---
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 skill whenever you are dealing with Remotion code to obtain the domain-specific knowledge.

## Remotion MCP (Live Documentation)

For real-time, accurate API lookups, use the official Remotion MCP server. See [rules/remotion-mcp.md](rules/remotion-mcp.md).

```json
{
  "mcpServers": {
    "remotion-documentation": {
      "command": "npx",
      "args": ["@remotion/mcp@latest"]
    }
  }
}
```

Query it when unsure about exact API signatures, prop types, or recent changes.

## remotion-bits (MUST READ)

**Load [rules/remotion-bits.md](rules/remotion-bits.md) FIRST** — this library provides pre-built components:

| Component | Use For |
|-----------|---------|
| `AnimatedText` | Text with entrance animations |
| `TypeWriter` | Character-by-character reveal |
| `AnimatedCounter` | Number counting animations |
| `StaggeredMotion` | Staggered child animations |
| `Particles` | Floating particle backgrounds |
| `GradientTransition` | Animated gradient backgrounds |
| `Scene3D` | 3D transforms and camera |
| `CodeBlock` | Syntax-highlighted code |

**Rule:** If remotion-bits has a component for it, USE IT. Don't build from scratch.

## Captions

When dealing with captions or subtitles, load the [./rules/subtitles.md](./rules/subtitles.md) file for more information.

## Using FFmpeg

For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the [./rules/ffmpeg.md](./rules/ffmpeg.md) file for more information.

## Audio visualization

When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the [./rules/audio-visualization.md](./rules/audio-visualization.md) file for more information.

## Video Style (MUST READ)

Before generating any video, load [rules/video-style.md](rules/video-style.md) for mandatory style rules:
- Always flashy/dynamic animations, never slideshow-style
- Never use emojis in video content
- Multiple layers of motion required

## Visual Aesthetics / Taste Templates (CHOOSE ONE)

Pick an aesthetic based on the product/brand/vibe requested:

| Aesthetic | File | Best For |
|-----------|------|----------|
| **Liquid Glass** | [rules/liquid-glass-aesthetic.md](rules/liquid-glass-aesthetic.md) | Premium tech, Google Flow style, product showcases |
| **Synthwave** | [rules/synthwave-retro-futurism.md](rules/synthwave-retro-futurism.md) | Gaming, crypto, music, entertainment, nightlife |
| **Glitch 2.0** | [rules/glitch-aesthetic.md](rules/glitch-aesthetic.md) | Cybersecurity, tech, music videos, edgy brands |
| **Kinetic Typography** | [rules/kinetic-typography.md](rules/kinetic-typography.md) | Quotes, lyrics, podcasts, explainers, thought leadership |
| **Brutalist** | [rules/brutalist-typography.md](rules/brutalist-typography.md) | Fashion, art, editorial, bold statements |
| **Film / Analog** | [rules/film-analog-aesthetic.md](rules/film-analog-aesthetic.md) | Lifestyle, food, travel, storytelling, indie brands |
| **Terminal / Hacker** | [rules/video-style.md](rules/video-style.md) | SaaS, developer tools, B2B, dashboards |
| **ElevenLabs Premium** | [rules/elevenlabs-style-aesthetic.md](rules/elevenlabs-style-aesthetic.md) | AI products, voice tech, premium dark mode |

**Workflow:**
1. Read `rules/video-style.md` for core rules (mandatory)
2. Pick ONE aesthetic from above based on context
3. Load that aesthetic file for detailed patterns, colors, and code examples
4. Generate video code following both the core rules AND the chosen aesthetic

## Scene3D Camera System (AE-Style Transitions)

**Use [rules/scene3d-camera.md](rules/scene3d-camera.md) for flying camera between scenes.**

```tsx
import { Scene3D, Step, Transform3D } from 'remotion-bits';

<Scene3D perspective={1200} transitionDuration={60} stepDuration={80} easing="easeInOutCubic">
  <Step id="intro" x={0} y={0} z={0}>
    <IntroScene />
  </Step>
  <Step id="feature" x={200} y={0} z={-100} rotateY={-15}>
    <FeatureScene />
  </Step>
</Scene3D>
```

Camera automatically flies between Steps with quaternion SLERP (no gimbal lock). Chainable `Transform3D` API for complex positioning.

## remotion-animated (Declarative Animations)

**Use [rules/remotion-animated.md](rules/remotion-animated.md) for declarative JSX animations.**

```tsx
import { Animated, Move, Scale, Fade, Rotate } from 'remotion-animated';

<Animated animations={[
  Scale({ by: 1, initial: 10 }),
  Move({ y: -40, start: 50 }),
  Fade({ to: 0, start: 150 }),
]}>
  <HelloWorld />
</Animated>
```

Simplifies motion by putting animation logic directly in JSX with great spring defaults.

## How to use

Read individual rule files for detailed explanations and code examples:

- [rules/3d.md](rules/3d.md) - 3D content in Remotion using Three.js and React Three Fiber
- [rules/animations.md](rules/animations.md) - Fundamental animation skills for Remotion
- [rules/assets.md](rules/assets.md) - Importing images, videos, audio, and fonts into Remotion
- [rules/audio.md](rules/audio.md) - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
- [rules/calculate-metadata.md](rules/calculate-metadata.md) - Dynamically set composition duration, dimensions, and props
- [rules/can-decode.md](rules/can-decode.md) - Check if a video can be decoded by the browser using Mediabunny
- [rules/charts.md](rules/charts.md) - Chart and data visualization patterns for Remotion (bar, pie, line, stock charts)
- [rules/compositions.md](rules/compositions.md) - Defining compositions, stills, folders, default props and dynamic metadata
- [rules/extract-frames.md](rules/extract-frames.md) - Extract frames from videos at specific timestamps using Mediabunny
- [rules/fonts.md](rules/fonts.md) - Loading Google Fonts and local fonts in Remotion
- [rules/get-audio-duration.md](rules/get-audio-duration.md) - Getting the duration of an audio file in seconds with Mediabunny
- [rules/get-video-dimensions.md](rules/get-video-dimensions.md) - Getting the width and height of a video file with Mediabunny
- [rules/get-video-duration.md](rules/get-video-duration.md) - Getting the duration of a video file in seconds with Mediabunny
- [rules/gifs.md](rules/gifs.md) - Displaying GIFs synchronized with Remotion's timeline
- [rules/images.md](rules/images.md) - Embedding images in Remotion using the Img component
- [rules/light-leaks.md](rules/light-leaks.md) - Light leak overlay effects using @remotion/light-leaks
- [rules/lottie.md](rules/lottie.md) - Embedding Lottie animations in Remotion
- [rules/measuring-dom-nodes.md](rules/measuring-dom-nodes.md) - Measuring DOM element dimensions in Remotion
- [rules/measuring-text.md](rules/measuring-text.md) - Measuring text dimensions, fitting text to containers, and checking overflow
- [rules/sequencing.md](rules/sequencing.md) - Sequencing patterns for Remotion - delay, trim, limit duration of items
- [rules/tailwind.md](rules/tailwind.md) - Using TailwindCSS in Remotion
- [rules/text-animations.md](rules/text-animations.md) - Typography and text animation patterns for Remotion
- [rules/timing.md](rules/timing.md) - Interpolation curves in Remotion - linear, easing, spring animations
- [rules/transitions.md](rules/transitions.md) - Scene transition patterns for Remotion
- [rules/transparent-videos.md](rules/transparent-videos.md) - Rendering out a video with transparency
- [rules/trimming.md](rules/trimming.md) - Trimming patterns for Remotion - cut the beginning or end of animations
- [rules/videos.md](rules/videos.md) - Embedding videos in Remotion - trimming, volume, speed, looping, pitch
- [rules/parameters.md](rules/parameters.md) - Make a video parametrizable by adding a Zod schema
- [rules/remotion-animated.md](rules/remotion-animated.md) - Declarative animations with spring physics (Move, Scale, Fade, Rotate, Size)
- [rules/scene3d-camera.md](rules/scene3d-camera.md) - Scene3D flying camera system (AE-style transitions, Transform3D, quaternion SLERP)
- [rules/remotion-mcp.md](rules/remotion-mcp.md) - Official MCP server for real-time documentation lookup
- [rules/motion-blur.md](rules/motion-blur.md) - Trail effects and motion blur with `<Trail>` component
- [rules/paths.md](rules/paths.md) - SVG path utilities (evolvePath, interpolatePath, getLength, etc.)
- [rules/noise.md](rules/noise.md) - Perlin noise for organic motion (noise3D)
- [rules/layout-utils.md](rules/layout-utils.md) - Dynamic text fitting with fitText()
- [rules/maps.md](rules/maps.md) - Add a map using Mapbox and animate it
