Update storyboard
This commit is contained in:
parent
1483dc5224
commit
a9e5a8ad96
7 changed files with 49 additions and 103 deletions
|
|
@ -21,23 +21,9 @@ import { el, type Storyboard } from './script.js';
|
|||
* 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 / British male narrator, 2026-05-09):
|
||||
* 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."
|
||||
*/
|
||||
|
||||
const PROMPT_TEXT = 'Flats or terraces <£450k, 35 min to Manchester, low crime';
|
||||
const PROMPT_TEXT = 'Flats <£300k, 35 min to commute Manchester close to an outstanding school in a quite low crime area';
|
||||
|
||||
const BRAND = {
|
||||
name: 'Perfect Postcode',
|
||||
|
|
@ -45,59 +31,42 @@ const BRAND = {
|
|||
url: 'https://perfect-postcode.co.uk',
|
||||
};
|
||||
|
||||
// Cold-open zoom: how aggressively to magnify the AI box.
|
||||
// 2.4 fills most of the viewport with the prompt card without blowing up text.
|
||||
|
||||
const AI_ZOOM_SCALE = 2.4;
|
||||
|
||||
// The travel-time card we'll drag manually after AI applies. The Filters
|
||||
// component renders each travel-time entry with `data-filter-name="tt_${i}"`,
|
||||
// and our stub only sets one entry, so it's tt_0.
|
||||
const TT_CARD_SELECTOR = '[data-filter-name="tt_0"]';
|
||||
const TT_SLIDER_MAX = 120;
|
||||
const TT_DRAG_FROM_MIN = 35; // matches AI stub max below
|
||||
const TT_DRAG_FROM_MIN = 35;
|
||||
const TT_DRAG_TO_MIN = 20;
|
||||
|
||||
// Calm British male narrator. Matches what tts/synth.py used to default to;
|
||||
// kept identical so existing audio caches don't invalidate on first run.
|
||||
const BRITISH_MALE_NARRATOR =
|
||||
'Calm, professional middle-aged Chinese male narrator with a ' +
|
||||
'strong Chinese accent. Even, measured pace; warm but ' +
|
||||
'understated; product-demo register. Do not laugh, sigh, gasp, or add ' +
|
||||
'Calm but cheerful, professional middle-aged British male narrator from the North with a ' +
|
||||
'strong Manchester accent. Even, measured pace; warm but and smiling voice; product-demo register. Do not laugh, sigh, gasp, or add ' +
|
||||
'filler sounds; no audible breaths between sentences.';
|
||||
|
||||
const DEFAULT_CUES: Storyboard['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.',
|
||||
text: 'Start by describing the type of place you\'re looking for',
|
||||
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.',
|
||||
text: 'The dashboard will show you the likeliest places that will meet your expectations',
|
||||
gapBeforeMs: 400,
|
||||
during: [{ kind: 'zoomReset', durationMs: 1400 }],
|
||||
tail: [{ kind: 'wait', durationMs: 1200 }],
|
||||
tail: [{ kind: 'wait', durationMs: 500 }],
|
||||
},
|
||||
|
||||
// -- Scene 3: travel-time slider ------------------------------------
|
||||
{
|
||||
text: `Tighten the commute to ${TT_DRAG_TO_MIN} minutes.`,
|
||||
text: `Adjust the filters to narrow down to the best candidates`,
|
||||
gapBeforeMs: 500,
|
||||
during: [
|
||||
{
|
||||
|
|
@ -105,17 +74,14 @@ const DEFAULT_CUES: Storyboard['cues'] = [
|
|||
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,
|
||||
durationMs: 1000,
|
||||
},
|
||||
],
|
||||
tail: [{ kind: 'wait', durationMs: 1200 }],
|
||||
tail: [{ kind: 'wait', durationMs: 400 }],
|
||||
},
|
||||
|
||||
// -- 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.',
|
||||
text: 'And now it\'s time to dig into the details. Looks good to me!',
|
||||
gapBeforeMs: 500,
|
||||
during: [
|
||||
{ kind: 'cursorScale', scale: 1.4, durationMs: 200 },
|
||||
|
|
@ -130,7 +96,7 @@ const DEFAULT_CUES: Storyboard['cues'] = [
|
|||
// 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: 'wait', durationMs: 500 },
|
||||
{
|
||||
kind: 'click',
|
||||
target: { kind: 'point', x: 1140, y: 605 },
|
||||
|
|
@ -142,19 +108,8 @@ const DEFAULT_CUES: Storyboard['cues'] = [
|
|||
],
|
||||
},
|
||||
|
||||
// -- 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.',
|
||||
text: 'Now you can take your shortlist and start looking for your next home in your perfect postcode.',
|
||||
gapBeforeMs: 500,
|
||||
during: [
|
||||
{ kind: 'zoomReset', durationMs: 900 },
|
||||
|
|
@ -167,7 +122,6 @@ const DEFAULT_CUES: Storyboard['cues'] = [
|
|||
tail: [{ kind: 'wait', durationMs: 800 }],
|
||||
},
|
||||
|
||||
// -- Scene 6: outro -------------------------------------------------
|
||||
{
|
||||
text: `${BRAND.name}. ${BRAND.tagline}`,
|
||||
gapBeforeMs: 600,
|
||||
|
|
@ -185,8 +139,6 @@ const DEFAULT_CUES: Storyboard['cues'] = [
|
|||
];
|
||||
|
||||
const DEFAULT_PRE: Storyboard['pre'] = [
|
||||
// Camera push-in to the AI box happens before the first caption — silent
|
||||
// setup keeps the cold open from feeling rushed.
|
||||
{ kind: 'clearVignette', durationMs: 0 },
|
||||
{ kind: 'wait', durationMs: 200 },
|
||||
{
|
||||
|
|
@ -219,10 +171,6 @@ export const storyboards: Storyboard[] = [
|
|||
voice: {
|
||||
instruct: BRITISH_MALE_NARRATOR,
|
||||
language: 'English',
|
||||
// Sampling pinned for cue-to-cue consistency. Lower temp/top_p make
|
||||
// the decoder less likely to sample non-speech tokens (laughter,
|
||||
// random noise) at the cost of slightly flatter intonation. Seed
|
||||
// makes runs reproducible.
|
||||
temperature: 0.6,
|
||||
topP: 0.9,
|
||||
seed: 42,
|
||||
|
|
@ -230,8 +178,6 @@ export const storyboards: Storyboard[] = [
|
|||
content: {
|
||||
promptText: PROMPT_TEXT,
|
||||
aiZoomScale: AI_ZOOM_SCALE,
|
||||
// Initial map view used while we navigate. The AI scene zooms in on
|
||||
// the sidebar so this only matters once we zoom out.
|
||||
initialMapView: { lat: 53.4795, lon: -2.2451, zoom: 11.5 },
|
||||
// Filters returned by the AI stub. Keys MUST match real feature names
|
||||
// from /api/features (verified against the running server's schema).
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue