// Merilum main app
// ----------------
const { useEffect: useEffect_, useRef: useRef_, useState: useState_ } = React;
/* ---------- Header ---------- */
const MERILUM_LOGO = "assets/merilum-logo.svg";
// Inline M-glyph — renders with currentColor so it inherits from the logo
// squircle's color. `size` is any CSS length (e.g. "30px" or "calc(...)").
const MerilumGlyph = ({ size = '24px' }) => (
);
const Header = ({ pastWave, pillRevealed }) => {
const [menuOpen, setMenuOpen] = useState_(false);
const [scrolled, setScrolled] = useState_(false);
const [isMobile, setIsMobile] = useState_(
typeof window !== 'undefined' ? window.innerWidth <= 640 : false
);
useEffect_(() => {
const onResize = () => setIsMobile(window.innerWidth <= 640);
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, []);
useEffect_(() => {
if (!pillRevealed) setMenuOpen(false);
}, [pillRevealed]);
useEffect_(() => {
const onScroll = () => {
setScrolled(window.scrollY > 12);
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
// Header is now ABOVE all content (zIndex 100). It's split visually into
// two squircle-shaped pills:
// 1. Logo squircle on the left (always solid ink, glyph reversed white).
// 2. Nav pill on the right containing Press / Projects / Research +
// hamburger button. Reads as one coherent grouped object.
//
// Nav pill reveal model:
// - Above the wave: pill is HIDDEN (opacity 0, non-interactive). This
// gives a quiet hero with just the logo as chrome — same visual effect
// as the previous mix-blend-mode experiment, but WITHOUT the per-frame
// composite cost of `mix-blend-mode`.
// - Past the wave: pill reveals via opacity + color transition. Ink
// text on OPAQUE PAPER fill with ink border. Opaque fill is critical
// so canvas circles (behind) can't be seen through the pill — even
// though z-index puts the pill above, a transparent fill would let
// circles bleed visually through the empty interior.
const pillVisible = pillRevealed;
const pillBg = 'var(--paper)';
const pillInk = 'var(--ink)';
const pillBorder = 'var(--ink)';
return (
{/* Dropdown — flips color state with scroll, like the pill above.
On mobile we prepend Press/Projects/Research (since the pill hides
those labels), and on desktop we omit Research (avoids duplicate). */}
);
/* ---------- Sticky canvas background ---------- */
const AnimationBackground = ({ sceneRef, pastWave }) => {
const canvasRef = useRef_(null);
const stageRef = useRef_(null);
useEffect_(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const stage = window.InversionEngine.createStage(canvas);
stageRef.current = stage;
const scene = window.createHeroScene();
sceneRef.current = scene;
stage.addScene(scene);
stage.start();
return () => { stage.destroy(); };
}, []);
// Canvas base is permanently ink. The wave shape, drawn white with
// 'difference' compositing, becomes paper where it covers — creating
// the upper-ink / lower-paper visual divide WITHIN the same frame.
// Circles drawn on top: white against ink → inverts to paper (white
// circles in upper half), white against paper → inverts to ink (black
// circles in lower half). One scene, two zones, zero scroll triggers.
useEffect_(() => {
const stage = stageRef.current;
if (!stage) return;
stage.setBaseColor('#0a0a0a');
}, []);
return (
);
};
/* ---------- Hero text ----------
* Source-of-truth for the headline. Easy to swap for i18n later.
*/
/**
* HERO_TITLE_LINES
*
* Each entry is one rendered line. The `align` field controls horizontal
* alignment WITHIN the h1's left-aligned block — default 'left', override
* to 'center' for the isolated em-dash line. Breaking the em-dash onto its
* own centered line gives it a rhythm-beat role instead of reading as
* trailing punctuation on line 1.
*
* Source-of-truth for the headline. Easy to swap for i18n later.
*/
const HERO_TITLE_LINES = [
{ text: "It's what we can't see", align: 'center' },
{ text: "—", align: 'center' },
{ text: "the answer is always", align: 'center' },
{ text: "under the surface.", align: 'center' },
];
// WebKit detection — covers ALL browsers that use WebKit and therefore
// share Safari's mix-blend-mode-across-stacking-contexts limitation:
// • Desktop Safari (macOS)
// • iOS Safari
// • Chrome / Firefox / Edge / Brave on iOS (all forced to WebKit by Apple)
// • iPadOS Safari (which masquerades as MacIntel + touch)
// Explicitly excludes Chromium-on-Mac (UA contains "Safari" because of
// historical reasons but it's actually Blink, which blends correctly).
const isWebKit = (() => {
if (typeof navigator === 'undefined') return false;
const ua = navigator.userAgent || '';
const iOS =
/iPad|iPhone|iPod/.test(ua) ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
const desktopSafari =
/Safari/.test(ua) && !/Chrome|Chromium|Edg|OPR/.test(ua);
return iOS || desktopSafari;
})();
const Hero = () => {
// Hero h1 inversion strategy varies by engine:
//
// Blink / Gecko (Chrome, Firefox, Edge desktop):
// mix-blend-mode: difference does true per-pixel inversion against
// the canvas circles below. Cross-stacking-context blending works.
//
// WebKit (Safari + all iOS browsers):
// mix-blend-mode refuses to blend across stacking contexts. Rather
// than fight it, we keep the text plain white and add a thin INK
// STROKE (text-stroke). The stroke gives the headline enough edge
// definition to stay legible against any backdrop the canvas might
// paint underneath: white wave, white circles, or ink zones — the
// stroke separates the white text from white shapes, the white fill
// keeps it readable on ink. Pragmatic fallback, no JS, no perf cost.
const h1Style = {
margin: 0,
// Responsive sizing that REALLY fits on small screens.
// • Floor (22px): low enough that ~390-414px portrait phones still
// fit the longest line ("the answer is always") without overflow.
// Previous floor of 36px was overriding the vw-based value on
// narrow viewports and forcing horizontal overflow.
// • Slope (7vw): tracks viewport width so the headline scales
// smoothly up through mid-size screens.
// • Ceiling (80px): caps growth on wide desktops.
fontSize: 'clamp(22px, 7vw, 80px)',
fontWeight: 700,
letterSpacing: '-0.03em',
lineHeight: 1.02,
color: '#ffffff',
// No textWrap: 'balance' — lines are now explicitly split per entry in
// HERO_TITLE_LINES with their own textAlign, so we don't want the
// browser redistributing words across block spans.
...(isWebKit
? {
// Stroke entirely OUTSIDE the glyph so the letterform itself stays
// pixel-identical to the unstroked version. Mechanism:
// • -webkit-text-stroke is centered on the path by default
// (half inside, half outside the glyph outline).
// • paint-order: stroke fill paints the stroke FIRST, then the
// fill ON TOP — so the inner half of the stroke is hidden by
// the fill, leaving only the outer half visible.
// • Doubling the stroke width (10px → visual 5px outside)
// compensates for that hidden inner half.
WebkitTextStroke: '10px var(--ink)',
paintOrder: 'stroke fill',
}
: {
mixBlendMode: 'difference',
}),
};
return (
{/*
Each line is rendered as its own block inside the h1 so that
per-line textAlign works. Default align is 'left' (the headline's
natural orientation — text reads left-to-right within the
centered block); override to 'center' for the em-dash line so it
floats on its own axis. Line-break handling is implicit via
block layout — no needed.
*/}
);
/* ---------- Footer ---------- */
//
// Two visual modes, branched on engine:
//
// • Blink/Gecko: white text in a wrapper with mix-blend-mode: difference,
// which inverts against the underlying canvas (whatever its color
// happens to be where the footer sits). Includes the logo squircle.
//
// • WebKit (Safari + all iOS): difference-blend doesn't reach across to
// the canvas in the same way, so on iOS the footer text was rendering
// as gray-on-near-white (illegible). Switch to plain ink-on-transparent
// (no blend, no logo squircle) — content reads straight against the
// ink page background. Logo is dropped because it becomes redundant
// with the header logo glyph on this short-circuit path.
const Footer = () => {
const webkit = isWebKit;
const textColor = webkit ? 'var(--ink)' : '#ffffff';
const linkColor = webkit ? 'var(--ink)' : '#fafaf7';
const dividerColor = webkit ? 'rgba(0,0,0,0.12)' : 'rgba(255,255,255,0.12)';
return (
);
};
const FooterCol = ({ title, items, linkColor }) => (
);
/* ---------- App ---------- */
// Shared scroll state — TWO independent thresholds:
// - pastWave (45% viewH): logo glyph flips color (paper → ink) so it
// stays readable as content scrolls into view. Earlier trigger because
// the visual need (logo contrast) hits as soon as paper content
// reaches the header zone.
// - pillRevealed (85% viewH): nav pill fades in. Later trigger because
// it's a discrete UI element and shouldn't appear until the user has
// clearly committed to scrolling past the hero.
const useScrollState = () => {
const [pastWave, setPastWave] = useState_(false);
const [pillRevealed, setPillRevealed] = useState_(false);
useEffect_(() => {
const onScroll = () => {
const y = window.scrollY;
const vh = window.innerHeight;
setPastWave(y > vh * 0.45);
setPillRevealed(y > vh * 0.70);
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
return { pastWave, pillRevealed };
};
const App = () => {
const sceneRef = useRef_(null);
const { pastWave, pillRevealed } = useScrollState();
// Body background ALWAYS matches the canvas base (ink). The visual
// Body background ALWAYS matches the canvas base (ink). The visual
// black/white divide on the page is created entirely by the wave silhouette
// inside the canvas — not by toggling page bg with scroll. This way the
// hero zone (above wave = ink) and content zone (below wave = paper-via-
// difference) coexist in every frame, scroll-independently.
useEffect_(() => {
document.body.style.background = 'var(--ink)';
}, []);
return (