// Project detail page — appears after the thumbnail finishes its expand animation.
// Hero layout: a rotating carousel of feature images scrolls behind a
// dominant centre render (the product). Below: title + project number, then a
// 2-column meta/body block. Close returns home.
const { useState, useEffect, useRef } = React;
const VISIBLE_TILES = 5;
// The feature band is a continuously rotating carousel: the pool is shuffled into
// a random order and scrolls horizontally behind the centre render, looping
// seamlessly. Five tiles show at a time so each image gets more room.
function MediaGallery({ gallery, mobile }) {
const { hero, pool } = gallery;
const tiles = mobile ? 2 : VISIBLE_TILES;
const bandH = mobile ? 280 : 460;
const heroW = mobile ? '58%' : '40%';
const bandRef = useRef(null);
const [tileW, setTileW] = useState(null);
useEffect(() => {
if (bandRef.current) setTileW(bandRef.current.clientWidth / tiles);
}, [tiles]);
// Randomised order, fixed for the life of this mount.
// On touch devices (iPhone/iPad) the full pool blows Safari's GPU limits —
// the animating track becomes a >10k-physical-px texture with up to 6 video
// decoders, and iOS evicts already-loaded images (they appear, then vanish).
// Cap it: a few images + at most one video keeps the layer inside budget.
const [shuffled] = useState(() => {
const a = pool.slice();
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
if (navigator.maxTouchPoints > 1) {
const vid = a.find(m => m.type === 'video');
const imgs = a.filter(m => m.type !== 'video').slice(0, 5);
if (vid) imgs.splice(Math.min(2, imgs.length), 0, vid);
return imgs;
}
return a;
});
// One full pass must span at least the band width, else the -50% loop shows gaps.
let base = shuffled;
while (base.length && base.length < tiles) base = base.concat(shuffled);
const sequence = base.concat(base);
const duration = Math.max(base.length * 8, 40);
return (
{/* Rotating carousel band — fills the width, sits behind the render */}
{sequence.map((m, i) => (
{m.type === 'video'
?
: }
))}
{/* Centre render — dominant, masks the middle of the strip.
Skipped when a project has no hero: the pool scrolls the full band. */}
{hero && (
)}
);
}
// Interactive 16-bit lab stations. You land on the animated pixel-art lab cover
// (room-only iframe) sitting under a "CLICK TO ENTER" bar. Clicking the bar slides
// the cover left and reveals the injection-moulder sim, with the cartridge tabs
// fading in to switch stations (arrow keys too). The enter bar and the tab row
// share one fixed-height slot; the cover room and the sims share one 16:9 viewport.
const TABH = 104;
function LabStations({ stations, cover, mobile }) {
const tabh = mobile ? 78 : TABH;
const [entered, setEntered] = useState(false);
const [i, setI] = useState(0);
const n = stations.length;
const active = stations[i];
// Blue Rheon auxetic foam (open cells: bright rim, lit top-left, dark hole) → pixelated
// data URL, used as the enter-bar background.
const [voro, setVoro] = useState(null);
useEffect(() => {
const W = 264, H = 22;
const c = document.createElement('canvas'); c.width = W; c.height = H;
const g = c.getContext('2d');
g.fillStyle = '#05123f'; g.fillRect(0, 0, W, H); // dark gaps between cells
const Rc = 6.2, sx = 10, sy = 9;
for (let row = -1; row * sy < H + Rc; row++) {
for (let col = -1; col * sx < W + Rc; col++) {
const cxp = col*sx + (row%2 ? sx/2 : 0) + (Math.random()*2.4-1.2);
const cyp = row*sy + (Math.random()*2.4-1.2);
const ring = (r, fill) => { g.fillStyle = fill; g.beginPath(); g.arc(cxp, cyp, r, 0, 7); g.fill(); };
ring(Rc, '#1736a6'); // cell body
ring(Rc-1.4, '#3f74ff'); // bright rim
g.fillStyle = '#7aa8ff'; g.beginPath(); g.arc(cxp-1.4, cyp-1.4, Rc-3, 0, 7); g.fill(); // top-left light
ring(Rc-3.4, '#152e7a'); // inner wall
ring(Rc-5, '#06123c'); // open hole
}
}
setVoro(c.toDataURL());
}, []);
// The cover can also request entry (e.g. a future click target inside it).
useEffect(() => {
const onMsg = (e) => { const d = e.data; if (d && d.source === 'rheon-lab-cover' && d.action === 'enter') setEntered(true); };
window.addEventListener('message', onMsg);
return () => window.removeEventListener('message', onMsg);
}, []);
const onKey = (e) => {
if (!entered) return;
if (e.key === 'ArrowRight') { e.preventDefault(); setI(p => Math.min(n - 1, p + 1)); }
if (e.key === 'ArrowLeft') { e.preventDefault(); setI(p => Math.max(0, p - 1)); }
};
const panelPct = 100 / (n + 1); // each panel = one viewport width
const trackX = entered ? (1 + i) * panelPct : 0; // 0 = cover, 1..n = sims
return (
{/* tab slot — enter bar OR cartridge tabs (same height) */}
{/* CLICK TO ENTER bar (blue foam background, pulsing + shine to draw the eye) */}
{/* cartridge tabs */}
{stations.map((s, k) => {
const on = k === i;
return (
);
})}
{/* viewport — cover room slides left to reveal the sims (cropped a touch shorter than 16:9) */}
{stations.map(s => (
))}
{/* whole lab is clickable to enter (before entering) */}
{!entered && (
{/* HUD (only once entered) */}
{entered && (
LAB STATION — {active.title.toUpperCase()}
INTERACTIVE ▸ PRESS {active.action}
)}
);
}
// Award badges — small seal image + name/year, shown for projects that have won one.
// Sits in the meta sidebar (left column), stacked below KIND/YEAR/ROLE/CLIENT.
function Awards({ awards, mobile }) {
return (
AWARDS
{awards.map((a, i) => (
{a.name}
{a.year &&
{a.year}
}
))}
);
}
function Detail({ project, onClose, onTerms, mobile }) {
const headerRef = useRef(null);
const [headerH, setHeaderH] = useState(88);
const padX = mobile ? 20 : 56;
useEffect(() => {
if (headerRef.current) setHeaderH(headerRef.current.offsetHeight);
}, []);
return (
}