1# Remotion Composition Checklist
2 
3Use this checklist to ensure your Remotion walkthrough video composition is complete and follows best practices.
4 
5## ✅ Project Setup
6 
7- [ ] Remotion project initialized (or existing project verified)
8- [ ] Dependencies installed (`@remotion/transitions`, etc.)
9- [ ] Asset directory created (`public/assets/screens/`)
10- [ ] Screen manifest created (`screens.json`)
11 
12## ✅ Asset Preparation
13 
14- [ ] All Stitch screenshots downloaded
15- [ ] Images saved with descriptive names
16- [ ] Image dimensions recorded in manifest
17- [ ] Images optimized for size (if needed)
18- [ ] Asset paths are correct and relative to `public/`
19 
20## ✅ Component Structure
21 
22- [ ] `ScreenSlide.tsx` component created
23  - [ ] Props interface defined
24  - [ ] Zoom animation implemented
25  - [ ] Fade animation implemented
26  - [ ] Text overlay included
27- [ ] `WalkthroughComposition.tsx` created
28  - [ ] Screen manifest imported
29  - [ ] `<Sequence>` components for each screen
30  - [ ] Transitions between screens configured
31  - [ ] Proper timing offsets calculated
32 
33## ✅ Configuration
34 
35- [ ] `remotion.config.ts` updated
36  - [ ] Composition ID set
37  - [ ] Video dimensions configured
38  - [ ] Frame rate set (30 or 60 fps)
39  - [ ] Duration calculated correctly
40- [ ] Video metadata set (if applicable)
41  - [ ] Title
42  - [ ] Description
43 
44## ✅ Animations & Transitions
45 
46- [ ] Spring animations use appropriate configs
47  - [ ] Damping values (8-15 typical)
48  - [ ] Stiffness values (60-100 typical)
49- [ ] Transitions feel smooth
50- [ ] Text overlays timed correctly
51- [ ] No jarring or abrupt changes
52 
53## ✅ Visual Quality
54 
55- [ ] Text is readable at all times
56- [ ] Sufficient contrast between text and background
57- [ ] Font sizes appropriate for video resolution
58- [ ] Images display without distortion
59- [ ] Aspect ratios maintained
60 
61## ✅ Timing
62 
63- [ ] Each screen displays for appropriate duration
64- [ ] Total video length is reasonable (not too long/short)
65- [ ] Transitions don't feel rushed
66- [ ] Text has time to be read
67 
68## ✅ Preview & Testing
69 
70- [ ] Preview in Remotion Studio (`npm run dev`)
71- [ ] Scrub through timeline to check all frames
72- [ ] Verify smooth playback
73- [ ] Check for any rendering errors
74- [ ] Test on different screen sizes (if responsive)
75 
76## ✅ Rendering
77 
78- [ ] Render command tested and works
79- [ ] Output format chosen (MP4, WebM, etc.)
80- [ ] Quality settings configured
81- [ ] Codec specified (h264 recommended)
82- [ ] Final video renders without errors
83 
84## ✅ Final Output
85 
86- [ ] Video file generated successfully
87- [ ] File size is reasonable
88- [ ] Video plays correctly in media players
89- [ ] Audio included (if applicable)
90- [ ] Metadata embedded (if needed)
91 
92## 🎨 Optional Enhancements
93 
94- [ ] Progress indicator showing current screen
95- [ ] Custom logo or branding
96- [ ] Background music or sound effects
97- [ ] Voiceover narration
98- [ ] Interactive hotspots highlighting features
99- [ ] Call-to-action at end
100 
101## 📋 Best Practices Verified
102 
103- [ ] Component code is modular and reusable
104- [ ] TypeScript interfaces used for props
105- [ ] No hardcoded values (use manifest/config)
106- [ ] Code follows Remotion conventions
107- [ ] Comments added for complex logic
108- [ ] Assets organized in clear folder structure
109 
110## 🐛 Common Issues Checked
111 
112- [ ] No blurry images (check source resolution)
113- [ ] No misaligned text (verify positioning)
114- [ ] No choppy animations (check spring configs)
115- [ ] No missing assets (verify all paths)
116- [ ] No build errors (run `npm run build` test)
117 
118---
119 
120**Notes:**
121- Mark items with `[x]` as you complete them
122- Add custom checklist items specific to your project
123- Review Remotion documentation for updates
124- Test final video on target platform (YouTube, social, etc.)
125