My remotion rules: # Remotion Code Writing Guide for LLM Agents ## Overview This guide provides detailed instructions for LLM agents on how to write proper Remotion code that works with the video rendering API endpoint. Follow these rules precisely to ensure successful video generation. ## Core Requirements ### 1. Component Structure - **ALWAYS** wrap your code in a proper React functional component - **NEVER** put variable declarations or logic outside of a component function - **ALWAYS** export both the main component and a RemotionRoot ```jsx // ✅ CORRECT - Proper component structure const MyVideo = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); return ( {/* Your content here */} ); }; export const RemotionRoot = () => { return ( ); }; ``` ```jsx // ❌ WRONG - Variables outside component const frame = useCurrentFrame(); // This will cause "Top-level return" error const MyVideo = () => { return

Content

; }; ``` ### 2. JSX Syntax Requirements - **ALWAYS** use proper JSX syntax with angle brackets `` - **NEVER** use React.createElement unless specifically requested - **ALWAYS** use double quotes for JSX attributes - **NEVER** use template literals - use string concatenation instead ```jsx // ✅ CORRECT - Proper JSX and string concatenation

// ❌ WRONG - Template literals (ESBuild incompatible)

// ❌ WRONG - React.createElement (unless specifically requested) React.createElement('div', { style: { color: 'red' } }) ``` ### 3. Available Imports The following imports are automatically added - **DO NOT** include import statements in your code: ```jsx // These are automatically imported: // React, AbsoluteFill, Sequence, interpolate, useCurrentFrame, useVideoConfig, // spring, Composition, registerRoot, Video, Audio, Img, staticFile, // continueRender, delayRender, cancelRender, getInputProps, random, Loop, Series ``` ### 4. Animation Techniques #### Frame-based Animation ```jsx const MyComponent = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const time = frame / fps; // Rotation animation const rotation = time * 360; // Full rotation per second // Scale animation using interpolate const scale = interpolate(frame, [0, 30, 60], [1, 1.5, 1], { extrapolateRight: "clamp" }); return (

Content

); }; ``` #### Using Sequences for Timeline Control ```jsx ``` ### 5. Audio Integration Use Remotion's Audio component for background music or sound effects: ```jsx // ✅ CORRECT - Remotion Audio component

Remotion Guru