/* T-AV — Cinematic SVG visuals for each of the 11 home-page beats.
Each visual receives `progress` (0..1) representing how far through
the beat's pin we are, and animates accordingly. */
const { useRef, useState, useEffect } = React;
/* Helper: clamp + map.
clamp() doubles as a defense-in-depth guard: a non-finite input
(NaN / undefined — e.g. a degenerate `progress` prop) resolves to `lo`
instead of poisoning every derived SVG attribute. The root cause of a
NaN `progress` is fixed at source in pages/Home.jsx's __scrollFlush;
this keeps the visuals robust to any future caller too. */
const clamp = (v, lo = 0, hi = 1) => (Number.isFinite(v) ? Math.min(hi, Math.max(lo, v)) : lo);
const mix = (a, b, t) => a + (b - a) * t;
/* ===== Beat 1 — Empty venue with typewriter intake form.
The form is scroll-driven via the `progress` prop:
- 0 → 0.65: 8 event-type rows type themselves in one at a time
(EXHIBITIONS → LAUNCH → SPORTS → CULTURAL → GOVERNMENT
→ CORPORATE → PRIVATE → CONCERT)
- 0.65 → 0.70: stamp lands on CONCERT row — [ ] flips to [×],
white halo flashes around the box (overshoot scale,
decaying radius), label brightens to bold white,
◀ SELECTED tag slides in from the right.
- 0.70 → 1.00: locked state holds.
Render is pure on `progress` — reverse scroll un-types cleanly.
Cursor blinks at 2Hz via a separate setInterval.
Reduced-motion shows the locked state regardless of scroll. */
function BeatEmpty({ progress }) {
const ROWS = ['EXHIBITIONS', 'LAUNCH', 'SPORTS', 'CULTURAL', 'GOVERNMENT', 'CORPORATE', 'PRIVATE', 'CONCERT'];
const ROW_Y = [184, 212, 240, 268, 296, 324, 352, 380];
const CONCERT_IDX = ROWS.length - 1;
const STAMP_AT = 0.65;
const FLASH_WIDTH = 0.05;
const SCAN_END = STAMP_AT;
const PREFIX = '[ ] ';
const STAMPED_PREFIX = '[×] ';
const CHAR_WIDTH = 11.5;
const wrapperRef = useRef(null);
const [reduced, setReduced] = useState(false);
const [blink, setBlink] = useState(true);
useEffect(() => {
if (typeof window === 'undefined' || !window.matchMedia) return;
const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
setReduced(mql.matches);
const handler = (e) => setReduced(e.matches);
mql.addEventListener('change', handler);
return () => mql.removeEventListener('change', handler);
}, []);
useEffect(() => {
if (reduced) return;
if (typeof IntersectionObserver === 'undefined') {
const id = setInterval(() => setBlink((b) => !b), 500);
return () => clearInterval(id);
}
const el = wrapperRef.current;
if (!el) return;
let intervalId = null;
const start = () => {
if (intervalId !== null) return;
intervalId = setInterval(() => setBlink((b) => !b), 500);
};
const stop = () => {
if (intervalId === null) return;
clearInterval(intervalId);
intervalId = null;
};
const io = new IntersectionObserver((entries) => {
const e = entries[entries.length - 1];
if (e.isIntersecting) start(); else stop();
}, { threshold: 0 });
io.observe(el);
return () => {
io.disconnect();
stop();
};
}, [reduced]);
const t = clamp(progress);
const stamped = reduced || t >= STAMP_AT;
const flashI = reduced ? 0 : (stamped ? (1 - Math.min(1, (t - STAMP_AT) / FLASH_WIDTH)) : 0);
const scanT = reduced ? 1 : Math.min(1, t / SCAN_END);
const exact = scanT * ROWS.length;
const currentRow = Math.min(ROWS.length - 1, Math.floor(exact));
const within = exact - currentRow;
const rowTexts = ROWS.map((label, i) => {
const prefix = (stamped && i === CONCERT_IDX) ? STAMPED_PREFIX : PREFIX;
const fullText = prefix + label;
let visibleChars;
if (stamped) visibleChars = fullText.length;
else if (i < currentRow) visibleChars = fullText.length;
else if (i === currentRow) visibleChars = Math.floor(within * fullText.length);
else visibleChars = 0;
return { fullText, visibleChars };
});
const currentText = rowTexts[currentRow];
const cursorX = 232 + currentText.visibleChars * CHAR_WIDTH;
const cursorY = ROW_Y[currentRow] - 13;
let cursorOpacity;
if (stamped) cursorOpacity = 0;
else if (t < 0.005) cursorOpacity = 0.85;
else cursorOpacity = blink ? 0.85 : 0.2;
const barY = stamped ? (ROW_Y[CONCERT_IDX] + 6) : (ROW_Y[currentRow] + 6);
const barOpacity = (t < 0.005 && !stamped) ? 0 : (stamped ? (0.4 + flashI * 0.4) : 0.4);
const haloR = 8 + flashI * 28;
const haloOpacity = flashI * 0.75;
const selectedOpacity = stamped ? 1 : 0;
const selectedSlideX = stamped ? (1 - Math.min(1, (t - STAMP_AT) / 0.04)) * 18 : 18;
let signalText;
if (stamped) signalText = 'SIGNAL · LOCKED';
else if (t < 0.005) signalText = 'SIGNAL · AWAITING';
else signalText = 'SIGNAL · CAPTURING · ' + (currentRow + 1) + '/' + ROWS.length;
const dust = Array.from({ length: 14 }, (_, i) => i);
return (
);
}
/* ===== Beat 2 — Floor plan grid + stage rectangle drawing in ===== */
function BeatFloorPlan({ progress }) {
const t = clamp(progress * 1.4);
const stagePerim = 2 * (240 + 130);
return (
);
}
/* ===== Beat 3 — Trusses fly in ===== */
function BeatTrusses({ progress }) {
const t = clamp(progress * 1.2);
const truss = (x, y, w) => {
const segs = Math.floor(w / 28);
return (
{Array.from({ length: segs }, (_, i) => (
))}
);
};
// Truss flies down from top
const topY = mix(-30, 100, t);
const sideY = mix(-30, 220, clamp((t - 0.3) * 1.5));
return (
);
}
/* ===== Beat 4 — Speakers stack with SPL meter ===== */
function BeatAudio({ progress }) {
const t = clamp(progress * 1.2);
const stackCount = Math.min(6, Math.floor(t * 8));
const speaker = (x, y, i) => (
);
return (
);
}
/* ===== Beat 5 — Lights rig in (cones sweep + come on) ===== */
function BeatLights({ progress }) {
const t = clamp(progress * 1.2);
const positions = [180, 320, 460, 600];
return (
);
}
/* ===== Beat 6 — LED walls drop in ===== */
function BeatVideo({ progress }) {
const t = clamp(progress * 1.2);
const dropY = mix(-150, 110, t);
const cellW = 16;
return (
);
}
/* ===== Beat 7 — All systems synced (waveforms aligned) ===== */
function BeatSynced({ progress }) {
const t = clamp(progress * 1.1);
const tracks = ['AUDIO', 'LIGHTING', 'VIDEO', 'TIMECODE'];
const colors = ['#3E8C84', '#6DACB5', '#3E8C84', '#ffba00'];
return (
);
}
/* ===== Beat 8 — Crowd silhouette ===== */
function BeatCrowd({ progress }) {
const t = clamp(progress * 1.2);
const heads = Array.from({ length: 80 }, (_, i) => {
const row = Math.floor(i / 16);
const col = i % 16;
return { x: 60 + col * 46 + (row % 2) * 23, y: 320 + row * 28 };
});
return (
);
}
/* ===== Beat 9 — Frozen frame (Polaroid stack of past shows) ===== */
function BeatFrame({ progress }) {
// not animated by progress — static photographic moment
return null;
}
/* ===== Beat 10 — Quiet stage (gentle pulse) ===== */
function BeatQuiet({ progress }) {
const t = clamp(progress);
return (
);
}
/* ===== Beat 11 — Lights dim ===== */
function BeatDim({ progress }) {
const t = 1 - clamp(progress * 1.2);
return (
);
}
/* =====================================================================
Beat 08 — SHOW LIVE: the peak.
Every layer that the prior beats covered runs simultaneously here:
- top strip: scrolling audio waveform + live timecode ticker
- LED wall: animated pixel grid pulsing with content
- mid-stage: 5 light beams sweeping with phase offsets
- audience floor: crowd heads bobbing in waves
- ambient: dust particles drifting upward through beams
Scroll progress drives every layer in concert, so the whole scene
"wakes up" then handles to the next beat.
===================================================================== */
function BeatShowLive({ progress }) {
const wrapperRef = useRef(null);
const [time, setTime] = useState(0);
const [reducedMotion, setReducedMotion] = useState(false);
/* Autonomous animation loop: rAF ticks while mounted, gated by IntersectionObserver
so it pauses when the beat scrolls out of viewport. prefers-reduced-motion freezes
the loop entirely (one static peak frame at tm = 6.0). */
useEffect(() => {
if (typeof window === 'undefined') return;
const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
setReducedMotion(mql.matches);
const onMqlChange = () => setReducedMotion(mql.matches);
mql.addEventListener('change', onMqlChange);
if (mql.matches) {
return () => mql.removeEventListener('change', onMqlChange);
}
let rafId = null;
let prevMs = null;
let accSec = 0;
/* Default to running; if the IntersectionObserver tells us we're off-screen
we'll flip this back to false and stop scheduling rAFs. */
let running = true;
const tick = (now) => {
if (!running) { rafId = null; return; }
if (prevMs === null) prevMs = now;
const delta = (now - prevMs) / 1000;
prevMs = now;
accSec += delta;
setTime(accSec);
rafId = requestAnimationFrame(tick);
};
rafId = requestAnimationFrame(tick);
let io = null;
if (wrapperRef.current && typeof IntersectionObserver !== 'undefined') {
io = new IntersectionObserver((entries) => {
const entry = entries[entries.length - 1];
if (entry.isIntersecting && !running) {
running = true;
prevMs = null;
if (rafId === null) rafId = requestAnimationFrame(tick);
} else if (!entry.isIntersecting && running) {
running = false;
}
}, { threshold: 0 });
io.observe(wrapperRef.current);
}
return () => {
mql.removeEventListener('change', onMqlChange);
if (io) io.disconnect();
running = false;
if (rafId) cancelAnimationFrame(rafId);
};
}, []);
/* Scroll-derived fade-in intensity (matches the existing pattern for other beats). */
const intensity = clamp(progress * 1.15);
/* Internal animation time in seconds. Under reduced-motion, freeze at a peak frame. */
const tm = reducedMotion ? 6.0 : time;
/* Live timecode: real-time seconds since the beat first entered viewport.
Pauses when out of viewport (because the rAF loop pauses) and resumes on re-entry. */
const totalSec = Math.floor(tm);
const HH = String(Math.floor(totalSec / 3600) + 21).padStart(2, '0'); /* show clock starts at 21:00 */
const MM = String(Math.floor(totalSec / 60) % 60).padStart(2, '0');
const SS = String(totalSec % 60).padStart(2, '0');
/* Top audio waveform — 100 sample points scrolling left */
const wavePath = Array.from({ length: 100 }, (_, j) => {
const x = 200 + j * 6;
const phase = j * 0.32 + tm * 14;
const amp = (Math.sin(phase) * 0.6 + Math.sin(phase * 2.1) * 0.3 + Math.sin(phase * 4.7) * 0.15) * 10 * intensity;
return (j === 0 ? 'M' : 'L') + x + ' ' + (24 - amp);
}).join(' ');
/* LED wall: 28 cols x 12 rows. Each cell's brightness is a noise-ish
function of (col, row, time). Cells nearer center are more lit. */
const ledCols = 28, ledRows = 12;
const wallX = 130, wallY = 70, wallW = 540, wallH = 200;
const cellW = wallW / ledCols, cellH = wallH / ledRows;
const pixels = [];
for (let r = 0; r < ledRows; r++) {
for (let c = 0; c < ledCols; c++) {
const cx = c / (ledCols - 1) - 0.5;
const cy = r / (ledRows - 1) - 0.5;
const dist = Math.sqrt(cx * cx + cy * cy);
const wave = Math.sin(c * 0.55 + tm * 9 - r * 0.3) * 0.5 + 0.5;
const radial = 1 - dist * 1.4;
const a = clamp(wave * radial * intensity) * 0.85;
pixels.push({ c, r, a });
}
}
/* Seven dramatic beams along a top truss at y=55.
Each beam swings on its own phase and flickers in brightness so the rig
feels alive without identical-looking copies. */
const beamOrigins = [80, 200, 320, 400, 480, 600, 720];
const beams = beamOrigins.map((cx, i) => {
const swing = Math.sin(tm * 1.4 + i * 0.7) * 40;
const flicker = (Math.sin(tm * 3.2 + i * 1.7) * 0.5 + 0.5);
return {
topX: cx,
bottomX: cx + swing,
alpha: (0.5 + flicker * 0.2) * intensity,
};
});
/* Crowd: 90 heads (15 cols x 6 rows) bobbing in waves.
Front 3 rows (r = 0, 1, 2 — closest to the stage) raise their arms,
each on its own shimmer phase so the wave ripples through the rows. */
const heads = [];
for (let r = 0; r < 6; r++) {
for (let c = 0; c < 15; c++) {
const x = 60 + c * 50 + (r % 2) * 25;
const y = 320 + r * 28;
const bob = Math.sin(tm * 5 + c * 0.4 + r * 0.7) * 3 * intensity;
/* Spotlight fall-off — heads closer to stage centerline are brighter */
const distFromCenter = Math.abs(x - 400) / 400;
const litness = (1 - distFromCenter * 0.7) * intensity;
const armsUp = r < 3;
const armWave = armsUp ? (Math.sin(tm * 4 + c * 0.5 + r * 1.1) * 0.5 + 0.5) : 0;
heads.push({ x, y: y + bob, lit: litness, armsUp, armWave });
}
}
/* Ambient particles — 14 dust motes drifting upward through beams */
const particles = Array.from({ length: 14 }, (_, i) => {
const seed = i * 137.5;
const xJitter = Math.sin(seed) * 250 + 400;
const yStart = 380;
const yEnd = 90;
/* Each particle has its own phase so they don't move in lockstep */
const lifeT = (tm * 0.35 + i / 14) % 1;
return {
x: xJitter + Math.sin(tm * 0.8 + i) * 8,
y: yStart - (yStart - yEnd) * lifeT,
a: Math.sin(lifeT * Math.PI) * 0.6 * intensity,
};
});
/* Live indicator pulse */
const livePulse = (Math.sin(tm * 8) * 0.5 + 0.5) * intensity;
return (
);
}
window.BeatVisuals = {
BeatEmpty, BeatFloorPlan, BeatTrusses, BeatAudio, BeatLights,
BeatVideo, BeatSynced, BeatShowLive, BeatCrowd, BeatQuiet, BeatDim
};