);
}
/* cover image with placeholder fallback.
When a project has a gallery, the horizontal cursor position
scrubs through its images (a quick filmstrip preview). */
function Cover({ p, i, hoverZoom }) {
const gallery = (p.gallery && p.gallery.length) ? p.gallery : (p.img ? [p.img] : null);
const [idx, setIdx] = React.useState(0);
const [hovered, setHovered] = React.useState(false);
// Card covers use lightweight 1000px thumbnails (full-res images are
// 2000-3200px and take 150-460ms each to decode — that was the flash on
// opening Work). Case studies still load the originals.
const thumb = (src) => {
const t = src && src.startsWith('images/') && !src.startsWith('images/thumbs/')
? 'images/thumbs/' + src.slice('images/'.length)
: src;
// Prefer the in-memory data URL captured during the splash preload — it
// paints with no network revalidation round-trip (the sandbox revalidates
// every cached , which was the flash on opening Work).
return (window.__imgCache && window.__imgCache[t]) || t;
};
if (!gallery) {
return ;
}
const onMove = (e) => {
if (gallery.length < 2) return;
// No filmstrip scrubbing on mobile — taps shouldn't jump frames.
if (window.matchMedia && window.matchMedia('(max-width: 860px)').matches) return;
const r = e.currentTarget.getBoundingClientRect();
const x = (e.clientX - r.left) / r.width;
const n = Math.min(gallery.length - 1, Math.max(0, Math.floor(x * gallery.length)));
if (n !== idx) setIdx(n);
};
const onLeave = () => { setHovered(false); setIdx(0); };
return (
setHovered(true)} onMouseMove={onMove} onMouseLeave={onLeave}
style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }}>
{p.video ? (
// A project with a cover video plays it muted/looping in place; the
// first gallery thumb is the poster so it's never blank while loading.
) : gallery.map((src, k) => (
// Only the first frame mounts eagerly; scrub frames mount on hover so
// opening Work decodes one small thumb per card, not the whole strip.
(k === 0 || hovered) ? (
) : null
))}
);
}
/* --- Tile → page transition --------------------------------
Two phases, both anchored to the clicked tile:
1. A violet scan line sweeps the WHOLE tile left to right while
the destination assets preload. The tile keeps its colour
throughout (no desaturation).
2. When ready, the entire tile magnifies from its own origin
(scales up in place), fading linearly to 0 opacity —
dissolving into the destination page (navigated underneath).
opts: { preload?: string[], navigate: () => void } */
function tileTransition(e, opts) {
const navigate = opts.navigate;
const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const root0 = e && e.currentTarget;
if (reduce || !root0) { navigate(); return; }
const rect = root0.getBoundingClientRect();
const cs = getComputedStyle(root0);
const radius = (cs.borderRadius && cs.borderRadius !== '0px') ? cs.borderRadius : '16px';
const overlay = document.createElement('div');
overlay.style.cssText = 'position:fixed;inset:0;z-index:9999;pointer-events:auto;';
const frame = document.createElement('div');
frame.style.cssText = `position:fixed;left:${rect.left}px;top:${rect.top}px;width:${rect.width}px;height:${rect.height}px;border-radius:${radius};overflow:hidden;box-shadow:var(--shadow-xl,0 24px 60px rgba(20,30,60,.22));background:var(--surface,#fff);transform-origin:center center;will-change:transform,opacity;`;
// clone the entire tile (image + text + tags) so the scan and the
// magnify cover the whole card, not just the cover image
const clone = root0.cloneNode(true);
clone.style.cssText = `position:absolute;left:0;top:0;width:${rect.width}px;height:${rect.height}px;margin:0;box-shadow:none;transform:none;pointer-events:none;`;
frame.appendChild(clone);
// left-to-right scan line (the tile keeps its colour the whole time)
const line = document.createElement('div');
line.style.cssText = 'position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--pop,#9D4EFF);box-shadow:0 0 14px 3px var(--pop,#9D4EFF);opacity:.95;';
frame.appendChild(line);
overlay.appendChild(frame);
document.body.appendChild(overlay);
// prepare the destination page: the loader waits on opts.prepare() (the
// hero / above-the-fold), while it warms the rest of the page in the
// background. Resolves assetReady when the blocking part is decoded.
let assetReady = false;
const ready = typeof opts.prepare === 'function' ? opts.prepare() : Promise.resolve();
Promise.resolve(ready).then(() => { assetReady = true; }, () => { assetReady = true; });
const start = performance.now(), MIN = 720, CAP = 2600;
let cur = 0, raf, started = false;
function tick() {
const el = performance.now() - start;
const timeFrac = Math.min(1, el / MIN);
// climb with time, but hold near the top until the assets are ready
const target = assetReady ? 1 : Math.min(0.9, timeFrac);
cur += Math.max(0.014, (target - cur) * 0.14);
if (cur > target) cur = target;
const pct = Math.min(1, cur);
line.style.left = `${(pct * 100).toFixed(1)}%`;
if ((pct >= 0.999 && assetReady && el >= MIN) || el >= CAP) { expand(); return; }
raf = requestAnimationFrame(tick);
}
raf = requestAnimationFrame(tick);
// Backstop: rAF is paused while the tab is backgrounded; guarantee the
// expand + navigation still fire on a timer.
const backstop = setTimeout(expand, CAP + 80);
function expand() {
if (started) return; // run once (rAF + backstop guard)
started = true;
cancelAnimationFrame(raf);
clearTimeout(backstop);
line.style.transition = 'opacity 160ms linear'; line.style.opacity = '0';
const EM = 'cubic-bezier(.4,0,.2,1)';
// the whole tile magnifies from its own origin (scales up in place)
// while fading linearly to 0, dissolving into the destination page
const scale = Math.max(window.innerWidth / rect.width, window.innerHeight / rect.height) * 1.18;
frame.style.transition = `transform 660ms ${EM},opacity 660ms linear,box-shadow 400ms ease`;
requestAnimationFrame(() => {
frame.style.transform = `scale(${scale})`;
frame.style.opacity = '0';
frame.style.boxShadow = 'none';
});
setTimeout(navigate, 300);
setTimeout(() => overlay.remove(), 740);
}
}
window.tileTransition = tileTransition;
/* Warm a case-study page before navigating: data-URL the hero (blocking, so
the above-the-fold paints with no flash) and decode the rest in the
background. Returns a promise the loader waits on. */
function prepareCase(id) {
const a = window.caseAssets ? window.caseAssets(id) : null;
if (!a) return Promise.resolve();
if (a.all && a.all.length) {
const rest = a.all.filter(u => u !== a.hero);
if (rest.length) window.warmImages(rest, true); // background, data-URL
}
const jobs = [];
if (a.hero) jobs.push(window.warmImages([a.hero], true));
// a video hero (CrossHelmet): make sure its in-memory Blob URL is ready
// before navigating so the hero