# Demo Video Shot List

This shot list supports a short crowdfunding update video that shows the integrated Fan Passport demo working end to end.

Target runtime: 90-120 seconds.

## Recording setup

- Browser: Chrome or Safari at 1440px width for desktop shots.
- Optional mobile insert: 390px width responsive viewport.
- Start from a fresh demo session.
- Keep API and web terminals visible only for behind-the-scenes shots.
- Use the guided script in `docs/demo-script.md` for exact actions.

## Shot plan

| Shot | Duration | Visual | Narration point | Success signal |
| --- | ---: | --- | --- | --- |
| 1. Hero load | 5s | App opens to passport dashboard | "This is the Fan Passport: a daily football journey for World Cup 2026." | Dashboard loads without console errors. |
| 2. Passport overview | 8s | Points, badges, challenges, and collection progress | "Fans build a living passport as the tournament unfolds." | Existing demo state and progress cards are visible. |
| 3. Collect item | 10s | Click a team, stadium, match, or sticker collection action | "Every interaction adds to your tournament memory." | Collection count and points increase. |
| 4. Badge unlock | 8s | Badge/challenge feedback appears | "The gamification engine reacts immediately." | Badge or challenge unlock is visible. |
| 5. Trivia answer | 12s | Answer daily trivia | "Fans return each day for quick trivia and rewards." | Correct/incorrect feedback appears; score updates. |
| 6. Prediction | 12s | Submit a match prediction | "Predictions create anticipation before the fixtures." | Prediction confirmation appears. |
| 7. Challenge completion | 8s | Challenge list updates | "Longer challenges encourage fans to complete groups, stadiums, and national team journeys." | Completed challenge state appears. |
| 8. Leaderboard movement | 10s | Open leaderboard after earning points | "Progress feeds a global leaderboard for friendly competition." | Demo user rank or points move. |
| 9. Mobile check | 8s | Narrow viewport shows stacked cards | "The experience is responsive for fans checking in on match day." | Controls remain readable and tappable. |
| 10. QA/release package | 8s | Terminal runs release preflight or shows docs folder | "This milestone also ships the release checklist, QA plan, and deployment guide." | `release-preflight` passes or docs are shown. |
| 11. Future ecosystem | 6s | Return to passport dashboard | "After the World Cup, this can evolve into league and club passports." | Closing dashboard is stable and visually clear. |

## Capture checklist

Before recording:

```bash
node scripts/qa/release-preflight.mjs
```

Then run the app by the standard local setup in `README.md`, or use:

```bash
docker compose -f docker-compose.demo.yml up --build
```

During recording, verify:

- No unhandled browser console errors.
- Loading states resolve before clicking.
- Buttons have visible focus states if keyboard navigation is shown.
- Collection, trivia, prediction, badge, challenge, and leaderboard moments are captured.
- Any incorrect-answer trivia moment is framed positively as handled feedback, not a failure.

## Suggested narration

> "Fan Passport turns the World Cup into a daily digital collecting journey. Fans collect teams, stadiums, matches, and stickers; answer trivia; submit predictions; unlock badges; complete challenges; and climb the leaderboard. This milestone connects the frontend and backend into a working full-stack demo, with QA scripts, release documentation, and deployment guidance ready for public review."

## Export settings

- Resolution: 1920x1080 for the main update video.
- Format: MP4/H.264.
- Captions: include captions or a transcript for accessibility.
- File naming: `fan-passport-demo-release-YYYY-MM-DD.mp4`.