/* ============================================================
Splash — full-viewport landing, three expanding panels.
Hover to peek, click a panel to expand, click its CTA to enter.
Desktop: diagonal seams, horizontal. Mobile: vertical stack with
the same tap-to-expand behaviour, offset below the fixed menu.
============================================================ */
const SLANT = 64; // px — diagonal seam offset between panels (desktop only)
const NAV_H = 68; // px — fixed overlay menu height (mobile clearance)
// True only on devices with a real hover-capable, fine pointer (mouse/trackpad).
// On touch devices a tap fires a spurious `mouseenter`, which would otherwise
// trigger hover-"peek" autoplay. Gating peek (visual + playback) on this means
// the ONLY way a panel video plays on touch is tap-to-expand the active panel.
const CAN_HOVER = (typeof window !== 'undefined' && window.matchMedia)
? window.matchMedia('(hover: hover) and (pointer: fine)').matches
: true;
// Use the stacked vertical layout for phones. Width alone misses devices that
// report a wide CSS px viewport (some webviews / high-DPR phones), which would
// otherwise get the horizontal desktop layout — making the preloader sweep
// left-to-right and exposing hover-peek autoplay. So also treat any portrait
// touch device as vertical, regardless of reported width.
function detectVertical() {
if (typeof window === 'undefined') return false;
if (window.innerWidth <= 860) return true;
const coarse = window.matchMedia && window.matchMedia('(pointer: coarse)').matches;
if (coarse && window.innerHeight >= window.innerWidth && window.innerWidth <= 1080) return true;
return false;
}
const IMG = 'https://ktseng.com/wp-content/uploads/';
const PANELS = [
{ id: 'work', n: '01', title: 'Industrial Design', tagline: 'selected work',
desc: 'Industrial design, from idea to market. Smart helmets, wearables, audio, and new markets.',
mood: 'steel', video: 'images/works_vid.webm', route: 'work', cta: 'See the work' },
{ id: 'apps', n: '02', title: 'AI Labo', tagline: 'made with AI',
desc: 'Apps, graphics, and experiments made in and around AI.',
mood: 'cool', video: 'images/apps_vid.webm', route: 'apps', cta: 'Enter the labo' },
{ id: 'photography', n: '03', title: 'Moments', tagline: 'film & photography',
desc: 'Street scenes on film, color and mono. A few years edited down to the ones I kept.',
mood: 'dusk', video: 'images/moments_vid.webm', videoBlend: 'luminosity', route: 'gallery', cta: 'Open gallery' },
];
/* Texture overlay — masks video compression. Patterns are drawn on an
oversized child that rotates, so every pattern (incl. the dot grid)
supports arbitrary angles without seams at the edges. */
function TextureOverlay({ pattern = 'dots', size = 4, strength = 50, angle = 0, ink = 1 }) {
if (!pattern || pattern === 'none' || strength <= 0) return null;
const s = Math.max(2, size);
const w = Math.max(0.25, ink); // dot radius / line width in px
let backgroundImage, backgroundSize = 'auto';
if (pattern === 'dots') {
backgroundImage = `radial-gradient(rgba(0,0,0,.55) ${w}px, transparent ${w + 0.5}px)`;
backgroundSize = `${s}px ${s}px`;
} else if (pattern === 'lines') {
backgroundImage = `repeating-linear-gradient(to bottom, rgba(0,0,0,.4) 0px, rgba(0,0,0,.4) ${w}px, transparent ${w}px, transparent ${s}px)`;
} else { // hatch
backgroundImage = [
`repeating-linear-gradient(45deg, rgba(0,0,0,.32) 0px, rgba(0,0,0,.32) ${w}px, transparent ${w}px, transparent ${s}px)`,
`repeating-linear-gradient(-45deg, rgba(0,0,0,.32) 0px, rgba(0,0,0,.32) ${w}px, transparent ${w}px, transparent ${s}px)`,
].join(', ');
}
return (
);
}
function SplashPanel({ p, state, onClick, onEnter, onHover, onLeave, slantLeft, slantRight, first, vertical, z, texture, loading, firstLoad, fill = 1, unblurDelay = 0, menuOffset = 0, navClear = 0 }) {
// state: 'expanded' | 'peek' | 'half' | 'shrunk' | 'idle'
const isExp = state === 'expanded';
const isPeek = state === 'peek';
// Video plays only while the panel is hovered (peek) or expanded. It plays
// from the start and loops, so the browser can buffer sequentially and begin
// immediately even on large files / slower connections (seeking ahead first
// forces a big buffer and stalls on the 9–16MB clips, esp. on mobile).
const videoRef = React.useRef(null);
const [videoReady, setVideoReady] = React.useState(false);
// webm doesn't decode on many iPhones/Safari — if the video can't load,
// fall back to the blended still so the panel is never blank.
const [videoFailed, setVideoFailed] = React.useState(() =>
p.video && /\.webm($|\?)/.test(p.video) &&
typeof document !== 'undefined' &&
document.createElement('video').canPlayType('video/webm') === ''
);
// Panel videos autoplay muted and loop continuously. Muted+playsInline
// autoplay is allowed on every device (incl. iOS/Android), and playing from
// the start lets the browser buffer sequentially — so even the large (9–16MB)
// clips start immediately instead of stalling the way a seek-ahead did.
// Playback is gated only on the first-load splash (don't play behind it).
const activeRef = React.useRef(false);
activeRef.current = isExp || (isPeek && CAN_HOVER);
const primedRef = React.useRef(false);
const retryRef = React.useRef(0);
const onPrimeFrame = (e) => {
const v = e.target;
primedRef.current = true;
if (v.readyState >= 2) { setVideoReady(true); setVideoFailed(false); }
// Capture this panel's own first frame as a poster for reuse on the
// level-2 pages (e.g. Soar's tile uses the same apps_vid.webm). Grabbing
// it from the already-mounted panel video avoids a second decoder racing
// on the same file.
if (p.video && v.readyState >= 2) {
window.__videoPosters = window.__videoPosters || {};
if (!window.__videoPosters[p.video]) {
try {
const c = document.createElement('canvas');
c.width = v.videoWidth || 16; c.height = v.videoHeight || 9;
c.getContext('2d').drawImage(v, 0, 0, c.width, c.height);
window.__videoPosters[p.video] = c.toDataURL('image/jpeg', 0.72);
} catch (_) { /* tainted/unsupported — skip */ }
}
}
};
// Transient WebM decode failures (MediaError code 3) happen on some large
// clips; recover by reloading the element and replaying a few times before
// giving up to the placeholder.
const onVideoError = (e) => {
const v = e.target;
const code = v.error && v.error.code;
if (code === 3 && retryRef.current < 4) {
retryRef.current++;
setTimeout(() => {
const vv = videoRef.current;
if (!vv) return;
try { vv.load(); const pr = vv.play(); if (pr && pr.catch) pr.catch(() => {}); } catch (_) {}
}, 250 * retryRef.current);
return;
}
if (!v || v.readyState < 2) setVideoFailed(true);
};
React.useEffect(() => {
const v = videoRef.current;
if (!v) return;
const active = isExp || (isPeek && CAN_HOVER);
if (loading || !active) {
// Paused by default; show a still frame, don't advance.
try { v.pause(); } catch (_) {}
return;
}
const tryPlay = () => {
const vv = videoRef.current;
if (!vv || loading || !(activeRef.current)) return;
const pr = vv.play();
if (pr && pr.catch) pr.catch(() => {});
};
tryPlay();
// play() called before the video is ready rejects silently and is never
// retried; retry on readiness events and in the interval until advancing.
v.addEventListener('canplay', tryPlay);
v.addEventListener('loadeddata', tryPlay);
const iid = setInterval(() => {
const vv = videoRef.current;
if (!vv) { clearInterval(iid); return; }
if (vv.readyState >= 2) { setVideoReady(true); setVideoFailed(false); }
if (vv.paused && activeRef.current) tryPlay();
if (vv.readyState >= 3 && !vv.paused) clearInterval(iid);
}, 200);
const tid = setTimeout(() => { if (v.readyState < 2) setVideoFailed(true); }, 8000);
return () => { clearInterval(iid); clearTimeout(tid); v.removeEventListener('canplay', tryPlay); v.removeEventListener('loadeddata', tryPlay); };
}, [loading, isExp, isPeek]);
// Preload the clip so a tap plays instantly. Mobile browsers ignore
// preload="auto" until a gesture, so also prime (muted play→pause) on the
// first touch anywhere — this buffers all three clips without breaking
// paused-by-default (it only pauses panels that aren't currently active).
React.useEffect(() => {
const v = videoRef.current;
if (!v) return;
try { v.load(); } catch (_) {}
if (typeof window === 'undefined' || !('ontouchstart' in window)) return;
const prime = () => {
const vv = videoRef.current;
if (!vv) return;
try {
const pr = vv.play();
const settle = () => { if (!activeRef.current) { try { vv.pause(); } catch (_) {} } };
if (pr && pr.then) pr.then(settle).catch(() => {}); else settle();
} catch (_) {}
};
window.addEventListener('touchstart', prime, { once: true, passive: true });
window.addEventListener('pointerdown', prime, { once: true, passive: true });
return () => {
window.removeEventListener('touchstart', prime);
window.removeEventListener('pointerdown', prime);
};
}, []);
// Tap toggles expand. Call play()/pause() SYNCHRONOUSLY here (inside the user
// gesture) so playback is reliable on mobile, where a play() deferred to the
// post-setState effect is no longer treated as gesture-initiated and is
// silently blocked — the cause of inconsistent tap-to-play.
const handleClick = () => {
if (loading) return;
const v = videoRef.current;
if (v) {
if (isExp) { try { v.pause(); } catch (_) {} }
else { try { const pr = v.play(); if (pr && pr.catch) pr.catch(() => {}); } catch (_) {} }
}
onClick();
};
// Mobile uses gentler ratios so shrunk panels keep their titles visible.
const flex = vertical
? (isExp ? 3.2 : state === 'shrunk' ? 1 : 1)
: (isExp ? 5.4 : isPeek ? 1.7 : state === 'shrunk' ? 0.7 : state === 'half' ? 0.9 : 1);
const raised = isExp || isPeek;
const L = (!vertical && slantLeft) ? SLANT : 0;
const R = (!vertical && slantRight) ? SLANT : 0;
// On mobile, hide the tagline on shrunk siblings so the title always fits.
const showTagline = !vertical || isExp || state === 'idle';
// Vertical (mobile) slant: stacked panels share a slightly diagonal
// boundary, echoing the desktop slant. ~5% of viewport width of rise.
const VS = 'min(5vw, 24px)';
const vTop = vertical && !first ? VS : '0px';
const vBot = vertical && slantRight ? VS : '0px';
return (
{/* duotone video: primed muted on load (fetch + show the 20% frame,
then pause), fades in from 0 opacity once displayable. multiply
drops white backgrounds; luminosity for real footage. Plays on
hover and while expanded, pauses otherwise; loops wrap to 0. */}
{/* No still fallback: if the video can't decode, the duotone Photo
placeholder shows through (never blank). */}
{p.video && (
)}
{/* texture overlay over the video to mask its lower resolution
(per-video scope; tweakable pattern/density/strength/angle) */}
{p.video && texture && texture.scope !== 'screen' && (
)}
{/* number marker — hidden on shrunk mobile panels (no room).
On desktop the transparent nav overlays the splash full-height, so
tuck the marker just below it (navClear) and fade it in with the menu. */}
{(!vertical || isExp || state === 'idle') && (
{p.n}
)}
{/* bottom content */}