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 system, acceptable)
- Scene 3: 75ms/frame ✅
- Scene 4: 70ms/frame ✅

**No Major Issues:**
- ✅ Spring calculations extracted and reused
- ✅ No expensive operations in render path
- ✅ Assets load efficiently (except large PNG)
- ✅ No memory leaks detected

**Minor Optimization Opportunities:**
- Memoize particle calculations (5-10% improvement in Scene 2)
- Optimize product.png (faster asset loading)

---

## Recommendations

### Before Production
1. ✅ **Fix HIGH priority color mismatch** (5 minutes)
2. ⏭️ Consider optimizing product image (10 minutes) - Optional but recommended

### For Future Iterations
1. Add JSDoc comments to scene components
2. Apply memoization to particle system
3. Consider extracting ParticleSystem to reusable component

---

## Testing Checklist

Completed validation:
- [x] Visual inspection of all scenes
- [x] Frame-by-frame timing verification
- [x] Color palette comparison
- [x] Audio synchronization test
- [x] Asset loading verification
- [x] Render performance profiling
- [x] Code pattern review
- [x] Best practices compliance

---

## Next Steps

1. **Address HIGH priority issue:** Fix Scene 3 background color
2. **Optional:** Optimize product.png asset
3. **Final render:** Generate production video
4. **Performance check:** Run `/remotion-performance-optimizer` if render times increase
5. **Archive:** Save REVIEW_REPORT.md with project files

---

## Approval

**Status:** ✅ APPROVED WITH MINOR REVISIONS

This implementation is production-ready after addressing the Scene 3 color mismatch. All critical functionality, timing, and structure are correct. Medium and low priority items are optional improvements that can be addressed in future iterations.

**Signed:** remotion-video-reviewer
**Date:** 2026-01-23

This document provides:

• Executive summary with quick approval status
• Quantified compliance scores (95%, 98%, etc.)
• Prioritized issues (CRITICAL, HIGH, MEDIUM, LOW)
• Specific code locations and fixes
• Detailed analysis per category
• Testing verification checklist
• Clear next steps
• Official approval status

Feeds into:

• Developer: Fix identified issues
• /remotion-performance-optimizer if performance issues found
• Final production render after approval

Review Process

1. Spec Comparison

Compare implementation against motion design spec:

Check:

• [ ] All scenes from spec are implemented
• [ ] Scene durations match spec timing
• [ ] Color palette matches hex codes exactly
• [ ] Typography (font, size, weight) matches
• [ ] Animation descriptions are accurately translated
• [ ] Audio placement matches timing
• [ ] Spring configurations match spec

2. Code Quality Review

Evaluate code structure and patterns:

Check:

• [ ] Constants extracted (colors, springs, timing)
• [ ] Scene components follow naming convention
• [ ] AbsoluteFill used for all scenes
• [ ] Progress variables extracted (not inline calculations)
• [ ] useVideoConfig used for responsive positioning
• [ ] TypeScript types defined
• [ ] Proper imports from remotion

3. Timing Accuracy

Verify frame calculations:

Check:

• [ ] Seconds correctly converted to frames (seconds * fps)
• [ ] Scene timing constants are accurate
• [ ] Delay calculations use frame offsets
• [ ] Transitions account for overlap
• [ ] Total duration matches spec
• [ ] Animation hold times are correct

4. Animation Review

Assess animation implementation:

Check:

• [ ] Spring configs match spec descriptions
• [ ] Interpolate ranges match spec values
• [ ] Easing functions appropriate for motion type
• [ ] Stagger delays calculated correctly
• [ ] Continuous animations use appropriate patterns
• [ ] Exit animations present where specified

5. Visual Fidelity

Confirm visual accuracy:

Check:

• [ ] Background colors match spec
• [ ] Element colors use COLORS constants
• [ ] Font sizes match spec exactly
• [ ] Positioning follows spec layout
• [ ] Visual hierarchy maintained
• [ ] Layer organization (background/midground/foreground)

6. Asset Quality

Validate asset preparation:

Check:

• [ ] All required assets present
• [ ] Assets use staticFile() import
• [ ] Image formats appropriate (PNG for transparency, JPEG for photos)
• [ ] Audio files in supported formats
• [ ] Asset dimensions suitable for composition
• [ ] Fonts loaded correctly

7. Performance Check

Identify performance issues:

Check:

• [ ] No expensive calculations in render
• [ ] Progress variables reused
• [ ] No unnecessary spring recalculations
• [ ] Memoization used where appropriate
• [ ] Large assets optimized
• [ ] No memory leaks in loops

Review Output Format

Summary

## Review Summary

**Spec Compliance**: 95% (1 minor deviation)
**Code Quality**: Excellent
**Timing Accuracy**: 100%
**Visual Fidelity**: 98% (color mismatch in Scene 3)
**Asset Quality**: Good (1 optimization needed)
**Performance**: Excellent

**Overall Rating**: READY FOR PRODUCTION (with minor revisions)

Issues List (Prioritized)

## Issues Found

### CRITICAL (Must Fix)
None

### HIGH (Should Fix)
1. **Scene 3 background color mismatch**
   - Spec: #0A0A0A
   - Code: #0B0B0B
   - Impact: Visual inconsistency
   - Fix: Update COLORS.background

### MEDIUM (Consider Fixing)
1. **Product image could be optimized**
   - Current: 4000x3000 PNG
   - Recommendation: 1920x1440 JPEG
   - Impact: Faster render times
   - Fix: Resize and convert asset

### LOW (Nice to Have)
1. **Add memoization to particle system**
   - Impact: Negligible performance gain
   - Fix: Wrap in useMemo

Recommendations

## Recommendations

### Code Organization
- Extract ParticleSystem to reusable component
- Consider splitting Scene6 (currently 150 lines)

### Performance
- Preload audio files
- Consider lazy loading large assets

### Maintainability
- Add JSDoc comments to scene components
- Consider extracting animation helpers

Common Issues to Check

Timing Issues

Issue: Incorrect frame calculation

// Wrong
const duration = 5; // Should be 150 frames, not 5

// Correct
const duration = 5 * fps; // 150 frames

Issue: Missing delay

// Wrong - all elements appear at once
const progress = spring({ frame, fps, config: SMOOTH_SPRING });

// Correct - staggered with delays
const progress = spring({
  frame: frame - (index * STAGGER_DELAY),
  fps,
  config: SMOOTH_SPRING
});

Animation Issues

Issue: Inline spring config instead of constant

// Wrong
const progress = spring({
  frame,
  fps,
  config: { damping: 200 },
});

// Correct
const progress = spring({
  frame,
  fps,
  config: SPRING_CONFIGS.smooth,
});

Issue: Repeated calculations

// Wrong
<div style={{
  opacity: spring({ frame, fps, config: SMOOTH }),
  transform: `scale(${spring({ frame, fps, config: SMOOTH })})`,
}} />

// Correct
const progress = spring({ frame, fps, config: SMOOTH });
<div style={{
  opacity: progress,
  transform: `scale(${progress})`,
}} />

Visual Issues

Issue: Hardcoded colors

// Wrong
backgroundColor: '#FF6B35'

// Correct
backgroundColor: COLORS.primary

Issue: Pixel values instead of responsive

// Wrong
left: 960,  // Hardcoded center

// Correct
left: width / 2,  // Responsive center

Asset Issues

Issue: Direct import instead of staticFile

// Wrong
import logo from './logo.png';

// Correct
import { staticFile } from 'remotion';
const logoSrc = staticFile('logo.png');

Performance Issues

Issue: Expensive operation in render

// Wrong - recalculated every frame
const particles = Array.from({ length: 1000 }, (_, i) => ({
  x: Math.random() * width,
  y: Math.random() * height,
}));

// Correct - calculate once
const particles = useMemo(
  () => Array.from({ length: 1000 }, (_, i) => ({
    x: seededRandom(i * 123) * width,
    y: seededRandom(i * 456) * height,
  })),
  [width, height]
);

Review Checklist

Complete review checklist:

Spec Compliance

• [ ] All scenes implemented
• [ ] Timing matches spec
• [ ] Colors match exactly
• [ ] Typography matches
• [ ] Animations match descriptions
• [ ] Audio matches spec

Code Quality

• [ ] Constants properly extracted
• [ ] Naming conventions followed
• [ ] AbsoluteFill used correctly
• [ ] TypeScript types defined
• [ ] Clean, readable code

Timing

• [ ] Frame calculations correct
• [ ] Delays calculated properly
• [ ] Total duration accurate
• [ ] Transitions timed correctly

Visuals

• [ ] Colors use constants
• [ ] Responsive positioning
• [ ] Visual hierarchy clear
• [ ] Layer organization logical

Assets

• [ ] All assets present
• [ ] staticFile used
• [ ] Formats appropriate
• [ ] Quality sufficient

Performance

• [ ] No expensive render calculations
• [ ] Progress variables reused
• [ ] Assets optimized
• [ ] Memoization where needed

Integration with Other Skills

Works with:

• /remotion-spec-translator — Reviews translated code
• /remotion-best-practices — Ensures patterns are followed
• /motion-designer — Compares against original spec
• /remotion-performance-optimizer — Deep performance analysis

Rules Directory

For detailed review criteria:

• rules/spec-compliance.md — Verifying spec accuracy
• rules/timing-review.md — Frame timing validation
• rules/animation-quality.md — Animation assessment
• rules/visual-accuracy.md — Visual fidelity checks
• rules/asset-validation.md — Asset quality review
• rules/performance-audit.md — Performance checking
• rules/code-patterns.md — Code quality standards

---

This skill ensures Remotion implementations are production-ready, spec-compliant, and follow best practices before deployment.

Rule Sections

Review Categories

• spec-compliance.md — Verifying implementation matches design specification
• timing-review.md — Frame timing and duration validation
• animation-quality.md — Animation implementation assessment
• visual-accuracy.md — Visual fidelity and layout verification

Quality Checks

• asset-validation.md — Asset quality and format review
• performance-audit.md — Performance and optimization checking
• code-patterns.md — Code quality and best practices verification
• common-issues.md — Checklist of frequent problems

Common Issues Checklist

Impact: HIGH

Quick reference checklist of frequent Remotion implementation issues.

Timing Issues

Issue 1: Seconds not converted to frames

// ❌ WRONG
durationInFrames: 5  // This is 5 frames, not 5 seconds!

// ✓ CORRECT
durationInFrames: 5 * 30  // 150 frames = 5 seconds at 30fps

Issue 2: Missing frame offset for delays

// ❌ WRONG - All elements appear simultaneously
elements.map((el, i) => {
  const progress = spring({ frame, fps, config: SMOOTH });
  // ...
});

// ✓ CORRECT - Staggered appearance
elements.map((el, i) => {
  const progress = spring({
    frame: frame - (i * STAGGER_DELAY),
    fps,
    config: SMOOTH,
  });
  // ...
});

Issue 3: Scene timing doesn't account for overlap

// ❌ WRONG - Hard cut between scenes
scene1: { start: 0, duration: 150 },
scene2: { start: 150, duration: 300 },

// ✓ CORRECT - Crossfade overlap
const TRANSITION = 15;
scene1: { start: 0, duration: 150 + TRANSITION },
scene2: { start: 150 - TRANSITION, duration: 300 + TRANSITION },

Animation Issues

Issue 4: Inline spring configs instead of constants

// ❌ WRONG
const progress = spring({ frame, fps, config: { damping: 200 } });

// ✓ CORRECT
const progress = spring({ frame, fps, config: SPRING_CONFIGS.smooth });

Issue 5: Repeated spring calculations

// ❌ WRONG - Calculates spring 3 times
<div style={{
  opacity: spring({ frame, fps, config: SMOOTH }),
  scale: spring({ frame, fps, config: SMOOTH }),
  y: interpolate(spring({ frame, fps, config: SMOOTH }), [0,1], [0,100]),
}} />

// ✓ CORRECT - Calculate once, reuse
const progress = spring({ frame, fps, config: SMOOTH });
<div style={{
  opacity: progress,
  scale: progress,
  y: interpolate(progress, [0, 1], [0, 100]),
}} />

Issue 6: Wrong interpolate range

// Spec says: Scale from 0.8 to 1.0

// ❌ WRONG
const scale = interpolate(progress, [0, 1], [0, 1]);

// ✓ CORRECT
const scale = interpolate(progress, [0, 1], [0.8, 1]);

Visual Issues

Issue 7: Hardcoded colors

// ❌ WRONG
backgroundColor: '#FF6B35'
color: '#FFFFFF'

// ✓ CORRECT
backgroundColor: COLORS.primary
color: COLORS.white

Issue 8: Non-responsive positioning

// ❌ WRONG
left: 960  // Only works at 1920 width

// ✓ CORRECT
left: width / 2
transform: 'translateX(-50%)'

Issue 9: Missing AbsoluteFill

// ❌ WRONG
function Scene1() {
  return <div>Content</div>;
}

// ✓ CORRECT
function Scene1() {
  return (
    <AbsoluteFill style={{ backgroundColor: COLORS.background }}>
      Content
    </AbsoluteFill>
  );
}

Asset Issues

Issue 10: Direct import instead of staticFile

// ❌ WRONG
import logo from './logo.png';
<img src={logo} />

// ✓ CORRECT
import { staticFile } from 'remotion';
<Img src={staticFile('logo.png')} />

Issue 11: Wrong Audio import

// ❌ WRONG
import music from './music.mp3';
<Audio src={music} />

// ✓ CORRECT
import { staticFile } from 'remotion';
<Audio src={staticFile('music.mp3')} />

Issue 12: Large unoptimized assets

// ❌ PROBLEM
// Using 4000x3000 PNG for 400x300 element

// ✓ SOLUTION
// Resize to 800x600 (2x for retina), convert to JPEG if no transparency

Code Organization Issues

Issue 13: No constants extraction

// ❌ WRONG
<div style={{ backgroundColor: '#FF6B35' }} />
const p = spring({ frame, fps, config: { damping: 200 } });

// ✓ CORRECT
const COLORS = { primary: '#FF6B35' } as const;
const SMOOTH = { damping: 200 };

<div style={{ backgroundColor: COLORS.primary }} />
const p = spring({ frame, fps, config: SMOOTH });

Issue 14: Missing scene timing constants

// ❌ WRONG
<Sequence from={0} durationInFrames={150}>
<Sequence from={150} durationInFrames={300}>

// ✓ CORRECT
const SCENE_TIMING = {
  scene1: { start: 0, duration: 150 },
  scene2: { start: 150, duration: 300 },
} as const;

<Sequence from={SCENE_TIMING.scene1.start} durationInFrames={SCENE_TIMING.scene1.duration}>

Issue 15: No TypeScript types

// ❌ WRONG
export function MyVideo(props) {

// ✓ CORRECT
export interface MyVideoProps {
  title?: string;
}

export function MyVideo({}: MyVideoProps) {

Performance Issues

Issue 16: Expensive calculations in render

// ❌ WRONG - Recalculated every frame
const particles = Array.from({ length: 1000 }, () => ({
  x: Math.random() * width,
  y: Math.random() * height,
}));

// ✓ CORRECT - Deterministic, seeded
const seededRandom = (seed: number) => {
  const x = Math.sin(seed) * 10000;
  return x - Math.floor(x);
};

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

Issue 17: Missing memoization for heavy calculations

// ❌ WRONG
const complexCalculation = /* expensive operation */;

// ✓ CORRECT
const complexCalculation = useMemo(
  () => /* expensive operation */,
  [dependency]
);

Integration Issues

Issue 18: Wrong hook usage

// ❌ WRONG
const frame = useCurrentFrame();
// ... but never use useVideoConfig

// ✓ CORRECT
const frame = useCurrentFrame();
const { fps, width, height } = useVideoConfig();

Issue 19: Incorrect Sequence nesting

// ❌ WRONG
<Sequence from={0} durationInFrames={150}>
  <Sequence from={150} durationInFrames={300}>  // Nested!
    <Scene2 />
  </Sequence>
</Sequence>

// ✓ CORRECT
<Sequence from={0} durationInFrames={150}>
  <Scene1 />
</Sequence>
<Sequence from={150} durationInFrames={300}>  // Sibling
  <Scene2 />
</Sequence>

Quick Review Checklist

Print this for fast reviews:

Timing

• [ ] Seconds → frames conversion (× fps)
• [ ] Delays use frame offsets
• [ ] Scene timing adds up to total

Animations

• [ ] Spring configs in constants
• [ ] Progress variables extracted
• [ ] Interpolate ranges match spec

Visuals

• [ ] Colors use COLORS constant
• [ ] Responsive positioning (width/height)
• [ ] AbsoluteFill on all scenes

Assets

• [ ] staticFile() for all assets
• [ ] Appropriate formats
• [ ] Optimized sizes

Code Quality

• [ ] Constants extracted
• [ ] TypeScript types defined
• [ ] Scene timing constants

Performance

• [ ] No random() in render
• [ ] Heavy calculations memoized
• [ ] Progress variables reused

Spec Compliance Verification

Impact: CRITICAL

Ensuring implementation accurately reflects the motion design specification.

Scene Count and Structure

Verify:

Spec lists N scenes → Code has N scene components
Each spec scene → Corresponding SceneN function

Check:

// Spec: 3 scenes (Intro, Demo, CTA)
// Code should have:
function Scene1Intro() { }
function Scene2Demo() { }
function Scene3CTA() { }

<Sequence from={...} durationInFrames={...}>
  <Scene1Intro />
</Sequence>
// ... (3 sequences total)

Duration Matching

Spec:

Scene 1: 5 seconds
Scene 2: 10 seconds
Total: 15 seconds

Code Verification:

// Check SCENE_TIMING matches spec
const SCENE_TIMING = {
  scene1: { duration: 150 },  // 5s * 30fps ✓
  scene2: { duration: 300 },  // 10s * 30fps ✓
};

// Total composition duration
durationInFrames: 450  // 15s * 30fps ✓

Color Palette Accuracy

Spec:

Primary: #FF6B35
Background: #0A0A0A

Verification:

// ❌ FAIL - Colors don't match
const COLORS = {
  primary: '#FF6C36',     // Off by one digit
  background: '#0B0B0B',  // Wrong shade
};

// ✓ PASS - Exact match
const COLORS = {
  primary: '#FF6B35',
  background: '#0A0A0A',
};

Check Method: Compare hex codes character-by-character. Even one digit off is a compliance failure.

Typography Compliance

Spec:

Headline: Inter, 64px, Bold (700)
Body: Inter, 18px, Regular (400)

Verification:

// ❌ FAIL - Font sizes wrong
style={{
  fontSize: 60,  // Should be 64
  fontWeight: 700,
}}

// ✓ PASS - Exact match
style={{
  fontSize: 64,
  fontWeight: 700,
  fontFamily: 'Inter, sans-serif',
}}

Animation Description Match

Spec:

Logo scales from 0.8 to 1.0 with smooth spring (damping: 200)

Verification:

// ❌ FAIL - Wrong values
const scale = interpolate(progress, [0, 1], [0.5, 1.2]);

// ❌ FAIL - Wrong spring config
const progress = spring({
  frame,
  fps,
  config: { damping: 20 },  // Should be 200
});

// ✓ PASS - Matches spec
const progress = spring({
  frame,
  fps,
  config: { damping: 200 },
});
const scale = interpolate(progress, [0, 1], [0.8, 1]);

Audio Timing Compliance

Spec:

Sound Effects:
- 0s: Whoosh (entrance)
- 5s: Pop (element reveal)
- 10s: Ding (CTA emphasis)

Verification:

// Check Audio components at correct frame positions
<Sequence from={0}>
  <Audio src={staticFile('whoosh.mp3')} />  // 0s ✓
</Sequence>

<Sequence from={150}>  // 5s * 30fps ✓
  <Audio src={staticFile('pop.mp3')} />
</Sequence>

<Sequence from={300}>  // 10s * 30fps ✓
  <Audio src={staticFile('ding.mp3')} />
</Sequence>

Layout and Positioning

Spec:

Logo: Centered horizontally, 20% from top
Tagline: Centered, below logo with 32px gap

Verification:

// ❌ FAIL - Not responsive
left: 960,  // Hardcoded

// ✓ PASS - Matches spec
left: width / 2,  // Centered
transform: 'translateX(-50%)',  // Account for element width
top: height * 0.2,  // 20% from top

// Tagline
top: height * 0.2 + logoHeight + 32,  // Below logo + 32px gap

Compliance Report Template

## Spec Compliance Report

### Scene Structure
✓ All 3 scenes implemented
✓ Scene naming matches spec
✓ Sequence structure correct

### Timing
✓ Scene 1: 150 frames (5s)
✓ Scene 2: 300 frames (10s)
✓ Total duration: 450 frames (15s)

### Visual Accuracy
✓ Color palette matches exactly
❌ Typography: Font size off in Scene 2 (60px vs 64px)
✓ Layout positioning matches spec

### Animations
✓ Spring configs match spec
❌ Logo scale range incorrect (0.5-1.2 vs 0.8-1.0)

### Audio
✓ Background music present
✓ SFX timing matches spec
✓ Volume levels correct

### Overall Compliance: 90%
Deviations: 2 (typography, animation)
Status: NEEDS REVISION

Compliance Checklist

When reviewing against spec:

• [ ] Scene count matches
• [ ] Scene durations exact (frame-accurate)
• [ ] Color hex codes match exactly
• [ ] Font families, sizes, weights match
• [ ] Animation ranges match spec values
• [ ] Spring configs match spec
• [ ] Audio timing frame-accurate
• [ ] Layout percentages/positions correct
• [ ] Total duration matches spec
• [ ] All spec elements implemented
• [ ] No extra elements not in spec
• [ ] Visual hierarchy maintained