Content Video

Content Video

Create videos from project assets (source videos, images, screenshots, blog text) using Remotion.

Prerequisites

• Node.js 18+ and npm
• ffprobe (from ffmpeg) for video duration detection
• Source video or images in the project

Workflow

1. Setup Remotion Project

uv run .claude/skills/content-video/scripts/setup_remotion.py <project-dir>

This will:

• Discover assets: videos in source/, images in images/ and screenshots/, blog in content/
• Create a video/ subdirectory with Remotion project scaffolding
• Symlink project assets into video/public/
• Install npm dependencies
• Generate composition code from templates

2. Edit Composition (Optional)

After setup, edit video/src/Composition.tsx to adjust:

• Overlay timing and positioning
• Text content and animations
• Sequence ordering

Preview with: cd video && npx remotion preview

3. Render Final Video

uv run .claude/skills/content-video/scripts/render_video.py <project-dir>

Output: video/out/final.mp4 (1920x1080, h264, 30fps)

Templates

• Root.tsx.jinja2 - Remotion Root component
• Composition.tsx.jinja2 - Main composition with overlays
• index.ts.jinja2 - Entry point

Tips

• Run /content-image first to generate overlay images
• Run /content-screenshot to extract key frames from source video
• The composition template creates a base video layer with image/text overlays