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 ```tsx 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 1. **Always use `useCurrentFrame()`** - Drive all animations from the current frame 2. **Avoid CSS animations** - They won't render correctly in videos 3. **Think in seconds** - Multiply time in seconds by `fps` for frame calculations 4. **Use interpolate for smooth animations** - Built-in interpolation with easing functions 5. **Clamp extrapolation** - Prevent values from exceeding intended ranges 6. **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 --- > Converted and distributed by [TomeVault](https://tomevault.io) | [Claim this content](https://tomevault.io/claim/davila7/claude-code-templates) <!-- tomevault:2.0:skill_md:2026-04-05 -->