Composition Checklist

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

✅ Asset Preparation

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

✅ Component Structure

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

✅ Configuration

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

✅ Animations & Transitions

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

✅ Visual Quality

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

✅ Timing

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

✅ Preview & Testing

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

✅ Rendering

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

✅ Final Output

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

🎨 Optional Enhancements

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

📋 Best Practices Verified

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

🐛 Common Issues Checked

• Not done: No blurry images (check source resolution)
• Not done: No misaligned text (verify positioning)
• Not done: No choppy animations (check spring configs)
• Not done: No missing assets (verify all paths)
• Not done: 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.)