// Beautification additions: floating nav, scroll indicator,
// scroll-discover hint, ambient mesh.
const { useState, useEffect } = React;
// ─── Floating frosted nav pill on scroll ─────────────────────────────
function FloatingNav() {
const [shown, setShown] = useState(false);
useEffect(() => {
const onScroll = () => setShown(window.scrollY > 600);
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
);
}
// ─── Side scroll dots ────────────────────────────────────────────────
function SideRail() {
const [labels, setLabels] = useState([]);
const [active, setActive] = useState(0);
useEffect(() => {
const update = () => {
const els = Array.from(document.querySelectorAll('[data-screen-label]'));
const list = els.map(el => ({ id: el.getAttribute('data-screen-label'), top: el.getBoundingClientRect().top + window.scrollY }));
setLabels(list);
};
update();
window.addEventListener('resize', update);
const onScroll = () => {
const y = window.scrollY + window.innerHeight * 0.35;
const els = Array.from(document.querySelectorAll('[data-screen-label]'));
let cur = 0;
els.forEach((el, i) => {
const top = el.getBoundingClientRect().top + window.scrollY;
if (y >= top) cur = i;
});
setActive(cur);
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', update); };
}, []);
if (labels.length === 0) return null;
return (
{labels.map((l, i) => (
))}
);
}
// ─── Scroll-discover hint below hero ─────────────────────────────────
function ScrollHint() {
const [hidden, setHidden] = useState(false);
useEffect(() => {
const onScroll = () => setHidden(window.scrollY > 200);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
);
}
// ─── Ambient drifting mesh behind hero ───────────────────────────────
function HeroMesh() {
return (
);
}
Object.assign(window, { FloatingNav, SideRail, ScrollHint, HeroMesh });