/* ═══════════════ Closink Landing · APP (route spine + assembly + mount) ═══════════════ */
/* ════ ROUTE-THREAD SPINE — draws itself on scroll, threads the whole page ════ */
const RouteSpine = () => {
const X = 70, AMP = 30, SEG = 240;
const [h, setH] = useState(0);
const [stops, setStops] = useState([]);
const [activeY, setActiveY] = useState(0);
const pathRef = useRef(null);
const drawRef = useRef(null);
const dotRef = useRef(null);
const dotGlowRef = useRef(null);
const lenRef = useRef(0);
const measure = useCallback(() => {
const page = document.getElementById('page');
if (!page) return;
setH(page.scrollHeight);
const els = Array.from(document.querySelectorAll('[data-stop]'));
setStops(els.map((e) => {
const top = e.getBoundingClientRect().top + window.scrollY;
return { y: Math.round(top + 90), n: e.getAttribute('data-stop'), label: e.getAttribute('data-stop-label') };
}));
}, []);
useEffect(() => {
measure();
const ro = new ResizeObserver(measure);
const page = document.getElementById('page');
if (page) ro.observe(page);
window.addEventListener('resize', measure);
const timers = [setTimeout(measure, 400), setTimeout(measure, 1200), setTimeout(measure, 2400)];
return () => { ro.disconnect(); window.removeEventListener('resize', measure); timers.forEach(clearTimeout); };
}, [measure]);
// build weaving path
let d = `M ${X} 0`;
let toggle = 1;
for (let y = SEG; y <= h; y += SEG) {
const cx = X + AMP * toggle;
d += ` Q ${cx} ${y - SEG / 2} ${X} ${Math.min(y, h)}`;
toggle *= -1;
}
const draw2Ref = useRef(null);
useEffect(() => {
if (!pathRef.current) return;
const len = pathRef.current.getTotalLength();
lenRef.current = len;
[drawRef.current, draw2Ref.current].forEach((el) => {
if (el) { el.style.strokeDasharray = len; el.style.strokeDashoffset = len; }
});
}, [d, h]);
useEffect(() => {
let raf = 0;
const update = () => {
raf = 0;
const max = document.documentElement.scrollHeight - window.innerHeight;
const p = max > 0 ? Math.min(1, Math.max(0, window.scrollY / max)) : 0;
const len = lenRef.current;
const off = len * (1 - p);
if (drawRef.current && len) drawRef.current.style.strokeDashoffset = off;
if (draw2Ref.current && len) draw2Ref.current.style.strokeDashoffset = off;
if (pathRef.current && len) {
const pt = pathRef.current.getPointAtLength(len * p);
if (dotRef.current) dotRef.current.setAttribute('transform', `translate(${pt.x} ${pt.y})`);
if (dotGlowRef.current) dotGlowRef.current.setAttribute('transform', `translate(${pt.x} ${pt.y})`);
}
setActiveY(window.scrollY + window.innerHeight * 0.5);
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
update();
window.addEventListener('scroll', onScroll, { passive: true });
return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
}, [d, stops]);
return (
);
};
/* ════ scroll progress bar ════ */
const Progress = () => {
const ref = useRef(null);
useEffect(() => {
let raf = 0;
const upd = () => {
raf = 0;
const max = document.documentElement.scrollHeight - window.innerHeight;
const p = max > 0 ? window.scrollY / max : 0;
if (ref.current) ref.current.style.transform = `scaleX(${p})`;
};
const on = () => { if (!raf) raf = requestAnimationFrame(upd); };
upd(); window.addEventListener('scroll', on, { passive: true });
return () => { window.removeEventListener('scroll', on); if (raf) cancelAnimationFrame(raf); };
}, []);
return (
);
};
/* ════ APP ════ */
const App = () => (
);
ReactDOM.createRoot(document.getElementById('root')).render();