docs(demo): slow down button presses for viewer readability

Redistribute timing in Intervene and AITools scenes — less idle
staring, more breathing room around each tap.

Intervene: shorten dead pause (43f→18f), widen ↓/⏎ gap (14f→20f).
AITools: increase drawer dwell (15f→25f), widen popup-close→next-action
gaps. PHASE[4] 280→320 (+40f) to accommodate.

Author: connorads

demo/src/DemoVideo.tsx

@@ -21,7 +21,7 @@ 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, 195, 280] as const
+const PHASE = [75, 45, 120, 195, 320] as const
 const PHASE_START = [
 	0,
 	PHASE[0],
@@ -32,8 +32,8 @@ const PHASE_START = [
 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 !== 715) {
-	throw new Error(`PHONE_TOTAL is ${PHONE_TOTAL}, expected 715 — update PHASE or this assertion`)
+if (PHONE_TOTAL !== 755) {
+	throw new Error(`PHONE_TOTAL is ${PHONE_TOTAL}, expected 755 — update PHASE or this assertion`)
 }
 
 const INTRO_DURATION = 75
@@ -57,7 +57,7 @@ export const TOTAL_FRAMES = INTRO_DURATION + PHONE_TOTAL + TAGLINE_DURATION - 2
  * | 2: Handoff  | 1.5s (45f)     | Phone materialises around it  |
  * | 3: Swipe    | 4.0s (120f)    | Claude → OpenCode → Claude    |
  * | 4: Intervene| 6.5s (195f)    | Multi-scroll + approve plan   |
- * | 5: Drawer   | 9.3s (280f)    | Drawer → AI Usage → Critique  |
+ * | 5: Drawer   | 10.7s (320f)   | Drawer → AI Usage → Critique  |
  * | [fade]      |                |                               |
  * | 6: Tagline  | 2.3s (70f)     | "Your terminal. Everywhere."  |
  */

demo/src/scenes/AITools.tsx

@@ -16,7 +16,7 @@ import {
 } from '../screens'
 
 /**
- * Scene 4: DRAWER + POPUPS — the payoff (280f)
+ * Scene 4: DRAWER + POPUPS — the payoff (320f)
  *
  * After the agent starts implementing, the user pulls up the drawer to
  * check AI usage stats, then views the git diff via critique. Both popups
@@ -25,42 +25,42 @@ import {
  * Timeline:
  * 0-25:     Terminal stagger (static carry-over + new content)
  * 25:       Tap ☰ More
- * 33:       Drawer #1 opens
- * 33-48:    Dwell — viewer reads drawer grid
- * 48:       Tap "AI Usage" (highlight)
- * 52:       Drawer #1 closes
- * 56:       AI Usage popup opens
- * 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
+ * 35:       Drawer #1 opens
+ * 35-60:    Dwell — viewer reads drawer grid (25f)
+ * 60:       Tap "AI Usage" (highlight)
+ * 66:       Drawer #1 closes
+ * 72:       AI Usage popup opens
+ * 72-118:   View AI usage (~1.5s)
+ * 118:      Tap q (highlight q, TapFinger)
+ * 122:      AI Usage popup closes
+ * 135:      Tap ☰ More again (13f gap after close)
+ * 145:      Drawer #2 opens
+ * 145-170:  Dwell on drawer (25f)
+ * 170:      Tap "Critique" (highlight)
+ * 176:      Drawer #2 closes
+ * 182:      Critique popup opens
+ * 182-218:  View diff (static)
+ * 218-248:  Scroll gesture on diff (scrollOffset 0→120px)
+ * 248-265:  Hold after scroll
+ * 265:      Tap q (highlight q, TapFinger)
+ * 269:      Critique popup closes
+ * 275-320:  Hold for transition to tagline
  */
 export const AITools: React.FC = () => {
 	const frame = useCurrentFrame()
 
 	// ── 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 }
+		if (frame >= 118 && frame < 122) return { button: 'q', at: 118 }
+		if (frame >= 135 && frame < 139) return { button: '\u2630 More', at: 135 }
+		if (frame >= 265 && frame < 269) return { button: 'q', at: 265 }
 		return undefined
 	}
 	const highlight = getToolbarHighlight()
 
 	// ── Critique scroll ──
-	const critiqueScroll = interpolate(frame, [183, 213], [0, 120], {
+	const critiqueScroll = interpolate(frame, [218, 248], [0, 120], {
 		extrapolateLeft: 'clamp',
 		extrapolateRight: 'clamp',
 	})
@@ -75,47 +75,47 @@ export const AITools: React.FC = () => {
 			{/* ── Drawer #1: AI Usage ── */}
 			<TapFinger tapFrame={25} position={TOUCH.toolbarMore} />
 			<DrawerOverlay
-				showFrame={33}
-				hideFrame={52}
+				showFrame={35}
+				hideFrame={66}
 				highlightButton="AI Usage"
-				highlightAt={48}
+				highlightAt={60}
 			/>
-			<TapFinger tapFrame={48} position={TOUCH.drawerAIUsage} />
+			<TapFinger tapFrame={60} position={TOUCH.drawerAIUsage} />
 
 			{/* ── AI Usage popup ── */}
-			<TmuxPopup showFrame={56} hideFrame={102} title="AI Usage">
+			<TmuxPopup showFrame={72} hideFrame={122} 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} />
+			<TapFinger tapFrame={118} position={TOUCH.toolbarQ} />
 
 			{/* ── Drawer #2: Critique ── */}
-			<TapFinger tapFrame={110} position={TOUCH.toolbarMore} />
+			<TapFinger tapFrame={135} position={TOUCH.toolbarMore} />
 			<DrawerOverlay
-				showFrame={118}
-				hideFrame={137}
+				showFrame={145}
+				hideFrame={176}
 				highlightButton="Critique"
-				highlightAt={133}
+				highlightAt={170}
 			/>
-			<TapFinger tapFrame={133} position={TOUCH.drawerCritique} />
+			<TapFinger tapFrame={170} position={TOUCH.drawerCritique} />
 
 			{/* ── Critique diff popup ── */}
-			<TmuxPopup showFrame={141} hideFrame={234} title="critique" scrollOffset={critiqueScroll}>
+			<TmuxPopup showFrame={182} hideFrame={269} title="critique" scrollOffset={critiqueScroll}>
 				<Terminal screen={critiqueDiffScreen} fontSize={11} padding={4} background="transparent" />
 			</TmuxPopup>
 
 			{/* Scroll gesture on critique popup */}
 			<TouchFinger
-				startFrame={178}
-				endFrame={213}
+				startFrame={213}
+				endFrame={248}
 				from={[195, 450]}
 				to={[195, 330]}
 				holdFrames={5}
 			/>
 
 			{/* Tap q to close critique popup */}
-			<TapFinger tapFrame={230} position={TOUCH.toolbarQ} />
+			<TapFinger tapFrame={265} position={TOUCH.toolbarQ} />
 		</>
 	)
 }

demo/src/scenes/Intervene.tsx

@@ -20,43 +20,43 @@ import {
  *
  * 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
+ * 5-30:    First scroll gesture (scrollOffset 0→150)
+ * 35-60:   Second scroll gesture (scrollOffset 150→170)
+ * 60-78:   Pause — reader reviews plan + prompt options
+ * 80:      Tap ↓ (move cursor to option 2)
+ * 100:     Tap ⏎ Enter to accept (20f gap)
+ * 115:     ACCEPT_FRAME — switch screen
+ * 115-170: Checkmarks stagger in
+ * 170-195: Hold for transition
  */
 export const Intervene: React.FC = () => {
 	const frame = useCurrentFrame()
 
 	// Additive scrollOffset: two scroll gestures, content moves up
-	const scroll1 = interpolate(frame, [10, 28], [0, 150], {
+	const scroll1 = interpolate(frame, [10, 30], [0, 150], {
 		extrapolateLeft: 'clamp',
 		extrapolateRight: 'clamp',
 	})
-	const scroll2 = interpolate(frame, [38, 55], [0, 170], {
+	const scroll2 = interpolate(frame, [40, 60], [0, 170], {
 		extrapolateLeft: 'clamp',
 		extrapolateRight: 'clamp',
 	})
 	const scrollOffset = scroll1 + scroll2
 
-	const DOWN_FRAME = 98
-	const ACCEPT_FRAME = 125
+	const DOWN_FRAME = 80
+	const ACCEPT_FRAME = 115
 
 	// Switch plan screen to show cursor on option 2 after ↓ press
 	const planScreen = frame >= DOWN_FRAME ? claudeCodePlanScreen2 : claudeCodePlanScreen
 
 	// Toolbar highlights: ↓ then ⏎
 	const highlightButton =
-		frame >= 98 && frame < 102
+		frame >= 80 && frame < 84
 			? '\u2193'
-			: frame >= 112 && frame < 116
+			: frame >= 100 && frame < 104
 				? '\u23CE'
 				: undefined
-	const highlightAt = frame >= 112 && frame < 116 ? 112 : 98
+	const highlightAt = frame >= 100 && frame < 104 ? 100 : 80
 
 	return (
 		<>
@@ -74,26 +74,26 @@ export const Intervene: React.FC = () => {
 			{/* First scroll gesture */}
 			<TouchFinger
 				startFrame={5}
-				endFrame={28}
+				endFrame={30}
 				from={TOUCH.scrollStart}
 				to={TOUCH.scrollEnd}
 				holdFrames={5}
 			/>
 
 			{/* Second scroll gesture — slight X offset for realism */}
 			<TouchFinger
-				startFrame={33}
-				endFrame={55}
+				startFrame={35}
+				endFrame={60}
 				from={TOUCH.scrollUp2Start}
 				to={TOUCH.scrollUp2End}
 				holdFrames={5}
 			/>
 
 			{/* Tap ↓ to move cursor to option 2 */}
-			<TapFinger tapFrame={98} position={TOUCH.toolbarDown} />
+			<TapFinger tapFrame={80} position={TOUCH.toolbarDown} />
 
 			{/* Tap ⏎ Enter to accept */}
-			<TapFinger tapFrame={112} position={TOUCH.toolbarEnter} />
+			<TapFinger tapFrame={100} position={TOUCH.toolbarEnter} />
 		</>
 	)
 }