# Walkthrough Versions — Comparison Notes

**Date:** February 27–28, 2026
**Source:** CleanShot X screen recording (4:33, 150MB MOV)
**Versions:** V1 (walkthrough.html), V2, V3, V4

---

## 1. Visual Design & Anchors

| Element | V1 | V2 | V3 | V4 |
|---|---|---|---|---|
| **Theme** | Dark (#0a0a0a) | Dark (#050507) | Dark (#050507) | Dark (#06060a), deeper |
| **Step number style** | Accent square badge | Accent gradient square | Accent gradient square | Large accent gradient square |
| **Hotspots** | None | Single per step, hover-to-reveal label | Multiple per step, visible by default | Multiple per step, always-visible labels, larger |
| **Hotspot animation** | — | Pulse + single ripple ring | Pulse + double ripple | Pulse + ripple + glow halo |
| **Callouts on image** | None | Dark glass panel, accent border | Dark glass panel with pointer | Glassmorphism panel, accent left border, delayed fade-in |
| **Tag pills** | None | Colored per feature (BLUR, SPOTLIGHT, etc.) | Same, persistent | Same, bolder colors |
| **Image treatment** | Static, basic border | Border + subtle hover scale | Border + hover scale | Border + **auto-zoom IN then reveal** (the big change) |
| **Browser chrome** | None | None | macOS title bar (traffic lights + address bar) wraps everything | macOS title bar wraps **only** Interactive Tour |
| **Confetti/celebration** | None | None | None | CSS confetti on outro |

---

## 2. Information Architecture

| Element | V1 | V2 | V3 | V4 |
|---|---|---|---|---|
| **Modes** | Single (tour only) | Single (tour only) | **Dual**: Interactive Tour + Step-by-Step Guide, inside browser frame | **Dual**: Tour (inside browser) + Guide (outside browser, clean doc) |
| **Mode toggle location** | — | — | Inside browser chrome | **Above** browser chrome (top-level control) |
| **Intro screen** | Centered: title, desc, badge, CTA | Same, slightly refined | Same structure, inside browser | **Split layout**: screenshot left (angled, shadowed) + text right (Arcade-style) |
| **Outro screen** | None | None | Checkmark + summary + restart/switch buttons | Animated checkmark + feature chips + restart/switch + confetti |
| **Content per step** | Screenshot + description + narration quote + timestamp | Same + hotspot + callout + zoom button | Same + voiceover player + multiple hotspots | Same + auto-zoom + larger hotspots + persistent labels |
| **Card layout** | Two cards side-by-side: "What's happening" + "Narration" | Same | Same + audio bar below | Same |
| **Guide mode** | None | None | All steps vertical, left color border, screenshot + desc | Same + **hotspot indicators overlaid on guide screenshots** |

---

## 3. Navigation & Pagination

| Element | V1 | V2 | V3 | V4 |
|---|---|---|---|---|
| **Progress indicator** | Clickable dots in header | Same, completed=filled, active=glow | Same, hidden in guide mode | Same, inside tour header bar |
| **Bottom nav** | Fixed bar: Prev/Next + step counter + title | Same + autoplay button + progress bar animation | Same + autoplay toggle switch + mute button | Same, contained within browser chrome area |
| **Keyboard** | Arrow keys + Esc (zoom) | Same + Space (autoplay) | Same + Space (audio play/pause) | Same |
| **Touch** | Swipe left/right | Same | Same | Same |
| **Autoplay behavior** | Fixed 6s timer per step | Fixed 6s timer | **Synced to voiceover** — advances after audio ends | Same — advances after audio ends + 1s delay |
| **Step transitions** | Fade-in + slide up (0.4s) | Same | Same | Same + **auto-zoom animation** (2s hold → 1.2s zoom-out) |

---

## 4. Audio & Voiceover

| Element | V1 | V2 | V3 | V4 |
|---|---|---|---|---|
| **Voiceover** | None | None | 14 ElevenLabs clips (Matilda), auto-play per step | Same |
| **Audio controls** | None | None | Play/pause, progress bar, seek, time display, mute | Same |
| **Audio behavior** | — | — | Plays on step entry (after first interaction) | Same, stops on nav, outro has no audio |

---

## 5. What's Unique to Each Version

| Version | Signature Strength |
|---|---|
| **V1** | Clean simplicity. No clutter. Just steps, images, text. Fastest to scan. |
| **V2** | Best hotspot + callout balance. Hover-to-reveal kept the image clean. Zoom-on-click was intuitive. Single-purpose, no mode confusion. |
| **V3** | Voiceover changed everything. Browser chrome gave it a "product" feel. Dual mode was the first attempt at Tour + Guide in one file. |
| **V4** | Auto-zoom IN is the standout. Split intro is premium. Guide mode with hotspot overlays. Celebrations on completion. Most feature-complete. |

---

## File Reference

| Version | Filename | Size |
|---|---|---|
| V1 | `walkthrough.html` | 1.1MB |
| V2 | `walkthrough-v2.html` | 1.1MB |
| V3 | `walkthrough-v3.html` | 5.2MB |
| V4 | `walkthrough-v4.html` | 5.3MB |

All files in: `/Users/nova/Desktop/Output by AI/Claude Code/walkthrough-output/`
