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 - Fundamental animation techniques for Remotion
references/timing.md - Interpolation curves: linear, easing, spring animations
references/sequencing.md - Delay, trim, and limit duration of items
references/trimming.md - Cut the beginning or end of animations

Compositions & Metadata

references/compositions.md - Defining compositions, stills, folders, default props
references/calculate-metadata.md - Dynamically set composition duration, dimensions, and props

Assets & Media

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

Text & Typography

references/text-animations.md - Typography and text animation patterns
references/measuring-text.md - Measuring text dimensions, fitting text, checking overflow
references/fonts.md - Loading Google Fonts and local fonts

Captions & Transcription

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

Data Visualization

references/charts.md - Chart and data visualization patterns

Advanced Features

references/3d.md - 3D content using Three.js and React Three Fiber
references/lottie.md - Embedding Lottie animations
references/transitions.md - Scene transition patterns

Styling & Layout

references/tailwind.md - Using TailwindCSS in Remotion
references/measuring-dom-nodes.md - Measuring DOM element dimensions

Media Processing (Mediabunny)

references/can-decode.md - Check if a video can be decoded by the browser
references/extract-frames.md - Extract frames from videos at specific timestamps
references/get-audio-duration.md - Getting the duration of an audio file
references/get-video-dimensions.md - Getting the width and height of a video file
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

remotion