More FE changes

video/src/storyboard.ts

@@ -0,0 +1,170 @@
+import {
+  AI_ZOOM_SCALE,
+  BRAND_NAME,
+  BRAND_TAGLINE,
+  BRAND_URL,
+  PROMPT_TEXT,
+  TT_CARD_SELECTOR,
+  TT_DRAG_TO_MIN,
+  TT_SLIDER_MAX,
+} from './config.js';
+import { el, type Storyboard } from './script.js';
+
+/**
+ * The demo video, top to bottom.
+ *
+ * Audio is generated first (one batched Qwen call), so each cue's actual
+ * duration is known before recording. The runner sizes each cue's wall-time
+ * to the measured audio length, padding short `during` blocks with a
+ * trailing wait. Inter-cue spacing is controlled here via `gapBeforeMs`
+ * (silence in audio) plus optional `tail` activities (visual movement after
+ * the caption hides, before the next cue's gap).
+ *
+ * Sum of `during` declared durations MUST be ≤ measured cue duration. If
+ * synth comes back tighter than the activities can fit, the runner throws
+ * with a pointer to the offending cue — bump that cue's text, lengthen its
+ * gapBefore, or trim a during step.
+ *
+ * Reference durations (Qwen3-TTS / speaker=ryan, 2026-05-09 measured):
+ *   cue 0  1920ms   "Describe the life you want."
+ *   cue 1  2720ms   "Every matching neighbourhood, side by side."
+ *   cue 2  2160ms   "Tighten the commute to 20 minutes."
+ *   cue 3  1840ms   "Drill into a single block."
+ *   cue 4  4480ms   "Stats, listings, Street View, price history…"
+ *   cue 5  1760ms   "Take the shortlist into Excel."
+ *   cue 6  4400ms   "Perfect Postcode. Find where you actually want to live."
+ */
+export const storyboard: Storyboard = {
+  // Camera push-in to the AI box happens before the first caption — silent
+  // setup keeps the cold open from feeling rushed.
+  pre: [
+    { kind: 'clearVignette', durationMs: 0 },
+    { kind: 'wait', durationMs: 200 },
+    {
+      kind: 'zoomTo',
+      target: el('[data-tutorial="ai-filters"]'),
+      scale: AI_ZOOM_SCALE,
+      durationMs: 1300,
+    },
+    { kind: 'wait', durationMs: 140 },
+  ],
+
+  cues: [
+    // -- Scene 1: AI prompt ----------------------------------------------
+    // Cue 0 is short (1920ms) — caption shows alone, then typing + submit
+    // happen silently in the tail. The natural beat is: viewer hears the
+    // brief, then watches the prompt being typed.
+    {
+      text: 'Describe the life you want.',
+      gapBeforeMs: 0,
+      tail: [
+        { kind: 'wait', durationMs: 140 },
+        {
+          kind: 'type',
+          selector: '[data-tutorial="ai-filters"] textarea',
+          text: PROMPT_TEXT,
+          durationMs: 3000,
+        },
+        { kind: 'wait', durationMs: 140 },
+        { kind: 'submitForm', formSelector: '[data-tutorial="ai-filters"] form', durationMs: 1700 },
+        { kind: 'wait', durationMs: 700 },
+      ],
+    },
+
+    // -- Scene 2: zoom out reveal ---------------------------------------
+    {
+      text: 'Every matching neighbourhood, side by side.',
+      gapBeforeMs: 400,
+      during: [{ kind: 'zoomReset', durationMs: 1400 }],
+      tail: [{ kind: 'wait', durationMs: 1200 }],
+    },
+
+    // -- Scene 3: travel-time slider ------------------------------------
+    {
+      text: `Tighten the commute to ${TT_DRAG_TO_MIN} minutes.`,
+      gapBeforeMs: 500,
+      during: [
+        {
+          kind: 'dragSlider',
+          thumbSelector: `${TT_CARD_SELECTOR} [role="slider"] >> nth=1`,
+          trackSelector: `${TT_CARD_SELECTOR} [data-orientation="horizontal"] >> nth=0`,
+          toFraction: TT_DRAG_TO_MIN / TT_SLIDER_MAX,
+          durationMs: 1400,
+        },
+      ],
+      tail: [{ kind: 'wait', durationMs: 1200 }],
+    },
+
+    // -- Scene 4a: deep zoom into a hexagon -----------------------------
+    // The mapZoom barely fits (1500ms vs cue 1840ms); cursor prep happens
+    // earlier in this cue's during, the click + payoff dwell are in tail.
+    {
+      text: 'Drill into a single block.',
+      gapBeforeMs: 500,
+      during: [
+        { kind: 'cursorScale', scale: 1.4, durationMs: 200 },
+        {
+          kind: 'mapZoom',
+          target: { kind: 'point', x: 1140, y: 605 },
+          steps: 18,
+          durationMs: 1500,
+        },
+      ],
+      tail: [
+        // Wait for the post-zoom /api/postcodes response and a redraw
+        // before the click — otherwise the click can fire on a stale
+        // frame and miss the polygon.
+        { kind: 'wait', durationMs: 1200 },
+        {
+          kind: 'click',
+          target: { kind: 'point', x: 1140, y: 605 },
+          durationMs: 700,
+        },
+        { kind: 'cursorScale', scale: 1, durationMs: 280 },
+        // Linger so the climax cue lands on the right-pane reveal.
+        { kind: 'wait', durationMs: 1500 },
+      ],
+    },
+
+    // -- Scene 4b: right-pane payoff -----------------------------------
+    // 4480ms cue, no during — the camera holds on the populated right pane
+    // for the whole climax line. Tail dwells before the export beat.
+    {
+      text: 'Stats, listings, Street View, price history — all in one pane.',
+      gapBeforeMs: 0,
+      tail: [{ kind: 'wait', durationMs: 1200 }],
+    },
+
+    // -- Scene 5: export ------------------------------------------------
+    // 1760ms cue. zoomReset + click together fit (1700ms); 60ms padding.
+    {
+      text: 'Take the shortlist into Excel.',
+      gapBeforeMs: 500,
+      during: [
+        { kind: 'zoomReset', durationMs: 900 },
+        {
+          kind: 'click',
+          target: el('button[title="Export to Excel"]'),
+          durationMs: 800,
+        },
+      ],
+      tail: [{ kind: 'wait', durationMs: 800 }],
+    },
+
+    // -- Scene 6: outro -------------------------------------------------
+    {
+      text: `${BRAND_NAME}. ${BRAND_TAGLINE}`,
+      gapBeforeMs: 600,
+      during: [
+        {
+          kind: 'showOutro',
+          brand: BRAND_NAME,
+          tagline: BRAND_TAGLINE,
+          url: BRAND_URL,
+          durationMs: 0,
+        },
+      ],
+      tail: [{ kind: 'wait', durationMs: 1500 }],
+    },
+  ],
+};