/** App root */
const Nav = () => {
const [scrolled, setScrolled] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 24);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
);
};
const App = () => {
// Reveal on scroll
React.useEffect(() => {
const els = document.querySelectorAll(".reveal");
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add("in");
io.unobserve(e.target);
}
});
}, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
els.forEach((el) => io.observe(el));
return () => io.disconnect();
}, []);
// Parallax for hero bg + orbs
React.useEffect(() => {
const onScroll = () => {
const y = window.scrollY;
const heroBg = document.querySelector(".hero-bg");
if (heroBg) heroBg.style.transform = `translateY(${y * 0.3}px)`;
document.querySelectorAll(".orb").forEach((o, i) => {
o.style.transform = `translateY(${y * (i % 2 ? -0.08 : 0.12)}px)`;
});
};
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
<>
);
};
ReactDOM.createRoot(document.getElementById("root")).render();