Best Practices

Proven strategies for creating high-quality videos with Remotion and Claude Code, including composition tips, effective prompts, performance optimization, and template creation.

Video Composition Tips

• Plan before prompting: Sketch out your video structure (scenes, timing, transitions) before asking Claude Code to write code
• Keep scenes focused: Each component should handle one scene or visual element. Compose them together using Sequences.
• Consistent styling: Define a shared style object or theme file for colors, fonts, and spacing used across all scenes
• Typography hierarchy: Use 2-3 font sizes maximum per scene. Large for headlines, medium for body, small for captions.
• White space: Give elements room to breathe. Dense videos are harder to watch than well-spaced ones.
• Animation restraint: Not everything needs to animate. Strategic motion draws attention; constant motion creates noise.

Effective Claude Code Prompts for Video

Get the best results from Claude Code with structured prompts:

Video specification:
- Resolution: 1920x1080 (or 1080x1080 for square)
- FPS: 30
- Duration: [X] seconds
- Background: [color/gradient]

Scene description:
[What appears on screen and when]

Animation details:
- Entrance: [how elements appear]
- Duration: [how long each animation takes]
- Exit: [how elements disappear]
- Easing: [spring, ease-in-out, linear]

Style guide:
- Font: [font family]
- Colors: [primary, secondary, accent]
- Mood: [professional, playful, minimal]

Technical requirements:
- Register as composition in Root.tsx
- Use TypeScript
- Make text content configurable via props

Performance Optimization

• Avoid re-renders: Use React.memo() for components that do not change between frames
• Preload assets: Use preloadImage(), preloadFont(), and preloadAudio() in calculateMetadata()
• Optimize images: Use appropriately sized images. A 4K image in a 1080p video wastes memory and rendering time.
• Reduce DOM nodes: Simpler component trees render faster. Avoid deeply nested divs.
• Use OffthreadVideo: When including external video files, use <OffthreadVideo> instead of <Video> for better performance
• Profile rendering: Use --log=verbose to identify slow frames

Asset Management

Organize your project assets for maintainability:

public/
├── fonts/
│   ├── Inter-Bold.woff2
│   └── JetBrainsMono-Regular.woff2
├── images/
│   ├── logo.svg
│   ├── backgrounds/
│   └── icons/
├── audio/
│   ├── background-music.mp3
│   └── sound-effects/
└── lottie/
    └── loading.json

Template Creation

Build reusable templates to speed up video production:

• Parameterize everything: Colors, text, images, timing — all should be configurable via props
• Create a component library: Build reusable TitleCard, BulletList, BarChart, CTA, and Transition components
• Use input props: Remotion's inputProps let you pass data at render time without changing code
• Document your templates: Comment each prop with its purpose and expected format
• Version your templates: Use Git to track template changes and collaborate with your team

Frequently Asked Questions