// Persistent presenter chrome — left-rail act spine + top hairline timecode.
// Lean: reads document scroll for both the hairline progress and the active
// act. Clicking a spine dot scrolls to that act.
const { useState, useEffect } = window;
function TopHairline() {
const [p, setP] = useState(0);
useEffect(() => {
const onScroll = () => {
const doc = document.documentElement;
const max = doc.scrollHeight - window.innerHeight;
setP(max > 0 ? window.scrollY / max : 0);
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
);
}
function Spine({ acts, active }) {
const go = (id) => {
const el = document.getElementById('act-' + id);
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
};
return (
);
}
// Mode toggle — Scroll Mode (cinematic, smooth, current default) vs Click
// Mode (snap, no tween, behaves like Keynote / PowerPoint).
//
// Scroll Mode: 900ms eased scroll-tween per clicker press, 0.18s opacity
// transitions on cross-fades. The "deck-as-scroll-site" feel.
// Click Mode: 80ms scroll (effectively instant), 60ms transitions.
// The "deck-as-slideshow" feel. For Svet if she wants tighter
// control, or if the cinematic transitions feel slow on stage.
//
// State lives on window.__deckClickMode (boolean) AND in a body data-attr,
// AND is persisted to localStorage so the mode survives reloads.
function ModeToggle() {
const [mode, setMode] = useState(() => {
try {
return localStorage.getItem('vv_deck_mode') || 'scroll';
} catch {
return 'scroll';
}
});
useEffect(() => {
window.__deckClickMode = (mode === 'click');
document.body.dataset.deckMode = mode;
try { localStorage.setItem('vv_deck_mode', mode); } catch {}
}, [mode]);
const isClick = mode === 'click';
const toggle = () => setMode(isClick ? 'scroll' : 'click');
return (
);
}
// Always-available link to the Appendix (fashion-school directory + archive
// network reference). Discrete bottom-left pin; opens in a new tab so the
// presenter doesn't lose deck position. Per Doug's feedback after pulling
// the inline directory button — the appendix is valuable, just shouldn't
// crowd a slide.
function AppendixPin() {
return (
{ e.currentTarget.style.background = 'rgba(201,168,76,0.18)'; }}
onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(7,50,66,0.55)'; }}
>
Appendix
↗
);
}
function FullscreenToggle() {
const [isFull, setIsFull] = useState(false);
useEffect(() => {
const onChange = () => setIsFull(!!document.fullscreenElement);
document.addEventListener('fullscreenchange', onChange);
return () => document.removeEventListener('fullscreenchange', onChange);
}, []);
const toggle = () => {
if (document.fullscreenElement) document.exitFullscreen();
else document.documentElement.requestFullscreen();
};
return (
);
}
// Clicker / keyboard advance — one beat (100vh) per press, tweened over
// ~900ms so scroll-scrubbed reveals (staggered cards, fades) have time to
// play. The browser's native `behavior: 'smooth'` is ~300ms, which rushes
// multi-element stagger. We animate by hand with rAF + easeOutCubic.
// Presses during an active tween are ignored (debounce via `animating`) so
// clicker-mashing doesn't stack scroll targets.
//
// Beat-snap stabilizer (added 2026-04-29): if the user wheel/trackpad-
// scrolls and rests partway between two beat anchors, the deck would
// otherwise leave the inter-act transition fade stuck mid-flight (e.g.
// both stages at 0.4 opacity, neither dominant). After scroll stops, we
// detect the rest position and auto-snap to the nearest 100vh boundary —
// so a transition, once initiated, always resolves.
function useClickerNavigation() {
useEffect(() => {
let animating = false;
let snapTimer = null;
const BEAT_DURATION_SCROLL = 900; // ms per beat step in scroll mode
const BEAT_DURATION_CLICK = 80; // ms in click mode (effectively instant)
const SNAP_DURATION = 380; // ms — short tween for the rest-snap
const SNAP_DEBOUNCE = 220; // ms after scroll stops before snapping
const SNAP_TOLERANCE_PX = 4; // don't snap if within 4px of a boundary
const JUMP_DURATION = 1400; // ms for Home/End
const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
// Resolve duration at the moment of tween — supports toggling Scroll/Click
// mode mid-deck. window.__deckClickMode is owned by ModeToggle.
const resolveBeatDuration = () =>
window.__deckClickMode ? BEAT_DURATION_CLICK : BEAT_DURATION_SCROLL;
const tweenTo = (target, duration) => {
if (animating) return;
animating = true;
const start = window.scrollY;
const clamped = Math.max(0, Math.min(
document.documentElement.scrollHeight - window.innerHeight,
target
));
const delta = clamped - start;
if (delta === 0) { animating = false; return; }
const t0 = performance.now();
const tick = (now) => {
const r = Math.min(1, (now - t0) / duration);
window.scrollTo(0, start + delta * easeOutCubic(r));
if (r < 1) requestAnimationFrame(tick);
else animating = false;
};
requestAnimationFrame(tick);
};
// Snap the user to the nearest beat anchor (every 100vh from doc top).
// Skipped while the clicker is mid-tween to avoid fighting the active
// animation.
const snapToNearestBeat = () => {
if (animating) return;
const vh = window.innerHeight;
if (vh <= 0) return;
const current = window.scrollY;
const nearest = Math.round(current / vh) * vh;
if (Math.abs(current - nearest) > SNAP_TOLERANCE_PX) {
tweenTo(nearest, SNAP_DURATION);
}
};
// Each press advances one beat (100vh of scroll). With sticky stages
// each viewport-step lands on a beat boundary; clicker-mashing through
// an act sweeps its reveals at presenter pace.
const step = (dir) => tweenTo(window.scrollY + dir * window.innerHeight, resolveBeatDuration());
const onKey = (e) => {
const t = e.target;
if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return;
switch (e.key) {
case 'PageDown':
case 'ArrowDown':
case 'ArrowRight':
case ' ':
e.preventDefault(); step(1); break;
case 'PageUp':
case 'ArrowUp':
case 'ArrowLeft':
e.preventDefault(); step(-1); break;
case 'Home':
e.preventDefault();
tweenTo(0, JUMP_DURATION); break;
case 'End':
e.preventDefault();
tweenTo(document.documentElement.scrollHeight, JUMP_DURATION); break;
}
};
// After any scroll event, schedule a snap. The clicker tween itself
// fires scroll events as it tweens, but `animating` short-circuits
// snapping mid-tween. Wheel/trackpad scrolls always pass through.
const onScroll = () => {
clearTimeout(snapTimer);
snapTimer = setTimeout(snapToNearestBeat, SNAP_DEBOUNCE);
};
window.addEventListener('keydown', onKey);
window.addEventListener('scroll', onScroll, { passive: true });
return () => {
window.removeEventListener('keydown', onKey);
window.removeEventListener('scroll', onScroll);
clearTimeout(snapTimer);
};
}, []);
}
function PresenterChrome({ acts, active }) {
useClickerNavigation();
return (<>);
}
Object.assign(window, { PresenterChrome });