remotion-video-reviewer

Remotion Video Reviewer

Provides comprehensive, structured reviews of Remotion video implementations against motion design specifications. Identifies issues, assesses impact, and generates actionable revision lists.

What This Skill Does

Performs multi-layer review analysis:

1. Spec compliance — Verifies implementation matches design spec
2. Code quality — Checks patterns, performance, best practices
3. Timing accuracy — Validates frame calculations and animation timing
4. Visual fidelity — Confirms colors, typography, layout match spec
5. Asset quality — Verifies assets are production-ready
6. Performance — Identifies render bottlenecks

Input/Output Formats

Input Format: VIDEO_SPEC.md + Code Files

Requires both the original specification and implemented code:

VIDEO_SPEC.md (from /motion-designer)

# Video Title

## Overview
- Duration: 30 seconds
- Frame Rate: 30 fps

## Color Palette
Primary: #FF6B35
Background: #0A0A0A

## Scene 1: Opening (0s - 5s)
- Logo scales from 0.8 to 1.0
- Spring config: { damping: 200 }

Code Files to review:

• src/remotion/compositions/VideoName/index.tsx
• src/remotion/compositions/VideoName/constants.ts
• src/remotion/compositions/VideoName/types.ts
• Asset files in public/

Output Format: REVIEW_REPORT.md

Generates a comprehensive review with prioritized issues:

# Video Review Report: [Video Title]

**Date:** 2026-01-23
**Reviewer:** remotion-video-reviewer
**Spec Version:** VIDEO_SPEC.md v1.0
**Code Location:** `src/remotion/compositions/VideoName/`

---

## Executive Summary

**Overall Status:** ✅ APPROVED WITH MINOR REVISIONS

**Quick Stats:**
- Total Issues: 4 (0 critical, 1 high, 2 medium, 1 low)
- Spec Compliance: 95%
- Code Quality: Excellent
- Production Ready: Yes, after addressing HIGH priority items

**Recommendation:** Address high-priority color mismatch before final render. Medium and low priority items are optional improvements.

---

## Compliance Scores

| Category | Score | Status | Notes |
|----------|-------|--------|-------|
| **Spec Compliance** | 95% | 🟢 Pass | 1 color mismatch in Scene 3 |
| **Code Quality** | 98% | 🟢 Pass | Excellent structure, minor optimization opportunity |
| **Timing Accuracy** | 100% | 🟢 Pass | All frame calculations correct |
| **Visual Fidelity** | 95% | 🟢 Pass | Minor color deviation |
| **Asset Quality** | 90% | 🟡 Good | 1 image could be optimized |
| **Performance** | 95% | 🟢 Pass | Excellent render times |

**Overall Compliance:** 95.5% — Production Ready

---

## Issues Found

### CRITICAL (Must Fix Before Production)
_None_ ✅

### HIGH Priority (Should Fix)

#### 1. Scene 3 Background Color Mismatch
**Category:** Visual Fidelity
**Location:** `src/remotion/compositions/VideoName/scenes/Scene3.tsx:15`
**Impact:** Visual inconsistency with brand colors

**Issue:**

// Current implementation backgroundColor: '#0B0B0B' // ❌ Wrong

// Spec requirement Primary: #FF6B35 Background: #0A0A0A // ✅ Correct

**Fix:**

// Update to use COLORS constant backgroundColor: COLORS.background // Now: #0A0A0A

**Verification:**
- [ ] Update `constants.ts` if COLORS.background is incorrect
- [ ] Verify Scene 3 uses COLORS.background
- [ ] Visual check against spec color palette

---

### MEDIUM Priority (Consider Fixing)

#### 2. Large Product Image Could Be Optimized
**Category:** Asset Quality
**Location:** `public/images/product.png`
**Impact:** Slower render times, larger output file

**Current:**
- Format: PNG
- Resolution: 4000x3000
- File size: 8.2MB

**Recommendation:**
- Format: JPEG (no transparency needed)
- Resolution: 1920x1440 (2x display size)
- Quality: 90%
- Expected size: ~400KB (95% reduction)

**Fix:**

Resize and convert

magick public/images/product.png -resize 1920x1440 -quality 90 public/images/product.jpg

Update code to use .jpg

<Img src={staticFile('images/product.jpg')} />

**Benefits:**
- Faster preview/render times
- Smaller final video file
- No visual quality loss

---

#### 3. Particle System Could Use Memoization
**Category:** Performance
**Location:** `src/remotion/compositions/VideoName/scenes/Scene2.tsx:45`
**Impact:** Minor performance improvement possible

**Current:**

// Particle positions recalculated (deterministic but not cached) const particles = Array.from({ length: 70 }, (_, i) => ({ x: seededRandom(i 123) width, y: seededRandom(i 456) height, }));

**Recommendation:**

import { useMemo } from 'react';

const particles = useMemo( () => Array.from({ length: 70 }, (_, i) => ({ x: seededRandom(i 123) width, y: seededRandom(i 456) height, })), [width, height] );

**Expected Impact:** 5-10% faster render for Scene 2

---

### LOW Priority (Nice to Have)

#### 4. Add JSDoc Comments to Scene Components
**Category:** Code Quality
**Location:** All scene components
**Impact:** Improved maintainability

**Recommendation:**

/**

• Scene 1: Opening animation with logo reveal
• Duration: 0s - 5s (frames 0-150)
• Spec reference: VIDEO_SPEC.md Section "Scene 1"

*/ function Scene1Opening() { // ... }

**Benefits:**
- Easier for team members to understand
- Better IDE autocomplete
- Clear spec traceability

---

## Detailed Analysis

### Spec Compliance (95%)

✅ **Passed:**
- All 4 scenes implemented
- Scene timing matches spec exactly (verified frame calculations)
- Typography matches (Inter font, correct weights)
- Audio placement correct (background music + 2 SFX)
- Spring configurations match spec descriptions
- All animations implemented as described

❌ **Failed:**
- Scene 3 background color (#0B0B0B instead of #0A0A0A)

**Verification Steps Completed:**
- [x] Compared scene count: 4 scenes (matches)
- [x] Verified scene durations: All correct
- [x] Checked color palette: 1 mismatch found
- [x] Validated spring configs: All match
- [x] Tested audio timing: Correct

---

### Code Quality (98%)

✅ **Excellent Patterns:**
- Constants properly extracted (COLORS, SPRING_CONFIGS, SCENE_TIMING)
- Consistent naming conventions (Scene1Opening, Scene2Content)
- AbsoluteFill used correctly in all scenes
- Progress variables extracted (not inline spring calls)
- TypeScript types defined for all props
- Clean, readable code structure
- Proper imports from remotion

✅ **Best Practices Followed:**
- useVideoConfig used for responsive positioning
- staticFile() used for all assets
- Sequence timing uses constants
- No magic numbers in code
- Deterministic random in particle system

🟡 **Minor Improvements:**
- Could add useMemo to particle calculation (LOW impact)
- JSDoc comments would improve maintainability

---

### Timing Accuracy (100%)

✅ **All Verified:**

Scene 1: 0s - 5s → frames 0-150 ✓ Correct (5 30fps) Scene 2: 5s - 15s → frames 150-450 ✓ Correct (10 30fps) Scene 3: 15s - 25s → frames 450-750 ✓ Correct (10 30fps) Scene 4: 25s - 30s → frames 750-900 ✓ Correct (5 30fps)

Total: 30s = 900 frames ✓ Correct

**Validation:**
- [x] All SCENE_TIMING constants match spec
- [x] Sequence components use correct start/duration
- [x] No timing overlap or gaps
- [x] Audio timing matches frame calculations

---

### Asset Quality (90%)

✅ **Good:**
- Logo: 800x800 PNG, optimized, transparent ✓
- Background music: 30s MP3, 192kbps ✓
- Whoosh SFX: MP3, proper duration ✓
- Pop SFX: MP3, proper duration ✓
- Font: Inter loaded correctly via @remotion/google-fonts ✓

🟡 **Could Improve:**
- Product image: 8.2MB PNG → Should be 1920x1440 JPEG (~400KB)

**Asset Checklist:**
- [x] All assets present in `public/`
- [x] Correct formats used (mostly)
- [x] staticFile() imports correct
- [ ] File sizes optimized (1 large image)
- [x] No missing assets

---

### Performance (95%)

**Render Performance:**
- Average: 85ms/frame ✅ Excellent (target: <100ms)
- Scene 1: 65ms/frame ✅
- Scene 2: 105ms/frame 🟡 (particle sys