# SuperLinkedIn product demo video

We cannot generate `.mp4` files in the repo. Use the auto-play page and record it locally (same workflow as most SaaS Loom-style promos).

## 1. Open the recorder page

```text
https://www.superlinkedin.org/demo-video.html
```

Or locally after `npm start`:

```text
http://localhost:PORT/demo-video.html
```

## 2. Record (recommended settings)

| Setting | Value |
|--------|--------|
| Resolution | **1920×1080** |
| Frame rate | 30 fps |
| Duration | ~35 s (7 slides × 5 s) or record 2 loops (~70 s) |
| Audio | Optional voiceover (script below) |

**Tools:** OBS Studio, Loom, Camtasia, or Windows Game Bar (`Win` + `G`).

**Tips:**

- Hide the gray hint text and bottom control buttons by cropping in post, or press `F11` fullscreen on the black stage only.
- Use a clean browser profile (no bookmarks bar).
- Export as **H.264 MP4**, under ~15 MB for web if possible.

## 3. Host the file

Place the export in the project (optional):

```text
superlinkedin.org/assets/superlinkedin-demo.mp4
```

Then wire it on the homepage `#demo` section (see `index.html` video tag) or upload to YouTube/Vimeo and embed.

## 4. Voiceover script (optional)

| Time | On screen | Say |
|------|-----------|-----|
| 0–5s | Intro | "SuperLinkedIn is your AI copilot for LinkedIn." |
| 5–10s | AI Writer | "Draft posts in your voice, then queue or schedule in one click." |
| 10–15s | Viral Library | "Browse five hundred plus viral templates when you need inspiration." |
| 15–20s | Queue | "Line up your week and post at the times that matter." |
| 20–25s | Analytics | "Track followers and impressions with the Chrome extension." |
| 25–30s | Extension | "Work in LinkedIn and the web app together." |
| 30–35s | CTA | "Start your free trial at superlinkedin.org." |

## 5. Match your reference video

If your reference (`9UwpFPlX2YhSJ1FSCMUeDagMypw.mp4`) uses a different pace or scenes, adjust in `demo-video.html`:

- `INTERVAL_MS` — slide duration (default `5000`)
- `SLIDES` / HTML slides — add or reorder scenes
- Caption text in the `SLIDES` array

Share the reference structure (hook length, music, captions style) if you want the HTML demo aligned shot-for-shot.