Remotion Best Practices

Composition Setup

import { Composition } from 'remotion';

<Composition
  id="PropertyVideo"
  component={PropertyShowcase}
  durationInFrames={300}
  fps={30}
  width={1920}
  height={1080}
  schema={PropertySchema}
  defaultProps={{ ... }}
/>

Sequence Pattern

<Sequence from={0} durationInFrames={90}>
  <Scene1 />
</Sequence>
<Sequence from={90} durationInFrames={90}>
  <Scene2 />
</Sequence>

Detailed Rules

• Animations: See rules/animations.md
• Compositions: See rules/compositions.md
• Timing: See rules/timing.md
• Assets: See rules/assets.md
• Transitions: See rules/transitions.md
• Captions: See rules/captions.md

Common Patterns

Spring Animation

import { spring, useCurrentFrame, useVideoConfig } from 'remotion';

const { fps } = useVideoConfig();
const scale = spring({
  fps,
  frame,
  config: { damping: 200 },
});

Loading External Assets

import { delayRender, continueRender, staticFile } from 'remotion';

const [handle] = useState(() => delayRender());
useEffect(() => {
  loadAsset().then(() => continueRender(handle));
}, []);

Audio Sync

import { Audio, Sequence } from 'remotion';

<Audio src={voiceoverUrl} volume={1} />
<Sequence from={30}> {/* Start after 1 second */}
  <AnimatedText />
</Sequence>