skills/remotion/resources/composition-checklist.md

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.)