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:**
```typescript
// 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:

• Compared scene count: 4 scenes (matches)
• Verified scene durations: All correct
• Checked color palette: 1 mismatch found
• Validated spring configs: All match
• 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:

• All SCENE_TIMING constants match spec
• Sequence components use correct start/duration
• No timing overlap or gaps
• 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:

• All assets present in public/
• Correct formats used (mostly)
• staticFile() imports correct
• File sizes optimized (1 large image)
• No missing assets

Performance (95%)

Render Performance:

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