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 fps value from useVideoConfig().
```
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 in staticFile() 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/media or remotion instead 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 explicit width and height props.
Hook Usage: Confirm that you are not using useFrame() from @react-three/fiber. All 3D rotations, positions, and shader uniforms must be driven by useCurrentFrame().
Sequence Layout: Any <Sequence> used inside a <ThreeCanvas> must have the layout="none" prop applied.

Composition & Metadata

Dynamic Metadata: If your video duration depends on external data or media length, verify your calculateMetadata function. Ensure it handles abortSignal to 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 defaultProps and props returned by calculateMetadata are 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:

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 useMemo where useCurrentFrame() is not a dependency.