Project Launch Checklist
Final Pre-Flight Validation
Before deploying your video project or transitioning from local development to a production render environment, ensure your code complies with the following technical requirements to prevent flickering, layout shifts, or render failures.
Core Animation Logic
- Frame-Driven Animations: Verify that every animation in your project is driven by the
useCurrentFrame()hook. - No CSS/Tailwind Transitions: Ensure no components use CSS transitions, keyframe animations, or Tailwind animation utility classes (e.g.,
animate-bounce). These will not synchronize correctly during the rendering process. - Time Calculation: Ensure animations defined in seconds are correctly converted to frames using the
fpsvalue fromuseVideoConfig().const { fps } = useVideoConfig(); const durationInFrames = 2 * fps; // 2 seconds
Asset Management
- Path Resolution: Audit your project for local assets. All files in the
public/folder must be wrapped instaticFile()to ensure they resolve correctly in production and across subdirectories.// Correct <Img src={staticFile('logo.png')} /> // Incorrect <Img src="/logo.png" /> - Media Components: Confirm you are using
<Img>,<Video>, and<Audio>from@remotion/mediaorremotioninstead of standard HTML tags to ensure assets are fully buffered before the frame is captured. - Decoding Check: If your project handles user-uploaded content, verify that you have implemented a
canDecode()check using Mediabunny to prevent render crashes on incompatible codecs.
3D and Canvas Requirements
- Standardized Canvas: If using
@remotion/three, ensure all 3D content is wrapped in<ThreeCanvas>with explicitwidthandheightprops. - Hook Usage: Confirm that you are not using
useFrame()from@react-three/fiber. All 3D rotations, positions, and shader uniforms must be driven byuseCurrentFrame(). - Sequence Layout: Any
<Sequence>used inside a<ThreeCanvas>must have thelayout="none"prop applied.
Composition & Metadata
- Dynamic Metadata: If your video duration depends on external data or media length, verify your
calculateMetadatafunction. Ensure it handlesabortSignalto prevent memory leaks or stale fetches during the preview.export const MyComposition = () => ( <Composition id="DynamicVideo" component={MyComp} calculateMetadata={async ({ props, abortSignal }) => { const data = await fetch(props.url, { signal: abortSignal }); // ... return dynamic duration }} /> ); - Prop Serialization: Ensure all
defaultPropsand props returned bycalculateMetadataare JSON-serializable.
Production Dependencies
Ensure all necessary Remotion packages are added to your package.json and initialized. If you are using specific features, run the corresponding installation command:
| Feature | Package | Command |
| :--- | :--- | :--- |
| Media Handling | @remotion/media | npx remotion add @remotion/media |
| 3D Rendering | @remotion/three | npx remotion add @remotion/three |
| Captions/STT | @remotion/captions | npx remotion add @remotion/captions |
| Google Fonts | @remotion/google-fonts | npx remotion add @remotion/google-fonts |
Rendering Performance
- Audio Pitch: Note that
toneFrequency(pitch shifting) only works during server-side rendering. Preview in the Studio will not reflect these changes. - Component Mounting: Check that large datasets or complex SVG charts do not perform heavy calculations inside the render loop without memoization. Use
useMemowhereuseCurrentFrame()is not a dependency.