Scene Review

---
description: Scene-by-scene review in Remotion Studio (before voiceover)
---

# Scene Review

Interactive scene-by-scene review using Remotion Studio. Critical quality gate before voiceover generation.

## Quick Start

/scene-review # Review all scenes from beginning /scene-review title # Jump to specific scene by type /scene-review 3 # Jump to scene 3

## Example Session

$ /scene-review

Remotion Studio running at http://localhost:3000

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Scene 1 of 6: title (4s, frame 0) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Navigate to frame 0 in Studio and watch the scene.

[1] Approve [2] Adjust [3] Refine [4] Flag [5] Skip

3 (Refine)

Invoking frontend-design skill... Reading TitleSlide.tsx and adjacent scenes for context...

What aspect needs refinement?

• Color palette feels too flat
• Text animation needs more impact
• Background too static

Background too static

[Makes changes to TitleSlide.tsx]

Check Remotion Studio - it hot-reloads automatically. Better? [y/n/more changes]

y

Scene 1 approved. Moving to Scene 2...

## Iterative Feedback Loop

The review follows this cycle for each scene:

┌─────────────┐ │ View scene │◄──────────────────────┐ │ in Studio │ │ └──────┬──────┘ │ │ │ ▼ │ ┌─────────────┐ ┌─────────────┐ │ │ Evaluate │───►│ Adjust │────┤ │ │ │ (config) │ │ └──────┬──────┘ └─────────────┘ │ │ │ │ ┌─────────────┐ │ │──────────►│ Refine │────┘ │ │ (component) │ │ └─────────────┘ ▼ ┌─────────────┐ │ Approve │───► Next scene └─────────────┘

- **Adjust**: Change config values (text, duration, asset paths) → hot-reload → verify
- **Refine**: Invoke frontend-design skill for visual improvements → edit component → hot-reload → verify

Repeat until the scene looks right, then approve and move on.

## Purpose

Verify what Remotion will actually render matches your expectations:
- Visual content correct
- Timing appropriate
- Assets present and working
- Scenes in right order

## Entry Point

1. Identify current project (from cwd or glob projects/*/project.json)
2. Locate the template's config file (e.g., demo-config.ts, sprint-config.ts)
3. Start Remotion Studio
4. Walk through scenes one by one

---

## Step 1: Start Remotion Studio

```bash
cd projects/{project-name}
npm run studio

Tell the user:

Remotion Studio is running at http://localhost:3000

Open this in your browser to preview your video.

---

Step 2: Explain the Timeline

## Remotion Studio Timeline

The timeline at the bottom shows your video structure:

┌───────────────────────────────────────────────────────────────┐
│  [Seq 1] [Seq 2] [Seq 3] [Seq 4] [Seq 5] [Seq 6] [Seq 7] ... │
└───────────────────────────────────────────────────────────────┘

- Each segment = one sequence (scene) from your config
- Click anywhere to jump to that frame
- Drag to scrub through
- Frame counter shows position (at 30fps: frame 30 = 1 second)

**Navigation:**
- Click start of a segment to review that scene
- Use arrow keys for frame-by-frame
- Spacebar to play/pause

---

Step 3: Scene-by-Scene Review

Read the scenes array from the config file. For each scene:

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

## Scene {N} of {total}

**Type:** {scene.type}
**Duration:** {scene.durationSeconds}s ({scene.durationSeconds * 30} frames)
**Timeline:** Jump to frame {cumulative_start_frame}

→ In Remotion Studio, navigate to frame {cumulative_start_frame}
→ Watch this scene play through

**Check:**
- [ ] Visual content looks correct
- [ ] Timing feels right
- [ ] Any assets load properly

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

1. Approve - looks good
2. Edit - need to change something in config
3. Refine - improve visuals with frontend-design skill
4. Flag - note an issue to address later
5. Skip - review later

Important: Do NOT try to interpret or format the scene content. Let the user see it in Remotion Studio - that's the source of truth.

---

Step 4: Handle Review Actions

Approve

• Record as reviewed in project.json
• Proceed to next scene

Edit

Ask what needs to change:

• "What needs editing? (headline text, duration, asset path, etc.)"
• Open the config file
• Make the edit
• Remotion Studio hot-reloads automatically
• "Check Remotion Studio - does it look right now?"
• If yes, approve. If no, continue editing.

Refine (frontend-design skill)

For visual/aesthetic improvements beyond config changes:

1. Invoke the frontend-design skill
2. Read the slide component (e.g., src/components/slides/TitleSlide.tsx)
3. Also read adjacent scenes to understand the visual narrative arc
4. Work with user iteratively on:
   • Color palette and mood
   • Typography and text animations
   • Background effects and atmosphere
   • Motion and timing
   • Visual coherence with surrounding scenes
5. Apply changes to the component file
6. User verifies in Remotion Studio (hot-reloads)
7. Continue refining or approve when satisfied

When to suggest Refine:

• Slide scenes (title, problem, solution, stats, cta) that feel generic
• When user says something "doesn't feel right" or wants more impact
• When visual contrast between scenes needs work
• When animations feel too basic or too busy

Flag

Record an issue without blocking:

{
  "reviewIssues": [
    { "scene": N, "note": "user's description of issue" }
  ]
}

Proceed to next scene.

Skip

• Don't mark as reviewed
• Can return later
• Proceed to next scene

---

Step 5: Timing Summary

After reviewing all scenes, show totals:

## Timing Summary

| # | Type | Duration | Ends At |
|---|------