docs/recording_guide.md

Screen Recording and Video Guide (DOC 06, DOC 07, OBS 08)

---

Screenshots to Capture (OBS 08)

Save all screenshots to docs/screenshots/. Use PNG format at 1920x1080 or higher.

Required Screenshots

1. hf-space.png -- HF Space landing page
2. dashboard-hero.png -- Dashboard with 3D molecule background, three characters, and "Run Episode" button
3. dashboard-cast.png -- "Meet the Cast" section with the three tilt cards
4. episode-negotiation.png -- Active episode showing CharacterStage + negotiation log with at least 2 messages
5. episode-judge.png -- Judge character center-stage during the judging phase
6. episode-scores.png -- Complete episode with score card, Judge audit panel, and replay viewer
7. training-results.png -- Training Results panel with both baseline and trained lines visible
8. replay-viewer.png -- Replay viewer with the scrubber at a mid-episode position

Optional GIFs

• character-tilt.gif -- Mouse hovering over a role card showing the 3D tilt effect
• judge-entrance.gif -- Judge dropping into center-stage with the scoring animation
• negotiation-flow.gif -- Messages sliding into the negotiation log

Tool recommendation: Use ShareX (Windows), CleanShot (Mac), or the browser DevTools screenshot tool.

---

Screen Recording (DOC 06)

Setup

1. Resolution: 1920x1080 (or 2560x1440 if Retina, then scale down in edit)
2. Browser: Chrome or Edge, no bookmarks bar, clean profile
3. Frontend: Running at http://localhost:5175/
4. Backend: Running at http://localhost:7860/ or use the HF Space
5. Audio: Enable system audio to capture the built-in sound effects

Recording Tool

• OBS Studio (free, all platforms) -- best for high quality
• Loom -- quick and easy, auto-uploads
• Windows Game Bar (Win+G) -- built-in, no install needed

Clips to Record

Follow the demo script in docs/demo_script.md. Record each scene as a separate clip:

Clip	Duration	Content
clip1-hook.mp4	8s	Dashboard hero with molecules, slow scroll
clip2-cast.mp4	8s	Hover over tilt cards, show character names
clip3-start.mp4	8s	Select ML Benchmark, click Start
clip4-negotiate.mp4	14s	Watch negotiation log fill, scroll through messages
clip5-judge.mp4	10s	Click Step, judge entrance, gavel, score reveal
clip6-training.mp4	8s	Training Results, toggle baseline/trained
clip7-close.mp4	4s	Return to dashboard, show URL

Save raw clips to docs/video/ (gitignored).

---

Final Video Edit (DOC 07)

Editing

1. Import all clips into a video editor (DaVinci Resolve free, CapCut, or iMovie)
2. Trim to fit the 60-second target
3. Add captions from the demo script narration lines
4. Add a title card: "ReplicaLab -- OpenEnv Hackathon"
5. Add an end card with the GitHub URL and HF Space link
6. Export at 1080p, H.264, 30fps

Upload

1. Upload to YouTube as Unlisted
2. Title: ReplicaLab - Multi-Agent Scientific Replication Environment | OpenEnv Hackathon
3. Description: Include the GitHub repo URL and HF Space link
4. Copy the YouTube URL for the submission form

Checklist

• Video is under 60 seconds
• Captions are readable
• Audio (sound effects) is audible but not overpowering
• All key scenes are covered: hook, cast, episode, judge, training, close
• YouTube link is accessible (unlisted, not private)
• Link is added to the submission form