// how-it-works.jsx — Sticky scroll-driven 3-step map journey
//
// Section is 3 viewport-heights tall. Inside: a single sticky map + compass
// HUD that stay in view while step overlays scroll across them.
//
// Steps (driven by scroll progress 0..1):
// 0.00 - 0.33 STEP 1 · MARK YOUR TARGET (zoom in on Yosemite hex)
// 0.33 - 0.66 STEP 2 · WATCH (pull back, ping waves)
// 0.66 - 1.00 STEP 3 · ALERT (zoom to NYC, iOS push)
const HIW_KEY_MAP = {
bg: 'bg', bgDeep: 'bg',
ink: 'text', inkMute: 'textMute', inkDim: 'textDim',
amber: 'amber', amberDim: 'amberDim',
pine: 'pine2', pineDim: 'pineDim',
divider: 'border', panel: 'bg3', panelHi: 'bg4',
red: 'red',
};
const HIW_C = new Proxy({}, {
get(_t, k) { return window.CS_TOKENS[HIW_KEY_MAP[k] || k]; },
});
const HIW_MONO = '"SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace';
// ── Section progress hook ─────────────────────────────────
function useSectionProgress(ref) {
const [p, setP] = React.useState(0);
React.useEffect(() => {
const onScroll = () => {
if (!ref.current) return;
const rect = ref.current.getBoundingClientRect();
const total = rect.height - window.innerHeight;
const scrolled = -rect.top;
const prog = Math.max(0, Math.min(1, scrolled / total));
setP(prog);
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
return p;
}
// Tween between values across a [start,end] window of progress
const tween = (p, start, end, from, to) => {
if (p <= start) return from;
if (p >= end) return to;
const local = (p - start) / (end - start);
return from + (to - from) * local;
};
const stepP = (p, start, end) => Math.max(0, Math.min(1, (p - start) / (end - start)));
const ease3 = (t) => 1 - Math.pow(1 - t, 3);
// ── Topo background that pans + zooms with scroll ────────
function HiwMap({ progress }) {
// Map pan/zoom across the 3 steps:
// step 1 (0.0-0.33): zoom in on Yosemite hex (focus left-center)
// step 2 (0.33-0.66): zoom out, show probes spreading
// step 3 (0.66-1.0): pan to NYC, zoom in
const zoom = (() => {
if (progress < 0.33) return tween(progress, 0, 0.33, 1.4, 1.0);
if (progress < 0.66) return tween(progress, 0.33, 0.66, 1.0, 0.7);
return tween(progress, 0.66, 1.0, 0.7, 1.5);
})();
const panX = (() => {
// Yosemite is left-center, NYC is right-edge. Negative = look left.
if (progress < 0.33) return tween(progress, 0, 0.33, -180, 0);
if (progress < 0.66) return tween(progress, 0.33, 0.66, 0, 80);
return tween(progress, 0.66, 1.0, 80, 380);
})();
const panY = tween(progress, 0, 1, 0, -40);
return (
);
}
function topoBlob(cx, cy, r, distort) {
const points = 24;
let d = '';
for (let i = 0; i <= points; i++) {
const a = (i / points) * Math.PI * 2;
const wobble = Math.sin(a * 3 + cx * 0.01) * distort + Math.cos(a * 5 + cy * 0.01) * distort * 0.6;
const rr = r * (1 + wobble);
const x = cx + Math.cos(a) * rr;
const y = cy + Math.sin(a) * rr * 0.85;
d += (i === 0 ? 'M' : 'L') + x.toFixed(1) + ',' + y.toFixed(1) + ' ';
}
return ;
}
// ── Compass HUD (top-right, mini, spins with scroll) ─────
function CompassHud({ scrollAngle }) {
const { mobile } = window.useViewport();
return (
{(28 + scrollAngle).toFixed(0)}°
HEADING
);
}
// ── Step number indicator (right edge) ───────────────────
function StepIndicator({ progress }) {
const { mobile } = window.useViewport();
if (mobile) return null; // Step number indicator hidden on mobile (cramped)
const step = progress < 0.33 ? 0 : progress < 0.66 ? 1 : 2;
return (
{[0, 1, 2].map(i => (
{String(i + 1).padStart(2, '0')}
))}
);
}
// On mobile, all step overlays use the same centered position to avoid horizontal overflow.
const stepOverlayBase = (mobile, side) => mobile
? { left: 16, right: 16, bottom: 80, maxWidth: 'none' }
: (side === 'left'
? { top: '50%', left: '8%', transform: 'translateY(-50%)', maxWidth: 460 }
: { top: '50%', right: '8%', transform: 'translateY(-50%)', maxWidth: 460 });
// ── Step 1 overlay: site card ────────────────────────────
function Step1Overlay({ progress }) {
const { mobile } = window.useViewport();
const p = stepP(progress, 0.0, 0.33);
const fade = Math.min(1, p * 4) * (1 - Math.max(0, (p - 0.85) / 0.15));
if (fade <= 0) return null;
return (
One specific site, or every site that matches.
Pin a single campground and lock on. Or draw a region across multiple
parks and stack filters — lakefront, RV length, hookups, weekend
nights — and we monitor every site in the resolved set as one watch.
{/* Two scene cards: precision watch + area watch */}
Distributed watchers monitor Recreation.gov on your behalf —
respectfully rate-limited, redundantly routed, never asleep at the desk.
Pro inventory gets accelerated check intervals; hot inventory gets the
fastest cadence we run.
{/* Posture readout — design commitments, not fabricated production metrics */}
Push notification on Pro and Basic. Email if you want it. A deeplink that
hands you off to Recreation.gov to complete the booking — no scalper
behavior, no payment data leaves your hands.
{/* iOS push notification */}
);
}
function IosPush() {
const { mobile } = window.useViewport();
// Generic iOS dark push card — exactly the chrome users see at the top of
// their phone. Then a deeper Campsite Sniper "card" expands below.
return (