// ScrollRail.jsx — left-side section progress rail (v4 design language). // // Fixed at mid-left: one tick per home section, the active tick stretched and // orange, a rotated mono "Scroll" label beneath. Flips to ink once the cream // zone (Foundations teaser) reaches mid-viewport — same boundary the nav // watches. Desktop + home page only; sections are resolved by element id so // the rail needs no wiring into the sections themselves. const RAIL_SECTIONS = [ { id: 'home-hero', label: 'Intro' }, { id: 'home-reel', label: 'Work' }, { id: 'site-footer', label: 'Contact' }, ]; const ScrollRail = () => { const isMobile = (window.useIsMobile || (() => false))(820); const [active, setActive] = React.useState(0); const [light, setLight] = React.useState(false); const [inMounted, setInMounted] = React.useState(false); React.useEffect(() => { if (isMobile) return; const t = setTimeout(() => setInMounted(true), 500); const update = () => { const mid = window.scrollY + window.innerHeight * 0.4; let a = 0; RAIL_SECTIONS.forEach((sec, i) => { const el = document.getElementById(sec.id); if (el && el.offsetTop <= mid) a = i; }); setActive(a); // Flip to ink when the cream zone (footer) reaches mid-viewport. const cream = document.getElementById('site-footer'); setLight(cream ? cream.getBoundingClientRect().top < window.innerHeight * 0.5 : false); }; update(); window.addEventListener('scroll', update, { passive: true }); window.addEventListener('resize', update); return () => { clearTimeout(t); window.removeEventListener('scroll', update); window.removeEventListener('resize', update); }; }, [isMobile]); if (isMobile) return null; const idle = light ? 'rgba(20,33,28,0.18)' : 'rgba(242,239,230,0.18)'; const labelC = light ? 'rgba(20,33,28,0.45)' : 'rgba(242,239,230,0.45)'; // Portal to : the page wrapper's enter animation retains a CSS // transform, which makes any `position: fixed` descendant scroll with the // page (a transformed ancestor becomes its containing block). Rendering // outside that wrapper keeps the rail truly fixed on screen. return ReactDOM.createPortal( , document.body ); }; window.ScrollRail = ScrollRail;