Remotion Composition Checklist

Use this checklist to ensure your Remotion walkthrough video composition is complete and follows best practices.

✅ Project Setup

• [ ] Remotion project initialized (or existing project verified)
• [ ] Dependencies installed (@remotion/transitions, etc.)
• [ ] Asset directory created (public/assets/screens/)
• [ ] Screen manifest created (screens.json)

✅ Asset Preparation

• [ ] All Stitch screenshots downloaded
• [ ] Images saved with descriptive names
• [ ] Image dimensions recorded in manifest
• [ ] Images optimized for size (if needed)
• [ ] Asset paths are correct and relative to public/

✅ Component Structure

• [ ] ScreenSlide.tsx component created
• [ ] Props interface defined
• [ ] Zoom animation implemented
• [ ] Fade animation implemented
• [ ] Text overlay included
• [ ] WalkthroughComposition.tsx created
• [ ] Screen manifest imported
• [ ] <Sequence> components for each screen
• [ ] Transitions between screens configured
• [ ] Proper timing offsets calculated

✅ Configuration

• [ ] remotion.config.ts updated
• [ ] Composition ID set
• [ ] Video dimensions configured
• [ ] Frame rate set (30 or 60 fps)
• [ ] Duration calculated correctly
• [ ] Video metadata set (if applicable)
• [ ] Title
• [ ] Description

✅ Animations & Transitions

• [ ] Spring animations use appropriate configs
• [ ] Damping values (8-15 typical)
• [ ] Stiffness values (60-100 typical)
• [ ] Transitions feel smooth
• [ ] Text overlays timed correctly
• [ ] No jarring or abrupt changes

✅ Visual Quality

• [ ] Text is readable at all times
• [ ] Sufficient contrast between text and background
• [ ] Font sizes appropriate for video resolution
• [ ] Images display without distortion
• [ ] Aspect ratios maintained

✅ Timing

• [ ] Each screen displays for appropriate duration
• [ ] Total video length is reasonable (not too long/short)
• [ ] Transitions don't feel rushed
• [ ] Text has time to be read

✅ Preview & Testing

• [ ] Preview in Remotion Studio (npm run dev)
• [ ] Scrub through timeline to check all frames
• [ ] Verify smooth playback
• [ ] Check for any rendering errors
• [ ] Test on different screen sizes (if responsive)

✅ Rendering

• [ ] Render command tested and works
• [ ] Output format chosen (MP4, WebM, etc.)
• [ ] Quality settings configured
• [ ] Codec specified (h264 recommended)
• [ ] Final video renders without errors

✅ Final Output

• [ ] Video file generated successfully
• [ ] File size is reasonable
• [ ] Video plays correctly in media players
• [ ] Audio included (if applicable)
• [ ] Metadata embedded (if needed)

🎨 Optional Enhancements

• [ ] Progress indicator showing current screen
• [ ] Custom logo or branding
• [ ] Background music or sound effects
• [ ] Voiceover narration
• [ ] Interactive hotspots highlighting features
• [ ] Call-to-action at end

📋 Best Practices Verified

• [ ] Component code is modular and reusable
• [ ] TypeScript interfaces used for props
• [ ] No hardcoded values (use manifest/config)
• [ ] Code follows Remotion conventions
• [ ] Comments added for complex logic
• [ ] Assets organized in clear folder structure

🐛 Common Issues Checked

• [ ] No blurry images (check source resolution)
• [ ] No misaligned text (verify positioning)
• [ ] No choppy animations (check spring configs)
• [ ] No missing assets (verify all paths)
• [ ] No build errors (run npm run build test)

Notes:

• Mark items with [x] as you complete them
• Add custom checklist items specific to your project
• Review Remotion documentation for updates
• Test final video on target platform (YouTube, social, etc.)