// Home — split-screen layout: thumbnails/emojis on left, project list on right.
// Hover a project → corresponding image fades in on left.
// Idle → emojis fade in on left. Hover an emoji → small caption card.
const { useState, useEffect, useLayoutEffect, useRef, useCallback } = React;
function ProjectThumb({ project, active }) {
// Apple-style: spring-y scale + opacity crossfade
// A real photo: project.img. If the file is missing, fall back to the gradient
// placeholder rather than rendering a blank/broken image.
const [imgFailed, setImgFailed] = useState(false);
const imgPath = project.img || null;
useEffect(() => {
setImgFailed(false);
if (!imgPath) return;
const probe = new Image();
probe.onerror = () => setImgFailed(true);
probe.src = imgPath;
}, [imgPath]);
const imgSrc = imgFailed ? null : imgPath;
// Video thumbs: restart from frame 0 each time the project is hovered, and
// crossfade the loop seam (fade out over the last moment, fade back in on
// restart) so the jump-cut isn't jarring.
const vidRef = useRef(null);
const [vidFade, setVidFade] = useState(1);
const FADE = 0.45; // seconds of fade at the loop seam
useEffect(() => {
const v = vidRef.current;
if (!v || !project.video) return;
const start = project.videoStart || 0;
if (active) {
setVidFade(0);
try {v.currentTime = start;} catch (e) {}
const p = v.play();
if (p && p.catch) p.catch(() => {});
// fade in on the next frame so the 0 → 1 transition animates
requestAnimationFrame(() => setVidFade(1));
} else {
v.pause();
setVidFade(1);
}
}, [active, project.video]);
const onTimeUpdate = () => {
const v = vidRef.current;
if (!v || !v.duration || !isFinite(v.duration)) return;
const start = project.videoStart || 0;
// Native loop restarts at 0; re-seek so the trimmed intro stays skipped.
if (start > 0 && v.currentTime < start - 0.15) {
try {v.currentTime = start;} catch (e) {}
return;
}
const left = v.duration - v.currentTime;
setVidFade(left < FADE ? Math.max(0, left / FADE) : 1);
};
const onSeekedOrPlay = () => {
const v = vidRef.current;
const start = project.videoStart || 0;
if (v && v.currentTime - start < FADE) setVidFade(1);
};
return (
{project.video ?
(() => {
const vid =
;
// Optional browser chrome, matching the case-study figures.
if (project.videoFrame && window.BrowserFrame) {
return (
{vid}
);
}
return vid;
})() :
imgSrc ?
setImgFailed(true)}
style={
// `inset` thumbs sit as a smaller rounded card inside the panel
// instead of bleeding to the edges.
project.imgInset ?
{
width: "68%",
maxHeight: "62%",
objectFit: "cover",
borderRadius: 16,
display: "block",
boxShadow: "0 18px 40px rgba(0,0,0,0.10)"
} :
// `fullWidth` fits the whole image to the panel width, no cropping.
project.imgFullWidth ?
{
width: "100%",
height: "auto",
maxHeight: "100%",
objectFit: "contain",
display: "block"
} :
{
width: "100%",
height: "100%",
objectFit: "cover",
display: "block"
}} /> :
[ {project.title} preview ]
}
);
}
function CompanyLink({ href, children }) {
// No resting underline — the purple carries the affordance. The underline
// only appears on hover/focus, and uses text-decoration (not a border) so it
// follows the text if a name wraps. nowrap keeps two-word names intact.
return (
{
e.currentTarget.style.textDecorationColor = "var(--accent)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.textDecorationColor = "transparent";
}}
onFocus={(e) => {
e.currentTarget.style.textDecorationColor = "var(--accent)";
}}
onBlur={(e) => {
e.currentTarget.style.textDecorationColor = "transparent";
}}>
{children}
);
}
function EmojiCloud({ visible, hoveredId, onHover, onOpenMisc }) {
// Warm the browser cache for every hover photo once, on mount — so the first
// hover paints instantly instead of waiting on a network fetch.
useEffect(() => {
(window.EMOJIS || []).forEach((e) => {
if (!e.img) return;
const pre = new Image();
pre.src = e.img;
});
}, []);
// Scattered, organic placement — staggered both horizontally and vertically,
// varied sizes and rotations. Per Figma the emoji frame is a tall narrow
// column (~228 × 526), so we emulate that with a vertical stack that has
// intentional left/right offsets to feel hand-placed.
// Scattered (not a straight line), smaller. Positioned as % within a fixed
// cluster box that is itself flex-centered in the panel's photo area below
// the nav — so the whole group reads as vertically centered.
const positions = [
{ left: "8%", top: "0%", size: 64, rot: -8 }, // upper-left
{ left: "58%", top: "2%", size: 76, rot: 6 }, // upper-right (bigger)
{ left: "30%", top: "27%", size: 70, rot: 4 }, // center
{ left: "80%", top: "33%", size: 58, rot: -5 }, // right (smaller)
{ left: "2%", top: "56%", size: 72, rot: 7 }, // lower-left (bigger)
{ left: "42%", top: "64%", size: 64, rot: -9 }, // lower-center
{ left: "78%", top: "78%", size: 60, rot: 8 }, // lower-right
// Anchored by `bottom` (not `top`) so its box can never spill past the
// cluster and collide with the hint text below it.
{ left: "6%", bottom: "2%", size: 74, rot: -6 }]; // bottom-left
const hoveredEmoji = hoveredId !== null ? window.EMOJIS[hoveredId] : null;
const hoveredPos = hoveredId !== null ? positions[hoveredId] : null;
return (
{/* Fixed-aspect cluster box: emojis are positioned by % within this,
and the box is centered in the area above. */}
);
}
function EmojiCard({ emoji, anchor }) {
const cardRef = React.useRef(null);
const [adj, setAdj] = useState({ dx: 0, dy: 0 });
// If an `img` path fails to load, fall back to the striped placeholder so the
// card matches the emojis that have no photo yet (instead of a broken image).
const [imgFailed, setImgFailed] = useState(false);
const imgPath = emoji && emoji.img;
useEffect(() => {
setImgFailed(false);
if (!imgPath) return;
const probe = new Image();
probe.onerror = () => setImgFailed(true);
probe.src = imgPath;
}, [imgPath]);
if (!emoji) return null;
const shownImg = imgFailed ? null : emoji.img;
const anchorLeftNum = parseFloat(anchor.left);
// Bottom-anchored emojis carry `bottom` instead of `top`; convert so the card
// math below has a single top-based coordinate to work from.
const anchorTopNum = anchor.top != null ?
parseFloat(anchor.top) :
100 - parseFloat(anchor.bottom) - anchor.size / 4.26;
// Default: bubble appears DIRECTLY BELOW the emoji. Flip ABOVE only when the
// emoji sits low enough that a below-bubble would be clipped at the bottom.
const showAbove = anchorTopNum > 60;
// Center the card horizontally on the emoji; place above or below it.
const cardLeft = `calc(${anchorLeftNum}% + ${anchor.size / 2}px)`;
const cardTop = showAbove ?
`calc(${anchorTopNum}% - 10px)` :
`calc(${anchorTopNum}% + ${anchor.size}px + 10px)`;
const baseTransform = showAbove ? "translate(-50%, -100%)" : "translate(-50%, 0)";
// After mount, measure the card against the PANEL it lives in and nudge it
// back inside if any edge would be clipped — so the bubble is never cut off.
// The cardIn animation is opacity-only, so the inline centering transform is
// intact during measurement and getBoundingClientRect reads the final box.
React.useLayoutEffect(() => {
const clamp = () => {
const el = cardRef.current;
if (!el) return;
const panel = el.closest("[data-left-panel]");
const pr = panel ?
panel.getBoundingClientRect() :
{ left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
const r = el.getBoundingClientRect();
const m = 12;
// r already includes any current dx/dy, so compute the additional delta.
let ddx = 0,ddy = 0;
if (r.left < pr.left + m) ddx += pr.left + m - r.left;
if (r.right > pr.right - m) ddx -= r.right - (pr.right - m);
if (r.top < pr.top + m) ddy += pr.top + m - r.top;
if (r.bottom > pr.bottom - m) ddy -= r.bottom - (pr.bottom - m);
if (Math.abs(ddx) > 0.5 || Math.abs(ddy) > 0.5) {
setAdj((prev) => ({ dx: prev.dx + ddx, dy: prev.dy + ddy }));
}
};
clamp();
// Re-clamp after the opacity animation settles, as a safety net.
const t = setTimeout(clamp, 300);
return () => clearTimeout(t);
}, [emoji, anchor.left, anchor.top, anchor.size]);
return (
{emoji.video ?
:
shownImg ?
:
photo · {emoji.char}
}
{emoji.title}
{emoji.body}
{/* Signals that the emoji itself is clickable. */}
Click to see more →
);
}
function ProjectRow({ project, hovered, onHover, onOpen, isMobile }) {
if (isMobile) {
return (
);
}
const active = hovered === project.id;
return (
);
}
function FitColumn({ children }) {
const ref = useRef(null);
const [scale, setScale] = useState(1);
// Bounds for the fit. Upscaling is capped well below the point where the
// layout would start to look inflated on a very tall monitor.
const MIN_SCALE = 0.5;
const MAX_SCALE = 1.16;
const clampScale = (v) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, v));
// Fit the column to the panel: scale DOWN when the content overflows and UP
// when there's spare height, so the right side reads at a proportional size on
// both a 14" laptop and a large external monitor. Bounded so it never gets
// absurd, and gated on fonts.ready — measuring with the fallback font (taller
// metrics) caused a brief shrink-then-restore flash on load.
useLayoutEffect(() => {
let cancelled = false;
let raf = 0;
const measure = () => {
if (cancelled) return;
const el = ref.current;
if (!el) return;
const panel = el.closest("[data-fit-panel]");
if (!panel) return;
const cs = getComputedStyle(panel);
let avail = panel.clientHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);
const wrap = el.parentElement;
// Clear any reserve left by a previous run BEFORE measuring — a stale
// inline height on the wrapper skews how `el` lays out and makes the
// refinement loop converge on a scale that overflows the region.
if (wrap) wrap.style.height = "";
// Neutralize any applied transform/width before probing, so candidate
// measurements below start from a clean, scale-independent layout.
const prevTransform = el.style.transform;
const prevWidth = el.style.width;
// Restore whatever React last rendered. MUST run on every exit path — a
// bail-out that left `transform:none; width:100%` glued on inline would
// override React's rendered scale with no re-render to undo it.
const restore = () => {
el.style.transform = prevTransform;
el.style.width = prevWidth;
};
el.style.transform = "none";
el.style.width = "100%";
// Guard against measuring before layout has settled (panel not yet at
// full height) — a zero/tiny panel would wrongly compute a small scale.
// Retry shortly so a bail here can never be the final word.
if (avail < 80) {restore();retry();return;}
// Aim well inside the panel so the column keeps real breathing room
// rather than nearly filling it (which reads as "too big").
const fitTarget = avail * 0.9;
// `width: 100/s%` couples the measurement to the scale being solved for:
// a larger s means a NARROWER box, so text rewraps to more lines and the
// measured height GROWS. painted(s) is therefore non-monotonic, and a
// fixed-point iteration lands in whichever basin its first guess falls
// into — which produced two stable answers (one overflowing, one
// under-filling) for identical input depending on event timing.
//
// Bisection instead: probe candidates directly and keep the LARGEST scale
// whose ACTUAL painted height fits. Deterministic for a given input, so
// the result no longer varies machine to machine.
const paintedAt = (cand) => {
el.style.width = cand !== 1 ? `${(100 / cand).toFixed(3)}%` : "100%";
return el.scrollHeight * cand;
};
el.style.transform = "none"; // measure layout height only
let s;
let painted;
if (paintedAt(MAX_SCALE) <= fitTarget) {
s = MAX_SCALE; // even the largest allowed scale fits
} else if (paintedAt(MIN_SCALE) > fitTarget) {
s = MIN_SCALE; // nothing in range fits; floor it
} else {
let lo = MIN_SCALE; // known to fit
let hi = MAX_SCALE; // known not to fit
for (let i = 0; i < 16 && hi - lo > 0.002; i++) {
const mid = (lo + hi) / 2;
if (paintedAt(mid) <= fitTarget) lo = mid;else
hi = mid;
}
s = lo;
}
// Snap to exactly 1 when the transform wouldn't be perceptible.
if (Math.abs(s - 1) < 0.004) s = 1;
// Final measure in the state we'll actually render.
painted = paintedAt(s) / s;
// Safety net: never reserve more than the region can show.
if (painted * s > avail) {
s = clampScale(avail / painted);
painted = paintedAt(s) / s;
}
// Restore whatever React last rendered; the state update below re-applies.
restore();
setScale((prev) => Math.abs(prev - s) > 0.004 ? s : prev);
// Reserve the height the element actually PAINTS at this scale, and never
// more than the region can show, so content can't be clipped out of reach.
if (wrap) wrap.style.height = s !== 1 ? `${Math.min(Math.ceil(painted * s), Math.floor(avail))}px` : "";
};
// Measure on the next frame(s) so layout + first paint have happened.
// Trailing-edge debounce: a new trigger must NOT cancel an already-pending
// measurement outright, or a burst of ResizeObserver callbacks during
// font/layout settle can starve it and leave `scale` stuck at 1 forever.
let pending = false;
const measureSoon = () => {
if (pending) return; // one is already queued — it will pick up latest layout
pending = true;
raf = requestAnimationFrame(() => requestAnimationFrame(() => {
pending = false;
measure();
}));
};
// Re-arm after an unsettled-layout bail so the fit always resolves.
let retryTimer = 0;
const retry = () => {
clearTimeout(retryTimer);
retryTimer = setTimeout(() => {if (!cancelled) measureSoon();}, 120);
};
// Defer the first fit decision until fonts are ready (avoids fallback-metric flicker).
if (document.fonts && document.fonts.ready) {
document.fonts.ready.then(() => {if (!cancelled) measureSoon();});
} else {
setTimeout(measureSoon, 300);
}
// Re-measure once everything (images/layout) has fully loaded.
window.addEventListener("load", measureSoon);
window.addEventListener("resize", measure);
// A ResizeObserver catches late layout changes (the same settle a manual
// zoom toggle forces) so the initial scale is correct without user action.
let ro = null;
const el0 = ref.current;
const panel0 = el0 && el0.closest("[data-fit-panel]");
if (typeof ResizeObserver !== "undefined" && panel0) {
// Measure directly (like `resize`) rather than through the debounce, so a
// late panel-height change always produces a measurement.
ro = new ResizeObserver(() => {if (!cancelled) measure();});
ro.observe(panel0);
}
// Belt-and-braces: a few spaced measurements across the mount window catch
// any settle that slips between fonts.ready, load, and the observer.
const settleTimers = [80, 260, 600, 1200].map((ms) =>
setTimeout(() => {if (!cancelled) measure();}, ms)
);
return () => {
cancelled = true;
cancelAnimationFrame(raf);
clearTimeout(retryTimer);
settleTimers.forEach(clearTimeout);
window.removeEventListener("load", measureSoon);
window.removeEventListener("resize", measure);
if (ro) ro.disconnect();
};
}, []);
return (