125 lines
3.7 KiB
Markdown
125 lines
3.7 KiB
Markdown
# 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.)
|