docs(demo): more realistic scroll, dismiss and plan interactions

Intervene scene: multi-scroll through expanded 13-item plan with
sub-descriptions, real Claude Code prompt format, ↓ to select
"bypass permissions" then ⏎ to accept. Phase duration 135→195f.

AITools scene: both popups dismissed by tapping q toolbar button
(realistic tmux behaviour) before reopening drawer. Critique diff
extended with more auth.ts + security.ts content for meaningful scroll.

Author: connorads

demo/src/DemoVideo.tsx

@@ -21,26 +21,26 @@ import { colours } from './theme'
 export const FPS = 30
 export const TRANSITION_FRAMES = 20
 /** Phase durations in frames — desktop intro, then persistent phone with content switches */
-const PHASE = [75, 45, 120, 135, 280] as const
+const PHASE = [75, 45, 120, 195, 280] as const
 const PHASE_START = [
 	0,
 	PHASE[0],
 	PHASE[0] + PHASE[1],
 	PHASE[0] + PHASE[1] + PHASE[2],
 	PHASE[0] + PHASE[1] + PHASE[2] + PHASE[3],
 ] as const
-const PHONE_TOTAL = PHASE[0] + PHASE[1] + PHASE[2] + PHASE[3] + PHASE[4] // 470
+const PHONE_TOTAL = PHASE[0] + PHASE[1] + PHASE[2] + PHASE[3] + PHASE[4]
 
 // Guard against silent arithmetic drift when phase durations change
-if (PHONE_TOTAL !== 655) {
-	throw new Error(`PHONE_TOTAL is ${PHONE_TOTAL}, expected 655 — update PHASE or this assertion`)
+if (PHONE_TOTAL !== 715) {
+	throw new Error(`PHONE_TOTAL is ${PHONE_TOTAL}, expected 715 — update PHASE or this assertion`)
 }
 
 const INTRO_DURATION = 75
 const TAGLINE_DURATION = 70
 
 /** Total frames: intro + phone section + tagline - two fade overlaps */
-export const TOTAL_FRAMES = INTRO_DURATION + PHONE_TOTAL + TAGLINE_DURATION - 2 * TRANSITION_FRAMES // 760
+export const TOTAL_FRAMES = INTRO_DURATION + PHONE_TOTAL + TAGLINE_DURATION - 2 * TRANSITION_FRAMES
 
 /**
  * Main composition (~25s): intro branding → desktop → phone → interactions → tagline.
@@ -56,7 +56,7 @@ export const TOTAL_FRAMES = INTRO_DURATION + PHONE_TOTAL + TAGLINE_DURATION - 2
  * | 1: Desktop  | 2.5s (75f)     | Full-bleed terminal + macOS   |
  * | 2: Handoff  | 1.5s (45f)     | Phone materialises around it  |
  * | 3: Swipe    | 4.0s (120f)    | Claude → OpenCode → Claude    |
- * | 4: Intervene| 4.5s (135f)    | Scroll + approve plan         |
+ * | 4: Intervene| 6.5s (195f)    | Multi-scroll + approve plan   |
  * | 5: Drawer   | 9.3s (280f)    | Drawer → AI Usage → Critique  |
  * | [fade]      |                |                               |
  * | 6: Tagline  | 2.3s (70f)     | "Your terminal. Everywhere."  |

demo/src/layout.ts

@@ -11,8 +11,15 @@ export const TOUCH = {
 	scrollStart: [195, 500] as const,
 	/** Horizontal centre, upper-mid — scroll gesture end */
 	scrollEnd: [195, 350] as const,
+	/** Second scroll — slight X offset for realism */
+	scrollUp2Start: [200, 510] as const,
+	scrollUp2End: [200, 360] as const,
+	/** ↓ button on toolbar (row 1, index 6) */
+	toolbarDown: [252, 715] as const,
 	/** Enter button on toolbar (row 1, rightmost) */
-	toolbarEnter: [350, 775] as const,
+	toolbarEnter: [365, 715] as const,
+	/** q button on toolbar (row 2, leftmost) */
+	toolbarQ: [30, 775] as const,
 	/** "More" button on toolbar (row 2) */
 	toolbarMore: [175, 775] as const,
 	/** Centre of remobi app icon on home screen */

demo/src/scenes/AITools.tsx

@@ -19,8 +19,8 @@ import {
  * Scene 4: DRAWER + POPUPS — the payoff (280f)
  *
  * After the agent starts implementing, the user pulls up the drawer to
- * check AI usage stats, then views the git diff via critique. Completes
- * the narrative: see work → approve → monitor → review results.
+ * check AI usage stats, then views the git diff via critique. Both popups
+ * are dismissed by tapping the `q` toolbar button (realistic tmux behaviour).
  *
  * Timeline:
  * 0-25:     Terminal stagger (static carry-over + new content)
@@ -30,31 +30,37 @@ import {
  * 48:       Tap "AI Usage" (highlight)
  * 52:       Drawer #1 closes
  * 56:       AI Usage popup opens
- * 56-110:   View AI usage (~1.8s)
- * 110:      AI Usage popup closes
- * 120:      Tap ☰ More again
- * 128:      Drawer #2 opens
- * 128-143:  Dwell on drawer
- * 143:      Tap "Critique" (highlight)
- * 147:      Drawer #2 closes
- * 151:      Critique popup opens
- * 151-195:  View diff (static)
- * 195-225:  Scroll gesture on diff (scrollOffset 0→60px)
- * 225-245:  Hold after scroll
- * 245:      Critique popup closes
- * 250-280:  Hold for transition to tagline
+ * 56-98:    View AI usage (~1.4s)
+ * 98:       Tap q (highlight q, TapFinger)
+ * 102:      AI Usage popup closes
+ * 110:      Tap ☰ More again
+ * 118:      Drawer #2 opens
+ * 118-133:  Dwell on drawer
+ * 133:      Tap "Critique" (highlight)
+ * 137:      Drawer #2 closes
+ * 141:      Critique popup opens
+ * 141-183:  View diff (static)
+ * 183-213:  Scroll gesture on diff (scrollOffset 0→120px)
+ * 213-230:  Hold after scroll
+ * 230:      Tap q (highlight q, TapFinger)
+ * 234:      Critique popup closes
+ * 240-280:  Hold for transition to tagline
  */
 export const AITools: React.FC = () => {
 	const frame = useCurrentFrame()
 
-	// ── Toolbar highlights ──
-	const toolbarHighlight1 = frame >= 25 && frame < 29 ? '\u2630 More' : undefined
-	const toolbarHighlight2 = frame >= 120 && frame < 124 ? '\u2630 More' : undefined
-	const toolbarHighlight = toolbarHighlight1 ?? toolbarHighlight2
-	const toolbarHighlightAt = toolbarHighlight1 ? 25 : toolbarHighlight2 ? 120 : 0
+	// ── Toolbar highlights (☰ More x2 + q x2) ──
+	const getToolbarHighlight = (): { button: string; at: number } | undefined => {
+		if (frame >= 25 && frame < 29) return { button: '\u2630 More', at: 25 }
+		if (frame >= 98 && frame < 102) return { button: 'q', at: 98 }
+		if (frame >= 110 && frame < 114) return { button: '\u2630 More', at: 110 }
+		if (frame >= 230 && frame < 234) return { button: 'q', at: 230 }
+		return undefined
+	}
+	const highlight = getToolbarHighlight()
 
 	// ── Critique scroll ──
-	const critiqueScroll = interpolate(frame, [195, 225], [0, 60], {
+	const critiqueScroll = interpolate(frame, [183, 213], [0, 120], {
 		extrapolateLeft: 'clamp',
 		extrapolateRight: 'clamp',
 	})
@@ -64,7 +70,7 @@ export const AITools: React.FC = () => {
 			<AgentHeader agent="claude" />
 			<Terminal screen={claudeCodeDenseScreen} />
 			<TmuxStatusBar {...claudeCodeDenseStatus} />
-			<RemobiToolbar highlightButton={toolbarHighlight} highlightAt={toolbarHighlightAt} />
+			<RemobiToolbar highlightButton={highlight?.button} highlightAt={highlight?.at ?? 0} />
 
 			{/* ── Drawer #1: AI Usage ── */}
 			<TapFinger tapFrame={25} position={TOUCH.toolbarMore} />
@@ -77,33 +83,39 @@ export const AITools: React.FC = () => {
 			<TapFinger tapFrame={48} position={TOUCH.drawerAIUsage} />
 
 			{/* ── AI Usage popup ── */}
-			<TmuxPopup showFrame={56} hideFrame={110} title="AI Usage">
+			<TmuxPopup showFrame={56} hideFrame={102} title="AI Usage">
 				<Terminal screen={aiUsageScreen} fontSize={12} padding={4} background="transparent" />
 			</TmuxPopup>
 
+			{/* Tap q to close AI Usage popup */}
+			<TapFinger tapFrame={98} position={TOUCH.toolbarQ} />
+
 			{/* ── Drawer #2: Critique ── */}
-			<TapFinger tapFrame={120} position={TOUCH.toolbarMore} />
+			<TapFinger tapFrame={110} position={TOUCH.toolbarMore} />
 			<DrawerOverlay
-				showFrame={128}
-				hideFrame={147}
+				showFrame={118}
+				hideFrame={137}
 				highlightButton="Critique"
-				highlightAt={143}
+				highlightAt={133}
 			/>
-			<TapFinger tapFrame={143} position={TOUCH.drawerCritique} />
+			<TapFinger tapFrame={133} position={TOUCH.drawerCritique} />
 
 			{/* ── Critique diff popup ── */}
-			<TmuxPopup showFrame={151} hideFrame={245} title="critique" scrollOffset={critiqueScroll}>
+			<TmuxPopup showFrame={141} hideFrame={234} title="critique" scrollOffset={critiqueScroll}>
 				<Terminal screen={critiqueDiffScreen} fontSize={11} padding={4} background="transparent" />
 			</TmuxPopup>
 
 			{/* Scroll gesture on critique popup */}
 			<TouchFinger
-				startFrame={190}
-				endFrame={225}
+				startFrame={178}
+				endFrame={213}
 				from={[195, 450]}
-				to={[195, 350]}
+				to={[195, 330]}
 				holdFrames={5}
 			/>
+
+			{/* Tap q to close critique popup */}
+			<TapFinger tapFrame={230} position={TOUCH.toolbarQ} />
 		</>
 	)
 }

demo/src/scenes/Intervene.tsx

@@ -9,60 +9,91 @@ import { TOUCH } from '../layout'
 import {
 	claudeCodeAcceptedScreen,
 	claudeCodePlanScreen,
+	claudeCodePlanScreen2,
 	claudeCodePlanStatus,
 } from '../screens'
 
 /**
  * Scene 3: THE INTERVENTION — proves you can control, not just monitor.
- * User scrolls through Claude's plan on phone, then taps to approve.
+ * User scrolls down through a long plan to review it, then selects
+ * option 2 ("Yes, and bypass permissions") with ↓ and ⏎.
  *
- * Timeline (145f):
- * 0-5:     Claude Code terminal with plan visible (top portion)
- * 5-10:    Touch finger appears mid-screen
- * 10-40:   Finger drags upward (scroll gesture), scrollOffset 0→120px
- * 40-60:   Hold — viewer reads the full plan + "exit plan mode" prompt
- * 60-70:   Tap finger on ⏎ Enter (toolbar)
- * 70-80:   Terminal switches to accepted screen
- * 80-120:  Checkmarks stagger in
- * 120-145: Hold for transition
+ * Timeline (195f / 6.5s):
+ * 0-5:     Plan visible, top portion
+ * 5-28:    First scroll gesture (scrollOffset 0→150)
+ * 33-55:   Second scroll gesture (scrollOffset 150→280)
+ * 55-95:   Pause — reader reviews plan + prompt options
+ * 98:      Tap ↓ (move cursor to option 2)
+ * 112:     Tap ⏎ Enter to accept
+ * 125:     ACCEPT_FRAME — switch screen
+ * 125-175: Checkmarks stagger in
+ * 175-195: Hold for transition
  */
 export const Intervene: React.FC = () => {
 	const frame = useCurrentFrame()
 
-	// Scroll: finger drags upward frames 10-40, scrollOffset 0→120px
-	const scrollOffset = interpolate(frame, [10, 40], [0, 120], {
+	// Additive scrollOffset: two scroll gestures, content moves up
+	const scroll1 = interpolate(frame, [10, 28], [0, 150], {
 		extrapolateLeft: 'clamp',
 		extrapolateRight: 'clamp',
 	})
+	const scroll2 = interpolate(frame, [38, 55], [0, 170], {
+		extrapolateLeft: 'clamp',
+		extrapolateRight: 'clamp',
+	})
+	const scrollOffset = scroll1 + scroll2
+
+	const DOWN_FRAME = 98
+	const ACCEPT_FRAME = 125
+
+	// Switch plan screen to show cursor on option 2 after ↓ press
+	const planScreen = frame >= DOWN_FRAME ? claudeCodePlanScreen2 : claudeCodePlanScreen
 
-	// Switch to accepted screen at frame 70 — use Sequence to reset
-	// useCurrentFrame() so the accepted screen's appearAt staggers work
-	const ACCEPT_FRAME = 70
+	// Toolbar highlights: ↓ then ⏎
+	const highlightButton =
+		frame >= 98 && frame < 102
+			? '\u2193'
+			: frame >= 112 && frame < 116
+				? '\u23CE'
+				: undefined
+	const highlightAt = frame >= 112 && frame < 116 ? 112 : 98
 
 	return (
 		<>
 			<AgentHeader agent="claude" />
 			{frame < ACCEPT_FRAME ? (
-				<Terminal screen={claudeCodePlanScreen} scrollOffset={scrollOffset} />
+				<Terminal screen={planScreen} scrollOffset={scrollOffset} />
 			) : (
 				<Sequence from={ACCEPT_FRAME} layout="none">
 					<Terminal screen={claudeCodeAcceptedScreen} />
 				</Sequence>
 			)}
 			<TmuxStatusBar {...claudeCodePlanStatus} />
-			<RemobiToolbar />
+			<RemobiToolbar highlightButton={highlightButton} highlightAt={highlightAt} />
 
-			{/* Scroll gesture: finger drags upward */}
+			{/* First scroll gesture */}
 			<TouchFinger
 				startFrame={5}
-				endFrame={40}
+				endFrame={28}
 				from={TOUCH.scrollStart}
 				to={TOUCH.scrollEnd}
 				holdFrames={5}
 			/>
 
-			{/* Tap ⏎ Enter to approve */}
-			<TapFinger tapFrame={60} position={TOUCH.toolbarEnter} />
+			{/* Second scroll gesture — slight X offset for realism */}
+			<TouchFinger
+				startFrame={33}
+				endFrame={55}
+				from={TOUCH.scrollUp2Start}
+				to={TOUCH.scrollUp2End}
+				holdFrames={5}
+			/>
+
+			{/* Tap ↓ to move cursor to option 2 */}
+			<TapFinger tapFrame={98} position={TOUCH.toolbarDown} />
+
+			{/* Tap ⏎ Enter to accept */}
+			<TapFinger tapFrame={112} position={TOUCH.toolbarEnter} />
 		</>
 	)
 }