/* global React, useViewport, PageIntro, COLLECTIONS */ /* * Moodboard — inspiration page. * * Editorial grid of furniture imagery — real installs, 3D renders and AI * studies — for designers to scroll, save, and pull into their own boards. * * Interaction: HTML5 drag-to-desktop. Each tile sets a DownloadURL on * dragstart so dragging the image onto Finder / Explorer downloads it. * Supported in Chrome / Edge / Brave; Safari and Firefox fall back to a * standard image drag (still placeable into apps; download requires a * right-click → Save As). * * Filter: by collection. "All" shows every image. * * Data: built from the collection imagery already on the site. Extend * as more lifestyle / AI / render images are delivered. */ const { useState: useStateMB, useMemo: useMemoMB } = React; /* Compressed thumbnail path for a moodboard image. Thumbs live under assets/_thumbs/… as 720px JPEGs (~90% lighter). If a thumb hasn't been generated yet, MoodTile falls back to the original automatically. */ function thumbFor(src) { if (!src || src.indexOf("assets/") !== 0) return src; return "assets/_thumbs/" + src.slice("assets/".length).replace(/\.(jpe?g|png|webp)$/i, ".jpg"); } /* Exact intrinsic ratio for a tile. window.IMG_DIMS (images-dims.js) holds real [w,h] for every raster image, so the tile reserves its true height up front — zero resize on load. Videos and any image missing from the map fall back to the collage ASPECT_PATTERN by index. Returns { num: w/h, css }. */ function tileRatio(item, i) { const d = (window.IMG_DIMS && window.IMG_DIMS[item.image]) || null; if (d && d[0] > 0 && d[1] > 0) return { num: d[0] / d[1], css: `${d[0]} / ${d[1]}` }; const pat = ASPECT_PATTERN[i % ASPECT_PATTERN.length]; const [a, b] = pat.split("/").map((s) => parseFloat(s)); return { num: (a && b) ? a / b : 0.8, css: pat }; } /* Mix of aspect ratios — repeats every 9 tiles for a collage rhythm. Mixes portrait, landscape, square, and tall to break uniform grids. */ const ASPECT_PATTERN = [ "4 / 5", // portrait "1 / 1", // square "3 / 4", // portrait "16 / 9", // landscape "4 / 5", // portrait "1 / 1", // square "3 / 2", // landscape "2 / 3", // tall portrait "5 / 4", // wide square ]; /* ------------------------------------------------------------------ */ /* Moodboard items */ /* Each entry: collection slug, image path, optional caption. */ /* "kind" is optional metadata for future filters; not surfaced now */ /* per the brief ("no AI labelling"). */ /* ------------------------------------------------------------------ */ /* Curated collection studio / lifestyle imagery. Project installation photography is pulled automatically from the PROJECTS registry below, so any new project added to the site appears here with no extra step. */ const COLLECTION_IMAGES = [ // Gateway ["gateway", "images/moodboard/gateway/01.webp"], ["gateway", "images/moodboard/gateway/02.webp"], ["gateway", "images/moodboard/gateway/03.webp"], ["gateway", "images/moodboard/gateway/04.webp"], ["gateway", "images/moodboard/gateway/05.webp"], // Trio ["trio", "images/moodboard/trio/01.jpg"], ["trio", "images/moodboard/trio/02.jpg"], ["trio", "images/moodboard/trio/03.jpg"], ["trio", "images/moodboard/trio/04.jpg"], ["trio", "images/moodboard/trio/05.jpg"], ["trio", "images/moodboard/trio/06.jpg"], ["trio", "images/moodboard/trio/07.jpg"], ["trio", "images/moodboard/trio/08.jpg"], ["trio", "images/moodboard/trio/09.jpg"], // Passenger Terminal Expo 2026, London — Derlot stand ["trio", "images/moodboard/trio/10.jpg"], ["trio", "images/moodboard/trio/11.jpg"], ["trio", "images/moodboard/trio/12.jpg"], ["trio", "images/moodboard/trio/13.jpg"], ["platform", "images/moodboard/platform/01.jpg"], ["rio", "images/moodboard/rio/01.jpg"], // Platform ["platform", "images/moodboard/platform/02.webp"], ["platform", "images/moodboard/platform/03.webp"], ["platform", "images/moodboard/platform/04.webp"], // Stump / Stump Recycled ["stump", "images/moodboard/stump/01.webp"], ["stump-r", "images/moodboard/stump-r/01.webp"], ["stump-r", "images/moodboard/stump-r/02.webp"], // Pipeline ["pipeline", "images/moodboard/pipeline/01.webp"], // Prisma ["prisma", "images/moodboard/prisma/01.webp"], // Caterpillar ["caterpillar", "images/moodboard/caterpillar/01.webp"], // Mochi ["mochi", "images/moodboard/mochi/01.webp"], // Twig ["twig", "images/moodboard/twig/01.webp"], // Autobahn ["autobahn", "images/moodboard/autobahn/01.jpg"], // Volar ["volar", "images/moodboard/volar/01.webp"], // Biggie ["biggie", "images/moodboard/biggie/01.webp"], // Strap — outback campaign (Florian Groehn, 2019) ["strap", "images/moodboard/strap/01.webp"], ["strap", "images/moodboard/strap/02.webp"], ["strap", "images/moodboard/strap/03.webp"], ["strap", "images/moodboard/strap/04.webp"], ["strap", "images/moodboard/strap/05.webp"], ["strap", "images/moodboard/strap/06.webp"], ["strap", "images/moodboard/strap/07.webp"], ["strap", "images/moodboard/strap/08.webp"], ["strap", "images/moodboard/strap/09.webp"], ["strap", "images/moodboard/strap/10.webp"], ["strap", "images/moodboard/strap/11.webp"], ["strap", "images/moodboard/strap/12.webp"], ["strap", "images/moodboard/strap/13.webp"], ["strap", "images/moodboard/strap/14.webp"], // Picket ["picket", "images/moodboard/picket/01.webp"], // Pinto ["pinto", "images/moodboard/pinto/01.webp"], // Hext ["hext", "images/moodboard/hext/01.webp"], // Yeti ["yeti", "images/moodboard/yeti/01.jpg"], // Pillar ["pillar", "images/moodboard/pillar/01.webp"], // Guell ["guell", "images/moodboard/guell/01.webp"], // Fit ["fit", "images/moodboard/fit/01.webp"], // Tetromino Soft ["tetromino-s", "images/moodboard/tetromino-s/01.webp"], // Tonne ["tonne", "images/moodboard/tonne/01.webp"], // Rio ["rio", "images/moodboard/rio/02.jpg"], // S1 ["s1", "images/moodboard/s1/01.webp"], // Pill ["pill", "images/moodboard/pill/01.jpg"], // Kono ["kono", "images/moodboard/kono/01.jpg"], ["kono", "images/moodboard/kono/02.jpg"], ["kono", "images/moodboard/kono/03.jpg"], ["kono", "images/moodboard/kono/04.jpg"], ["kono", "images/moodboard/kono/05.jpg"], // Wombat ["wombat", "images/moodboard/wombat/01.jpg"], ["wombat", "images/moodboard/wombat/02.jpg"], ["wombat", "images/moodboard/wombat/03.jpg"], ["wombat", "images/moodboard/wombat/04.jpg"], // Moodboard tag overrides — re-file specific project shots under the // collection they actually show (curated entries win the de-dupe). ["mochi", "images/moodboard/mochi/02.jpg"], ["cup", "images/moodboard/cup/01.webp"], ["biggie", "images/moodboard/biggie/02.webp"], // Bolet ["bolet", "images/moodboard/bolet/01.jpg"], ["bolet", "images/moodboard/bolet/02.jpg"], ["bolet", "images/moodboard/bolet/03.jpg"], ["bolet", "images/moodboard/bolet/04.jpg"], ["bolet", "images/moodboard/bolet/05.jpg"], // Coral ["coral", "images/moodboard/coral/01.jpg"], ["coral", "images/moodboard/coral/02.jpg"], ["coral", "images/moodboard/coral/03.jpg"], ["coral", "images/moodboard/coral/04.jpg"], ["coral", "images/moodboard/coral/05.jpg"], // Kink ["kink", "images/moodboard/kink/01.jpg"], ["kink", "images/moodboard/kink/02.jpg"], ["kink", "images/moodboard/kink/03.jpg"], ["kink", "images/moodboard/kink/04.jpg"], ["kink", "images/moodboard/kink/05.jpg"], // Seed ["seed", "images/moodboard/seed/01.png"], ["seed", "images/moodboard/seed/02.jpg"], ["seed", "images/moodboard/seed/03.jpg"], ["seed", "images/moodboard/seed/04.jpg"], // Ivi ["ivi", "images/moodboard/ivi/01.jpg"], ["ivi", "images/moodboard/ivi/02.jpg"], ["ivi", "images/moodboard/ivi/03.jpg"], ["ivi", "images/moodboard/ivi/04.jpg"], ["ivi", "images/moodboard/ivi/05.jpg"], // Mass ["mass", "images/moodboard/mass/01.jpg"], ["mass", "images/moodboard/mass/02.jpg"], ["mass", "images/moodboard/mass/03.jpg"], ["mass", "images/moodboard/mass/04.jpg"], // Aviation in-situ renders ["gateway", "images/moodboard/gateway/06.jpg"], ["gateway", "images/moodboard/gateway/07.jpg"], ["gateway", "images/moodboard/gateway/08.jpg"], ["pipeline", "images/moodboard/pipeline/02.jpg"], ["mochi", "images/moodboard/mochi/03.jpg"], ["mochi", "images/moodboard/mochi/04.jpg"], ["mochi", "images/moodboard/mochi/05.jpg"], ["prisma", "images/moodboard/prisma/02.jpg"], ["prisma", "images/moodboard/prisma/03.jpg"], ["autobahn", "images/moodboard/autobahn/02.jpg"], ["caterpillar", "images/moodboard/caterpillar/02.jpg"], ["caterpillar", "images/moodboard/caterpillar/03.jpg"], ["twig", "images/moodboard/twig/02.jpg"], ]; /* A few looping clips, woven through the board to break the rhythm of stills. Muted, autoplay only while on-screen, light footprint. */ const COLLECTION_VIDEOS = [ ["autobahn", "images/moodboard/autobahn/03.mp4"], ["cocoon", "images/moodboard/cocoon/01.mp4"], ["pipeline", "images/moodboard/pipeline/03.mp4"], ["volar", "images/moodboard/volar/02.mp4"], ["s1", "images/moodboard/s1/02.mp4"], ["caterpillar", "images/moodboard/caterpillar/04.mp4"], ]; /* Build the full moodboard set: curated collection imagery first, then every project's hero + gallery photography pulled live from the PROJECTS registry (so new projects flow in automatically). De-duped. */ function buildMoodboardItems() { const items = []; const seen = new Set(); const seenName = new Set(); const push = (slug, image, media) => { if (!image || seen.has(image)) return; if (media !== "video" && !/\.(webp|jpe?g|png)$/i.test(image)) return; // De-dupe by full path. (Filename-only dedup is unsafe now that images are // organised into per-slug folders with sequential names — every slug has an // "01.webp", so a filename key would collide across collections.) seen.add(image); items.push({ slug, image, media: media || "image" }); }; try { const colVids = (typeof COLLECTION_VIDEOS !== "undefined" && COLLECTION_VIDEOS) || []; colVids.forEach(([slug, image]) => push(slug, image, "video")); const colImgs = (typeof COLLECTION_IMAGES !== "undefined" && COLLECTION_IMAGES) || []; colImgs.forEach(([slug, image]) => push(slug, image)); const projs = (window && window.PROJECTS) || []; projs.forEach((p) => { if (!p) return; const slug = (p.collections && p.collections[0] && p.collections[0].slug) || "all"; // Only pull real project photography. Images under assets/collections/ // are generic catalogue placeholders used as stand-in heroes by // un-photographed projects — skipping them removes board double-ups. const pushProj = (src) => { if (src && src.indexOf("assets/collections/") !== 0) push(slug, src); }; const heroes = Array.isArray(p.hero) ? p.hero : (p.hero ? [p.hero] : []); heroes.forEach((h) => pushProj(h)); const gallery = Array.isArray(p.gallery) ? p.gallery : []; gallery.forEach((g) => g && pushProj(g.src)); }); // Manifest-driven: include anything dropped into images/moodboard// // (full-path dedup above skips images already shown). Run // `node generate-manifests.js` after adding files. if (window.IMG && window.IMG.moodboardAll) { window.IMG.moodboardAll().forEach(([slug, src, type]) => push(slug, src, type === "video" ? "video" : "image")); } } catch (e) { /* never let the board crash the page */ } // Deterministic round-robin interleave: group by collection, then emit one // image from each collection in rotation. Collections are never clustered, // and the order is STABLE across loads — so position-based review comments // stay pinned to the same image. const bySlug = new Map(); items.forEach((it) => { if (!bySlug.has(it.slug)) bySlug.set(it.slug, []); bySlug.get(it.slug).push(it); }); const queues = [...bySlug.values()]; const woven = []; let added = true; while (added) { added = false; for (const q of queues) { if (q.length) { woven.push(q.shift()); added = true; } } } // Spread videos evenly across the whole board (with the first landing on the // opening page). Each video is the first item of its collection queue, so the // round-robin above emits them all in the first pass — clustering them top-left. const vids = woven.filter((it) => it.media === "video"); if (vids.length) { const imgs = woven.filter((it) => it.media !== "video"); const n = imgs.length, k = vids.length; const targets = new Map(); for (let j = 0; j < k; j++) targets.set(Math.round((j + 0.4) * n / k), vids[j]); const out = []; imgs.forEach((it, i) => { if (targets.has(i)) out.push(targets.get(i)); out.push(it); }); // any not placed (e.g. n < k) get appended let placed = out.filter((x) => x.media === "video").length; while (placed < k) out.push(vids[placed++]); return out; } return woven; } /* Built once at module load — Moodboard.jsx loads after Projects.jsx, so window.PROJECTS is already populated. */ const MB_ITEMS_ALL = buildMoodboardItems(); /* ------------------------------------------------------------------ */ /* Tile */ /* ------------------------------------------------------------------ */ function MoodVideo({ src, hover }) { const ref = useRefMB(null); useEffectMB(() => { const v = ref.current; if (!v) return; const obs = new IntersectionObserver((entries) => { entries.forEach((en) => { if (en.isIntersecting) { v.play().catch(() => {}); } else { try { v.pause(); } catch (e) {} } }); }, { threshold: 0.25 }); obs.observe(v); return () => obs.disconnect(); }, []); return (