// =====================================================================
// React overlay app — captions, scrubber, controls, take-control panel,
// cold-open text, CTA.
// =====================================================================
const { useState, useEffect, useMemo } = React;
function useFilm() {
const [, force] = useState(0);
useEffect(() => {
// R38 — FilmAPI is built inside scene.js's async IIFE, so React can mount
// first. The old code force-rendered once when FilmAPI appeared but never
// SUBSCRIBED in that branch — the whole overlay froze at its first render
// (no time updates, Play gate stuck). Always attach the subscription once
// FilmAPI exists, whichever side wins the race.
let unsub = null;
let id = null;
const attach = () => {
unsub = window.FilmAPI.subscribe(() => force((x) => x + 1));
force((x) => x + 1);
};
if (window.FilmAPI) {
attach();
} else {
id = setInterval(() => {
if (window.FilmAPI) { clearInterval(id); id = null; attach(); }
}, 50);
}
return () => { if (id) clearInterval(id); if (unsub) unsub(); };
}, []);
return window.FilmAPI;
}
// ---- Caption ----------------------------------------------------------
function Caption({ time, on }) {
const line = useMemo(() => {
if (!window.VO_SCRIPT) return null;
return window.VO_SCRIPT.find((v) => time >= v.t_in && time <= v.t_out);
}, [time]);
if (!on || !line) return null;
// Letter-reveal: progress through 200ms ramp-in window per line.
const since = time - line.t_in;
const len = line.text.length;
const charsPerSec = Math.max(20, len / Math.max(0.6, line.t_out - line.t_in - 1.0));
const shown = Math.min(len, Math.floor(since * charsPerSec));
// exit dissolve in last 0.5s
const remaining = line.t_out - time;
const exitOpacity = remaining < 0.5 ? Math.max(0, remaining / 0.5) : 1;
// Round 33 — clean, consistent typography (no contrast halo / outline).
// White text on dark backdrops, near-black on light, driven by the published
// bgLerp (0 = dark, 1 = light). Legibility comes from a single SOFT drop
// shadow (a gentle readability glow), not a hard multi-direction outline —
// so the lettering stays crisp and matches the reference look.
const bg = (typeof window !== 'undefined' && window.__V5_BG_LERP__ != null)
? window.__V5_BG_LERP__ : 1;
const dark = bg < 0.5;
const color = dark ? 'rgba(255,255,255,0.98)' : '#15130f';
const textShadow = dark
? '0 2px 16px rgba(2,6,16,0.62)'
: '0 1px 12px rgba(255,255,255,0.55)';
return (
);
}
// ---- Top bar / controls ----------------------------------------------
// Round 19: buttons + duration counter readable across BOTH the dark
// cold-open veil and the light frosted-glass dashboard background. We
// give the chrome its own subtle dark pill (rgba(11,16,28,0.55) +
// backdrop-blur) so the text contrast is independent of what's behind.
function TopBar({ api, time, duration, captionsOn, muted, takeControl }) {
function fmt(t) {
const m = Math.floor(t / 60).toString().padStart(1, '0');
const s = Math.floor(t % 60).toString().padStart(2, '0');
return `${m}:${s}`;
}
const playing = api?.isPlaying?.() ?? false;
const chipBg = {
background: 'rgba(11,16,28,0.62)',
backdropFilter: 'blur(8px) saturate(140%)',
WebkitBackdropFilter: 'blur(8px) saturate(140%)',
};
return (
3DREAMS@SG · CAPABILITIES FILM · {fmt(time)} / {fmt(duration)}
);
}
function KbdToggle({ label, on, onClick }) {
return (
);
}
// ---- Cold open --------------------------------------------------------
// Dark-room hero: full-bleed veil with the animated 3DREAMS@SG wordmark
// centred, then fades out by t≈3.2 s as the hologram column reveals.
// Cool-blue accent matches the rest of the Round-6+ palette (no phosphor).
function ColdOpen({ time }) {
// Round 21 — the cold-open wordmark is now a 3D holographic plane the
// camera flies through (title-hologram.js), and the scene opens in dark
// space on its own (no veil needed). The old 2D overlay is retired to
// avoid a double title.
return null;
// eslint-disable-next-line no-unreachable
if (time > 3.6) return null;
// Wordmark visible from t=0 — the user wants the dark room with the
// logo already there, not a flash-to-black. We use a quick 0..200 ms
// ramp instead of the previous 0..400 ms (which left t=0 blank).
const titleOpacity =
time < 0.20 ? time / 0.20 :
time > 3.20 ? Math.max(0, (3.6 - time) / 0.4) : 1;
// Sub-label fades in slightly later
const subOpacity =
time < 0.80 ? 0 :
time < 1.30 ? (time - 0.80) / 0.50 :
time > 3.20 ? Math.max(0, (3.6 - time) / 0.4) : 1;
// Subtle "ignite" — a soft pulse on the wordmark every 1.6 s.
const pulse = 1.0 + 0.018 * Math.sin(time * Math.PI * 1.25);
// Round 20: bright WHITE wash (not a dark navy veil) so the opening is a
// clean white-room ambient with the jet particle cloud showing through as
// the wash eases off. 0.94 at t=0 → 0 by t≈3.2.
const veil =
time < 2.6 ? 0.94 :
time < 3.2 ? 0.94 * (3.2 - time) / 0.6 : 0;
return (
{/* wordmark — dark ink on white + cool-blue underline glow */}
3DREAMS@SG
{/* underline sweep — animates left → right then holds */}
{/* sub-label below the wordmark */}
NTU · Centre for Climate Change & Environmental Health
);
}
// ---- Location callout (PR 23) ----------------------------------------
// "SINGAPORE · 1°20'45" N · 103°49'12" E · 12.5 KM ATMOSPHERIC COLUMN"
// Fades in as the cold-open hero finishes (t≈3.5 s), holds through the
// atmosphere reveal beat (3.5–11.5 s), fades out before the orbit-rise
// spiral starts at t≈14 s. Names the place + binds the basemap to the
// hologram column narratively. Typography matches the top bar:
// IBM Plex Mono 500 11 px 0.18em uppercase, deep charcoal.
function LocationCallout({ time }) {
// Round 24 — TWO phases: the hologram era (3.5–12 s) AND the Singapore
// basemap reveal, so "SINGAPORE + coordinates" re-appears as the map resolves.
// Round 33 — phase 2 now ALSO introduces the three Doppler-LiDAR stations
// (NTU, Raffles Girls' School, Woodlands) in the SAME monospace HUD
// typography as SINGAPORE, timed to the network-reveal voiceover (13–32 s)
// while the basemap + station markers resolve.
const inP1 = time >= 3.5 && time <= 12.0;
const inP2 = time >= 14.0 && time <= 33.0;
if (!inP1 && !inP2) return null;
const opacity = inP1
? (time < 4.0 ? (time - 3.5) / 0.5 :
time > 11.5 ? (12.0 - time) / 0.5 : 1.0)
: (time < 15.0 ? (time - 14.0) / 1.0 :
time > 32.5 ? (33.0 - time) / 0.5 : 1.0);
// Round 23 — adaptive (white on the dark intro backdrop).
const bg = (typeof window !== 'undefined' && window.__V5_BG_LERP__ != null)
? window.__V5_BG_LERP__ : 0;
const dark = bg < 0.5;
const c1 = dark ? 'rgba(255,255,255,0.96)' : 'rgba(26, 24, 20, 0.95)';
const c2 = dark ? 'rgba(255,255,255,0.72)' : 'rgba(26, 24, 20, 0.72)';
const c3 = dark ? 'rgba(255,255,255,0.50)' : 'rgba(26, 24, 20, 0.48)';
const rule = dark ? 'rgba(255,255,255,0.18)' : 'rgba(26,24,20,0.16)';
// The three Doppler-LiDAR stations — name + coordinates, introduced the
// same way SINGAPORE is. Appear only in phase 2 (the network reveal).
const STATIONS = [
{ name: 'NTU', coord: "1°20'53\" N · 103°41'02\" E" },
{ name: "Raffles Girls' School", coord: "1°20'28\" N · 103°50'24\" E" },
{ name: 'Woodlands', coord: "1°26'13\" N · 103°47'10\" E" },
];
return (
Singapore
1°20′45″ N · 103°49′12″ E
12.5 km atmospheric column
{/* Round 33 — the three Doppler-LiDAR stations, same HUD typography. */}
{inP2 && (
Doppler LiDAR network · 3 stations
{STATIONS.map((s, i) => (
{s.name}
{s.coord}
))}
)}
);
}
// ---- Closing credit ---------------------------------------------------
// Round 36 — the outro re-materializes the 3D 3DREAMS@SG wordmark; beneath it,
// a single low-contrast credit line fades in. Tightly scoped to the outro
// window (207–220) so it can never bleed into earlier chapters (the bug that
// retired the old CTA in Round 26).
function CloseCTA({ time }) {
// R42 — REMOVED. This centered outro credit duplicated the always-on
// lower-right ".v5-watermark" brand/restriction mark. The single (now bigger)
// corner watermark is the only persistent credit. Kept as a no-op so the
// render tree / call site stays intact.
return null;
// eslint-disable-next-line no-unreachable
if (time < 207 || time > 220) return null;
const fadeIn = time < 209 ? (time - 207) / 2.0 : 1;
const fadeOut = time > 217 ? (220 - time) / 3.0 : 1;
const opacity = Math.max(0, Math.min(1, fadeIn * fadeOut));
return (
All rights reserved. Centre for Climate Change & Environmental Health. 2026.
);
}
// ---- Take-control panel ----------------------------------------------
function TakeControlPanel({ api, takeControl }) {
if (!takeControl) return null;
return (
Take control · drag to orbit
Jump to chapter
{window.CHAPTER_MARKERS.map((m) => (
))}
);
}
// ---- Start gate -------------------------------------------------------
// Round 32 — one unmistakable, reliable way to START the film. The timeline
// is paused on load (no autoplay — browser audio policy needs a gesture), so
// this big centred Play target IS that gesture. It covers the whole stage
// until the film begins, so the cold-open animating at t=0 can never be
// mistaken for "already playing", and there is no small button to miss.
function StartOverlay({ api, time, playing }) {
const started = playing || time > 0.05;
if (!api || started) return null;
const start = () => { try { api.play && api.play(); } catch (_) {} };
return (
Play the film
);
}
// ---- Persistent legal footer (R43) -----------------------------------
// Replaces the old corner ".v5-watermark". A single right-aligned line pinned
// to the very bottom-right; the colour adapts to the published backdrop
// (white on the dark intro/outro, near-black on the light dashboard frames) —
// driven by the same bgLerp signal the captions use.
function Footer() {
const bg = (typeof window !== 'undefined' && window.__V5_BG_LERP__ != null)
? window.__V5_BG_LERP__ : 1;
const dark = bg < 0.5;
const color = dark ? 'rgba(255,255,255,0.82)' : 'rgba(21,19,15,0.80)';
const textShadow = dark
? '0 1px 10px rgba(2,6,16,0.50)'
: '0 1px 8px rgba(255,255,255,0.55)';
return (
All rights reserved · Centre for Climate Change & Environmental Health · 2026 · Not for redistribution
);
}
// ---- App --------------------------------------------------------------
function FilmOverlay() {
const api = useFilm();
const time = api?.time?.() ?? 0;
const playing = api?.isPlaying?.() ?? false;
// Round 19: prefer the canonical FILM_DURATION global (set in vo.js)
// so the duration counter reads "3:00" even before FilmAPI mounts.
const duration = api?.duration ?? (typeof window !== 'undefined' ? window.FILM_DURATION : null) ?? 180;
const captionsOn = api?.captionsOn?.() ?? true;
const muted = api?.isMuted?.() ?? false;
const takeControl = api?.isTakeControl?.() ?? false;
if (!api) {
return (
Preparing the room
);
}
// R38 — export mode (?export=1): no player chrome in the baked master.
// The Play gate would flash on frames 0–1 (started = time > 0.05), and a
// burned-in scrubber/timecode doesn't belong in a video file. Captions,
// the stations callout, and the outro credit are content — they stay.
const exporting = (typeof window !== 'undefined') && !!window.__V5_EXPORT_MODE__;
return (
{/* R43 — persistent right-aligned legal footer (replaces the corner watermark). */}
{!exporting && (
)}
{/* R43 — the bottom scrubber/slider was removed (cleaner bottom band; the
captions now occupy it). Playback is driven by the TopBar play/pause. */}
{!exporting && }