Video Remotion

🎬 Remotion Video Generation Skill

This skill provides the capabilities to generate videos programmatically using Remotion (React-based video framework). It bridges the gap between Python agents and the Node.js/React rendering engine.

📦 Dependencies & Setup

System Requirements:

• Node.js (v16+) and npm/yarn/pnpm
• FFmpeg (usually handled by Remotion, but good to have)
• Python 3.8+ (for the wrapper script)

Python Packages: run uv add remotion-lambda python-dotenv

Remotion Project Setup: If no project exists, initialize one:

npx create-remotion@latest ./remotion_projects/my-video --template=helloworld

🏗️ Workflows

1. Scouting Composition Schemas

Before rendering, you must understand what data the video needs.

1. Locate src/Root.tsx or src/compositions/.
2. Look for z.object schemas used in <Composition schema={...} />.
3. Crucial: These schemas define the structure of the JSON props you must generate.

2. Rendering Videos (The Hybrid Approach)

Use the provided helper script: .claude/skills/video-remotion/scripts/remotion_wrapper.py.

Option A: Local Rendering (Development/Preview)

Best for quick checks, debugging, or when offline.

1. Generate Props: Create a JSON file (e.g., props.json) matching the composition's schema.
2. Run Wrapper:

   python .claude/skills/video-remotion/scripts/remotion_wrapper.py \
     --mode local \
     --project-dir /path/to/remotion-project \
     --composition MyCompId \
     --props props.json \
     --output out/video.mp4
   

Option B: Lambda Rendering (Production)

Best for long videos, final outputs, and speed. Requires AWS Setup.

1. Ensure Policies: User needs remotion-lambda-user and remotion-lambda-role.
2. Deploy (Once):

   npx remotion lambda sites create src/index.ts
   npx remotion lambda functions deploy
   

   Capture the Serve URL and Function Name.
3. Run Wrapper:

   # Ensure env vars are set: REMOTION_APP_REGION, REMOTION_APP_SERVE_URL, REMOTION_APP_FUNCTION_NAME
   python .claude/skills/video-remotion/scripts/remotion_wrapper.py \
     --mode lambda \
     --project-dir /path/to/remotion-project \
     --composition MyCompId \
     --props props.json
   

3. Creating New Templates

To create a NEW type of video:

1. Create a React component file in src/compositions/.
2. Define a Zod schema for its props.
3. Register it in src/Root.tsx.
4. Pattern: Use AbsoluteFill for layout, Sequence for timing, and spring/interpolate for motion.

🧠 Best Practices

• Props as Files: Always write props to a temporary JSON file and pass the path. Passing complex JSON strings in CLI arguments is fragile.
• Assets:
  • Local: Use staticFile('image.png') (put files in public/).
  • Lambda: Use public HTTP URLs (e.g., S3 buckets, Unsplash) or ensuring public/ folder is correctly deployed with the site.
• Duration: If the video length depends on the text/content, use calculateMetadata in the composition to dynamically set durationInFrames.

🐛 Troubleshooting

• "Command not found: remotion": Ensure you run commands inside the project directory where node_modules are installed, or use npx remotion.
• Lambda Permissions: 90% of Lambda failures are AWS IAM issues. Run npx remotion lambda policies user to fix.
• Timeout: If Local render hangs, try reducing --concurrency.