// Persistent "live system" backdrop visible behind every section.
// Parallax scroll, animated flow lines, drifting event chips (tickets,
// incidents, logins, trends, releases). Position fixed, z-index 0.
//
// EDIT: tune density, speed, and event chips below.
function Backdrop() {
const ref = React.useRef(null);
// Parallax: backdrop scrolls SLOWER than content (translateY negative)
React.useEffect(() => {
let raf = 0;
function update() {
if (ref.current) {
// Backdrop moves at 0.35x scroll speed (in opposite direction visually,
// since we want to see "more system" as you scroll down)
const y = window.scrollY;
ref.current.style.transform = `translate3d(0, ${y * -0.35}px, 0)`;
}
raf = 0;
}
function onScroll() {
if (!raf) raf = requestAnimationFrame(update);
}
window.addEventListener('scroll', onScroll, { passive: true });
update();
return () => { window.removeEventListener('scroll', onScroll); cancelAnimationFrame(raf); };
}, []);
return (
{/* base grid that scrolls with parallax */}
{/* The big n8n-style system canvas. Stretches vertically for several screens. */}
{/* ============ EVENT CHIPS — drifting tickets, incidents, logins ============ */}
{/* Static vignette — does NOT parallax, keeps edges dark */}
);
}
/* ---- helpers ---- */
function FlowChain({ y, nodes }) {
return (
{/* connecting line */}
{/* nodes */}
{nodes.map((n, i) => (
{n.label}
))}
);
}
function FlowLabel({ x, y, text }) {
return (
{text.toUpperCase()}
);
}
function EventChip({ kind, x, y, text, pill = 'ok', trend }) {
return (