remotionlisted

# Remotion Best Practices Video creation in React using Remotion. ## When to Use - Creating video compositions - Adding animations to video - Working with subtitles/captions - Embedding media (videos, images, audio) - Sequencing and timing ## Core Concepts ### Compositions Define video dimensions, duration, and frame rate: ```tsx import { Composition } from 'remotion'; <Composition id="MyVideo" component={MyComponent} durationInFrames={150} fps={30} width={1920} height={1080} /> ``` ### Animation with useCurrentFrame ```tsx import { useCurrentFrame, interpolate } from 'remotion'; const MyComponent = () => { const frame = useCurrentFrame(); const opacity = interpolate(frame, [0, 30], [0, 1]); return <div style={{ opacity }}>Hello</div>; }; ``` ### Sequencing ```tsx import { Sequence } from 'remotion'; <Sequence from={0} durationInFrames={60}> <Scene1 /> </Sequence> <Sequence from={60} durationInFrames={60}> <Scene2 /> </Sequence> ``` ## Detailed Rules Load specific rules for detailed guidance: | Rule | When to Load | |------|--------------| | `rules/animations.md` | Fundamental animation patterns | | `rules/compositions.md` | Defining compositions, stills, folders | | `rules/subtitles.md` | Captions and subtitle rendering | | `rules/timing.md` | Interpolation, easing, springs | | `rules/videos.md` | Embedding videos - trim, volume, speed | ## Quick Reference ### Interpolation ```tsx // Linear interpolation const value = interpolate(frame,