Hero demo v3 — onboarding + customization tour (final scenario)

CRITICAL: browser viewport fix (root cause of the "mobile version" bug)

The v2 browser was launched --force-device-scale-factor=1.4 at window width 1120 → CSS viewport ≈ 800px → tripped the template's max-width: 1023px mobile breakpoint (hamburgers, collapsed nav). The default template breakpoints (assets/defaulttemplate/src/index.scss:888):

• ≥1280px viewport → full 3-column desktop layout, both sidebars inline, zero hamburgers.
• 1024–1279px → left sidebar inline, right sidebar becomes a drawer (a right hamburger appears).
• <1024px → both sidebars drawers, both hamburgers (the v2 bug).

v3 target: browser CSS viewport ~1300px (document.documentElement.clientWidth ≥ 1290, safely over the 1280 line so the sidebar beat shows both sidebars inline). Achieve by lowering DSF + widening the window:

• Recommend --force-device-scale-factor=1.1 with chromium window width ≈ 1430 OS-px (1300 × 1.1). Verify over CDP that document.documentElement.clientWidth >= 1290 on the homepage and that no .site-header__hamburger is visible; nudge window width if the scrollbar shifts it.
• Rebalance the stage so the wider browser fits without overlapping Obsidian, and reduce the inter-window padding (user ask). Proposed coords.json geometry (validate + screenshot after reset):
  • obsidian: x20, y60, w1068, h1010 (ends 1088)
  • chromium: x1108, y60, w1430, h1010 (ends 2538) — 20px gap
• In post.py, tighten the macOS-frame gap/padding to match the new geometry so the two framed windows sit closer and the browser reads wider.

Consequence: every browser beat looks different at 1300 vs 800 (desktop nav, wider content) → all browser footage is re-recorded. Obsidian footage geometry also shifts (narrower) → re-record Obsidian beats too. This is a near-full re-record; apply the speed levers below.

Beat sheet (~115s)

Concrete on-camera file contents (pre-stage in starter-pack where noted)

---
title: Navigation
free: true
---

- [Home](/)
- [About](/about)
- [Deep Work](/deep-work)

# Deep Work

## What it is
Focused, undistracted work on a cognitively demanding task.

## Why it matters
It compounds. The ability to focus is getting rarer and more valuable.

## How I practice it
Time-blocked mornings, phone in another room. See [[About]].

---
title: Deep Work
left_sidebar:
  - TOC
  - inlinks
right_sidebar:
  - outlinks
---

{{ defaultTemplate.Styles() }}
<main style="max-width:640px;margin:3rem auto;padding:0 1rem;font-family:Georgia,'Times New Roman',serif;font-size:20px;line-height:1.7">
  {{ defaultTemplate.Header() }}
  <h1>{{ note.Title }}</h1>
  {{ note.HTMLString() | unsafe }}
  {{ defaultTemplate.Footer() }}
</main>

VO script (model eleven_v3, sparse tags)

[0–8] [calm] This is trip2g. It turns your Obsidian vault into a website. You host it yourself laptop, or a server.
[8–14] It's up. Open it in the browser and sign in as admin.
[14–24] There's a starter vault you can download. It's a normal Obsidian vault, and the sync plugin's already inside.
[24–32] Open it in Obsidian. The plugin's right there, enabled. Nothing to install.
[32–42] Edit the home page and hit save. The plugin pushes it automatically and the site updates right there.
[42–56] New pages work the same way. Link to a page that doesn't exist, click it, Obsidian creates the note. Write, save and it's on the site.
[56–66] Your navigation is just a note. Edit _header, list your links, save there's your header.
[66–78] Want a sidebar? One line of frontmatter — a table of contents, backlinks and the page grows one.
[78–90] And the whole look is yours. Drop an HTML layout in the vault, point a note at it and it renders your way.
[90–102] Keep going and it turns into a digital garden. And this docs site? Runs on trip2g too.
[102–115] Publish with the plugin, push from the CLI, or connect your agent through the API. More at trip2g.com [warm] and a star on GitHub helps.

Speed levers for this re-record (from 2026-07-03_recording_session_timeprofile.md)

The scripted reset (reset-stage.sh + starter-pack/) and coords.json already exist — USE them, don't re-derive. Specific to this run:

1. Update coords.json for the new geometry FIRST, validate with one screenshot, then record — don't blind-click.
2. Pre-stage the new files (Deep Work.md body, _layouts/custom/index.html, and a garden note or two) into starter-pack/ so they're present after reset; only the edits (header links, sidebar frontmatter, layout: line) happen on camera.
3. Write edits to disk, don't type markdown — avoids the Obsidian list-autocomplete / [[-popup retake class. For frontmatter, writing the file + letting the plugin push is cleanest; use xdotool only for the visible cursor/save moment.
4. Only re-record what changed: keep run-all.sh's per-segment structure; add segments for header/sidebar/template; re-shoot the browser+obsidian segments at the new geometry. Reuse VO per-beat mp3s (only new beats need generation).
5. Keep content (VO, endcard, post.py) as committed scripts so a timing tweak doesn't re-trigger takes.