Remotion

Remotion – Video Creation in React

Comprehensive skill set for creating programmatic videos using Remotion, a framework for creating videos programmatically using React.

When to use

Use this skill whenever you are dealing with Remotion code to obtain domain-specific knowledge about:

• Creating video compositions with React components
• Animating elements using frame-based animations
• Working with audio, video, and image assets
• Building charts and data visualizations
• Implementing text animations and captions
• Using 3D content with Three.js
• Applying transitions and sequencing
• Integrating Tailwind CSS and Lottie animations

Core Concepts

Remotion allows you to create videos using:

• React Components: Build video content with familiar React syntax
• Frame-based Animations: All animations driven by useCurrentFrame() hook
• Compositions: Define video compositions with duration, dimensions, and props
• Assets: Import and manipulate images, videos, audio, and fonts
• Rendering: Export videos programmatically with customizable settings

Key Features

• Frame-by-frame control over animations
• Dynamic metadata calculation
• Media processing (trimming, volume, speed, pitch)
• Caption generation and display
• Data visualization with charts
• 3D content integration
• Professional text animations
• Scene transitions and sequencing

How to use

Read individual rule files for detailed explanations and code examples:

Core Animation & Timing

• [references/animations.md](references/animations.md) – Fundamental animation techniques for Remotion
• [references/timing.md](references/timing.md) – Interpolation curves: linear, easing, spring animations
• [references/sequencing.md](references/sequencing.md) – Delay, trim, and limit duration of items
• [references/trimming.md](references/trimming.md) – Cut the beginning or end of animations

Compositions & Metadata

• [references/compositions.md](references/compositions.md) – Defining compositions, stills, folders, default props
• [references/calculate-metadata.md](references/calculate-metadata.md) – Dynamically set composition duration, dimensions, and props

Assets & Media

• [references/assets.md](references/assets.md) – Importing images, videos, audio, and fonts
• [references/images.md](references/images.md) – Embedding images using the Img component
• [references/videos.md](references/videos.md) – Embedding videos with trimming, volume, speed, looping, pitch
• [references/audio.md](references/audio.md) – Using audio and sound with trimming, volume, speed, pitch
• [references/gifs.md](references/gifs.md) – Displaying GIFs synchronized with timeline

Text & Typography

• [references/text-animations.md](references/text-animations.md) – Typography and text animation patterns
• [references/measuring-text.md](references/measuring-text.md) – Measuring text dimensions, fitting text, checking overflow
• [references/fonts.md](references/fonts.md) – Loading Google Fonts and local fonts

Captions & Transcription

• [references/display-captions.md](references/display-captions.md) – Displaying captions with TikTok-style pages and word highlighting
• [references/import-srt-captions.md](references/import-srt-captions.md) – Importing .srt subtitle files using @remotion/captions
• [references/transcribe-captions.md](references/transcribe-captions.md) – Transcribing audio to generate captions

Data Visualization

• [references/charts.md](references/charts.md) – Chart and data visualization patterns

Advanced Features

• [references/3d.md](references/3d.md) – 3D content using Three.js and React Three Fiber
• [references/lottie.md](references/lottie.md) – Embedding Lottie animations
• [references/transitions.md](references/transitions.md) – Scene transition patterns

Styling & Layout

• [references/tailwind.md](references/tailwind.md) – Using TailwindCSS in Remotion
• [references/measuring-dom-nodes.md](references/measuring-dom-nodes.md) – Measuring DOM element dimensions

Media Processing (Mediabunny)

• [references/can-decode.md](references/can-decode.md) – Check if a video can be decoded by the browser
• [references/extract-frames.md](references/extract-frames.md) – Extract frames from videos at specific timestamps
• [references/get-audio-duration.md](references/get-audio-duration.md) – Getting the duration of an audio file
• [references/get-video-dimensions.md](references/get-video-dimensions.md) – Getting the width and height of a video file
• [references/get-video-duration.md](references/get-video-duration.md) – Getting the duration of a video file

Quick Start Example

import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";

export const MyComposition = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <div style={{ opacity }}>
      <h1>Hello Remotion!</h1>
    </div>
  );
};

Best Practices

• Always use useCurrentFrame() – Drive all animations from the current frame
• Avoid CSS animations – They won’t render correctly in videos
• Think in seconds – Multiply time in seconds by fps for frame calculations
• Use interpolate for smooth animations – Built-in interpolation with easing functions
• Clamp extrapolation – Prevent values from exceeding intended ranges
• Test frequently – Preview in Remotion Studio before rendering

Resources

• Documentation: https://www.remotion.dev/docs
• Repository: https://github.com/remotion-dev/remotion
• Skills Repository: https://github.com/remotion-dev/skills
• Community: Discord and GitHub Discussions
• License: MIT