{/* Content area — skeleton (during typing/fading) and results
(during reveal) share the same vertical space. Both are
absolutely positioned inside a relative container with a fixed
height; the panel no longer grows or shrinks during scene
transitions, so the waitlist + release timeline below stay
anchored. Header height + 3 rows of rowH = the canonical span. */}
{/* Skeleton rows while typing — the panel had a cream void here
before results revealed. Three faint rows preserve the layout
and read as "the agent is fetching." */}
SCANNING · DFWSORT: BEST FIT ⌄
{[0,1,2].map((i) => (
{!mobile && (
)}
))}
{/* Results list */}
{scene.results.length} RESULTS · DFW
{SEARCH_SCENES.map((_, i) => (
))}
SORT: BEST FIT ⌄
{scene.results.map((r, i) => (
{r.pin}
{r.name}{r.tag}
{!mobile && (
{r.summary}
)}
{!compact && !mobile && (
{r.meta.map((m, j) => (
{m}
))}
)}
))}
{/* /content area */}
);
}
// ─── Waitlist form ──────────────────────────────────────────────────────
function WaitlistForm({ onJoined }) {
const [email, setEmail] = useState("");
const [submitted, setSubmitted] = useState(false);
const [focused, setFocused] = useState(false);
const submit = (e) => {
e.preventDefault();
// Guard: in the "Joined" success state the button stays mounted but
// must not refire the Sheets POST (or the confetti). Without this, every
// click after submission spawns a duplicate Google Sheets row and
// replays the confetti burst.
if (submitted) return;
const trimmed = email.trim();
if (!trimmed) return;
// Derive a name from the email's local-part so the Google Sheet row
// gets a usable name column without the user having to type one.
const derivedName = trimmed.split('@')[0]
.replace(/[._-]+/g, ' ')
.replace(/\b\w/g, (c) => c.toUpperCase());
const formData = new FormData();
formData.append('email', trimmed);
formData.append('name', derivedName);
formData.append('timestamp', new Date().toLocaleString('en-US', {
timeZone: 'America/Chicago',
year: 'numeric', month: '2-digit', day: '2-digit',
hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true,
}));
fetch(GOOGLE_SCRIPT_URL, { method: 'POST', body: formData })
.catch((err) => console.error('Waitlist error:', err));
setSubmitted(true);
fireConfetti();
onJoined?.();
};
const reset = () => {
setEmail("");
setSubmitted(false);
setFocused(false);
};
// Form border brightens to Pinmark Orange while the email input is focused
// (matches the page's :focus-visible rule and gives the form a real
// "you're typing" affordance without a loud color shift).
const formBorder = focused && !submitted
? "1.5px solid var(--signal)"
: "1.5px solid var(--ink)";
const formShadow = focused && !submitted
? "0 0 0 4px var(--signal-soft), 0 8px 30px -12px rgba(20,17,13,0.3)"
: "0 8px 30px -12px rgba(20,17,13,0.3)";
return (
<>
{/* Reset affordance — appears only after a successful submit, so users
can add a partner / friend's email without reloading the page. */}
{submitted && (
)}
);
}
// ─── Right column: map + curator ───────────────────────────────────────
function RightColumn({ phase, idx }) {
// Status-pill labels mirror the scene cycle in lockstep with the
// left-column search and the Curator card.
const labels = ["DFW · 3 ZONES", "BISHOP ARTS · BRUNCH", "NORTH DFW · SCHOOLS"];
const label = phase < 2 ? "DFW · LIVE EXAMPLE" : labels[idx] || "DFW · LIVE EXAMPLE";
return (
{/* Atlas margins — restoring the cartographic frame we lost when
switching from the SVG basemap to Mapbox. Per the Atlas Margin
Rule (DESIGN.md §3): mono in 0.16em letterspacing, ash-ink at
low opacity, sat inside the rounded frame. Decorative — read
as part of the cartographic posture. */}
{/* status pill, bottom-left of map */}
{label}
{/* Curator floats over the top-right of the map */}
);
}
// Atlas margin annotations rendered inside the right-column map frame.
// Three labels (skipping top-right because the Curator card owns it, and
// stacking DFW above the status pill / SHEET above the Mapbox
// attribution): lat top-left, locale bottom-left, sheet ID bottom-right.
// All sit ~14-16px in from the rounded edge so they read as part of the
// frame, not floating decoration. Mono in 0.16em letterspacing per the
// Atlas Margin Rule.
function AtlasMargins() {
const corner = {
position: "absolute",
fontFamily: "Geist Mono, ui-monospace, monospace",
fontSize: 10,
letterSpacing: "0.16em",
color: "var(--ink-3)",
opacity: 0.55,
pointerEvents: "none",
zIndex: 3,
textTransform: "uppercase",
fontWeight: 500,
};
return (
<>
32.7767° N
DFW · TX · USA
{/* Mapbox attribution band hugs ~22px at the bottom-right; SHEET
must clear it. */}
SHEET 01 / 01
);
}
// ─── Hero left column ─────────────────────────────────────────────────
// Waitlist count grows organically: a fixed base, plus a deterministic
// per-day random bump (1..10) accumulated since the launch anchor. Same
// visitors on the same calendar day see the same number — and tomorrow it
// just nudges up a touch.
const WAITLIST_COUNT_BASE = 3127;
const WAITLIST_EPOCH_MS = Date.UTC(2026, 3, 25); // 2026-04-25, a few days before launch
// Real-signup count in the sheet at the moment the synthetic ceiling above
// was calibrated (2026-05-03 → 3,177). Anything past this baseline is a
// genuine new signup and stacks ON TOP of the synthetic floor instead of
// being absorbed by it. Update this if you ever re-anchor the synthetic.
const WAITLIST_REAL_BASELINE = 174;
function dailyBump(i) {
// Deterministic, looks-random-enough integer in [1, 10].
const x = Math.sin((i + 1) * 9301.317) * 233280;
const f = Math.abs(x - Math.floor(x));
return 1 + Math.floor(f * 10);
}
function computedWaitlistCount() {
const days = Math.max(0, Math.floor((Date.now() - WAITLIST_EPOCH_MS) / 86400000));
let total = WAITLIST_COUNT_BASE;
for (let i = 0; i < days; i++) total += dailyBump(i);
return total;
}
// Live count read off the Apps Script Web App. The script's doGet returns
// ONLY a `{count}` integer — no row data, no emails — so this endpoint is
// safe to expose to all visitors.
//
// Display formula:
// displayed = synthetic + max(0, liveSignups - WAITLIST_REAL_BASELINE)
//
// The synthetic count provides the public-facing inflation (3,177 today,
// nudging up daily). Real signups past the baseline stack on top, so each
// new submit *permanently* adds 1 to the displayed badge instead of being
// absorbed by the synthetic floor. The optimistic bump increments live
// signups in browser state immediately; the next page load refetches
// from the sheet and lands on the same number.
//
// On any failure (rate limit, malformed response, sheet briefly empty),
// liveSignups holds at the baseline and displayed falls back to the pure
// synthetic count — never blank, never shrinks.
function useWaitlistCount() {
const [liveSignups, setLiveSignups] = useState(WAITLIST_REAL_BASELINE);
// `hydrated` tells the spin animation when the live count has arrived
// (or the request has terminally failed / timed out). The animation
// uses this to know when to stop spinning and land on the final value.
const [hydrated, setHydrated] = useState(false);
useEffect(() => {
let cancelled = false;
const finish = () => { if (!cancelled) setHydrated(true); };
// Hard timeout so a hung Apps Script never traps the badge in spin
// forever. 3s is well past the 95th percentile for Apps Script GETs.
const timeout = setTimeout(finish, 3000);
fetch(GOOGLE_SCRIPT_URL)
.then((r) => r.ok ? r.json() : null)
.then((data) => {
if (cancelled) return;
if (data && typeof data.count === "number") setLiveSignups(data.count);
clearTimeout(timeout);
finish();
})
.catch(() => { clearTimeout(timeout); finish(); });
return () => { cancelled = true; clearTimeout(timeout); };
}, []);
const bump = useCallback(() => setLiveSignups((c) => c + 1), []);
const synthetic = computedWaitlistCount();
const realDelta = Math.max(0, liveSignups - WAITLIST_REAL_BASELINE);
return { count: synthetic + realDelta, bump, hydrated };
}
// Spin-up animation used to mask the Apps Script GET latency. The badge
// would otherwise paint at the synthetic count, then snap to synthetic +
// delta a beat later, which reads as "uh, the page just corrected itself."
//
// Behavior: from mount, render a noisy ramp toward the live target while
// spinning; once `hydrated` is true AND a minimum spin duration has
// elapsed, ease over a settle window onto the exact final value. The
// animation runs once; after it completes, `target` updates (e.g. the
// optimistic +1 from a successful submit) flow through directly so the
// badge ticks up cleanly without re-spinning.
//
// `prefers-reduced-motion` short-circuits both phases — the badge just
// shows the target value the moment hydration completes, no animation.
function useSpinningCount(target, hydrated, opts = {}) {
// ~2200ms climb. Long enough for the Apps Script GET (~1-2s) to almost
// always resolve before the climb completes, so the badge lands once
// and stays. Shorter durations let the GET finish mid-climb, and any
// dependency change would reset the rAF and visibly snap the count
// backwards — see the dep array below.
const minMs = opts.minMs ?? 2200;
const reduced = useReducedMotion();
// Initial paint at ~55% of target — same place the rAF climb starts —
// so the first frame doesn't show a jarring "0 already in line."
const [display, setDisplay] = useState(() => reduced ? target : Math.floor(target * 0.55));
const [done, setDone] = useState(false);
// Refs so the rAF closure always reads the freshest target / hydrated
// values without having to reinstall the loop on every state change.
// CRITICAL: the rAF effect below has empty deps `[]` for exactly this
// reason — if we listed `target` or `hydrated` as deps, every GET
// resolution (or optimistic +1) would tear down the loop and restart
// it with a fresh startMs, snapping the displayed count back to 55%
// of target mid-climb. The visible glitch is "ramps to ~3,100, resets,
// ramps again to 3,177" — the second ramp is the post-hydration
// restart. Reading from refs avoids that.
const targetRef = useRef(target);
const hydratedRef = useRef(hydrated);
targetRef.current = target;
hydratedRef.current = hydrated;
const reducedRef = useRef(reduced);
reducedRef.current = reduced;
useEffect(() => {
if (reducedRef.current) {
// No animation — wait for hydration, then snap. Handled by the
// separate hydration effect below.
return;
}
const startMs = performance.now();
let raf;
function frame() {
const now = performance.now();
const t = targetRef.current;
const elapsed = now - startMs;
// Climb 0.55*target → target with ease-out. Jitter tapers from a
// 6%-of-target amplitude at start to zero at the top, so digits
// visibly home in instead of being random for the whole ride.
const progress = Math.min(1, elapsed / minMs);
const eased = 1 - Math.pow(1 - progress, 2.5);
const base = Math.floor(t * (0.55 + 0.45 * eased));
const noiseAmp = Math.floor(t * 0.06 * (1 - eased));
const noise = noiseAmp > 0 ? Math.floor((Math.random() - 0.5) * noiseAmp * 2) : 0;
setDisplay(Math.max(0, base + noise));
// Done once the climb has fully eased AND the live count has
// arrived. If the GET is faster than minMs, we still let the climb
// finish so the animation feels deliberate. If it's slower, the
// badge sits at exactly `t` (climb complete, noise zero) until the
// fetch lands — looks like a clean "settled" state, not a stall.
if (hydratedRef.current && progress >= 1) {
setDisplay(t);
setDone(true);
return;
}
raf = requestAnimationFrame(frame);
}
raf = requestAnimationFrame(frame);
return () => raf && cancelAnimationFrame(raf);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); // run-once: see comment above the refs
// Reduced-motion path: skip the spin and just snap to the target as
// soon as it's known. Splitting this out keeps the rAF effect empty-dep.
useEffect(() => {
if (reduced && hydrated) {
setDisplay(target);
setDone(true);
}
}, [reduced, hydrated, target]);
// Once done, `target` updates (optimistic +1 from a successful submit)
// pass straight through. No animation — a one-digit tick reads cleanly
// as "you just joined" without needing extra motion.
useEffect(() => {
if (done) setDisplay(target);
}, [target, done]);
return display;
}
// Quick canvas confetti — no library, just a one-shot burst. Skipped
// entirely when the user prefers reduced motion (the WaitlistForm success
// message still fires; only the visual celebration is dropped).
function fireConfetti() {
if (typeof window === "undefined" || typeof document === "undefined") return;
if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const dpr = window.devicePixelRatio || 1;
const W = window.innerWidth, H = window.innerHeight;
const canvas = document.createElement("canvas");
canvas.style.cssText = "position:fixed;inset:0;pointer-events:none;z-index:9999;";
canvas.width = W * dpr; canvas.height = H * dpr;
canvas.style.width = W + "px"; canvas.style.height = H + "px";
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
ctx.scale(dpr, dpr);
// Confetti uses canonical brand hex twins. Avoids drift from one-off
// approximations (the prior values used "#3b8a8a" and "#c69a3a", which
// weren't quite Cartographic Teal or Field Mustard).
const colors = ["#d97757", "#14110d", "#1f8a85", "#b58d28", "#f5f1e9", "#6b6358"];
const originY = H * 0.55;
const particles = [];
for (let i = 0; i < 140; i++) {
const angle = (-Math.PI / 2) + (Math.random() - 0.5) * Math.PI * 0.9;
const speed = 8 + Math.random() * 12;
particles.push({
x: W / 2 + (Math.random() - 0.5) * 80,
y: originY,
vx: Math.cos(angle) * speed,
vy: Math.sin(angle) * speed,
w: 5 + Math.random() * 5,
h: 8 + Math.random() * 6,
color: colors[Math.floor(Math.random() * colors.length)],
rot: Math.random() * Math.PI * 2,
vrot: (Math.random() - 0.5) * 0.4,
});
}
let frame = 0;
const maxFrames = 180;
function tick() {
frame++;
ctx.clearRect(0, 0, W, H);
const alpha = Math.max(0, 1 - Math.pow(frame / maxFrames, 2.5));
particles.forEach((p) => {
p.x += p.vx;
p.y += p.vy;
p.vy += 0.32;
p.vx *= 0.992;
p.rot += p.vrot;
ctx.save();
ctx.translate(p.x, p.y);
ctx.rotate(p.rot);
ctx.fillStyle = p.color;
ctx.globalAlpha = alpha;
ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h);
ctx.restore();
});
if (frame < maxFrames) requestAnimationFrame(tick);
else canvas.remove();
}
requestAnimationFrame(tick);
}
// Streets wordmark — large, sits at the very top of the hero. Always
// bigger than the headline that follows, on every tier. "by plyance" is
// kept small so the lockup never wraps, even in a narrow left column.
function Wordmark({ size = "lg" }) {
const t = {
md: { dot: 11, ring: 6, gap: 10, streets: 38, by: 18 },
lg: { dot: 17, ring: 10, gap: 14, streets: 60, by: 26 },
}[size];
return (
);
}
// ─── Page ─────────────────────────────────────────────────────────────
// Scene cycle — lifted from MapSearchPanel to Landing so the right-column
// map and the Curator card can fly in lockstep with whichever search the
// left-column is currently typing. The simulated search panel still owns
// its internal typing/holding/fading phases; it just calls advanceScene()
// at the end of the fade rather than mutating its own sceneIdx.
function useSceneCycle(total) {
const [sceneIdx, setSceneIdx] = useState(0);
// Stable identity so MapSearchPanel's effect deps don't churn — a fresh
// arrow each render would re-fire its phase-timer effect and constantly
// reset the typing animation.
const advance = useCallback(
() => setSceneIdx((i) => (i + 1) % total),
[total]
);
return { sceneIdx, advance };
}
function Landing() {
const phase = usePhases();
const { sceneIdx, advance } = useSceneCycle(SEARCH_SCENES.length);
const joinRef = useRef(null);
const isMobile = useMediaQuery("(max-width: 768px)");
// Single live-count fetch shared across desktop and mobile layouts; the
// bump is handed to WaitlistForm so a successful submit ticks the badge
// up immediately. `hydrated` flips once the GET resolves (or hits the
// 3s timeout) — the spin animation uses it to know when to land.
const { count: waitlistCount, bump: bumpWaitlist, hydrated: waitlistHydrated } = useWaitlistCount();
if (isMobile) {
return ;
}
return (
{/* Hero — exactly one viewport tall so BelowFold is hidden until scroll */}
{/* Below the fold */}
);
}
// ─── Mobile layout ────────────────────────────────────────────────────
function MobileLanding({ phase, joinRef, sceneIdx, onAdvance, waitlistCount, onJoined, waitlistHydrated }) {
const tier = useHeroTier(true);
const spunCount = useSpinningCount(waitlistCount, waitlistHydrated);
const s = HERO_SCALES[tier];
const labels = ["DFW · 3 ZONES", "BISHOP ARTS · BRUNCH", "NORTH DFW · SCHOOLS"];
const mapLabel = phase < 2 ? "DFW · LIVE EXAMPLE" : labels[sceneIdx] || "DFW · LIVE EXAMPLE";
// Map starts collapsed as a compact dropdown affordance to save vertical
// space on first paint. One tap expands it to the full live tile, after
// which the hero behaves exactly like the prior 100svh layout (map flex:1
// absorbs the slack, status pill in the corner, etc.). `closing` defers
// the unmount until the collapse keyframe finishes so the tile slides
// back up into the dropdown bar instead of just popping out.
const [mapOpen, setMapOpen] = useState(false);
const [closing, setClosing] = useState(false);
return (
{/* Hero — when the map is open, sized to 100svh (the smallest visible
viewport, with the URL bar counted) so the layout doesn't reflow
as iOS Safari slides its address bar in and out; the map is
flex:1 and absorbs whatever vertical slack the viewport gives us.
When the map is collapsed, we drop the 100svh class entirely and
let the hero shrink to its natural content height — that's the
space saving the user asked for. The full dated timeline lives
below the fold (MobileReleaseSection). */}
{/* Wordmark */}
{/* Headline */}
Talk to the city.
Get an answer.
{/* Map search panel */}
{/* Live map — collapsed by default to a compact dropdown that hints
at the cartographic content beneath it (live dot, mono label,
faint dashed route). Tapping expands to the full tile, which is
flex:1 + minHeight:110 — absorbs the hero's vertical slack and
grows on tall phones. No curator card or atlas margins on the
small tile (would duplicate the search panel above). */}
{mapOpen ? (
{/* Collapse button — paired affordance to the EXPAND chevron on
the closed dropdown. Mirrors that label/chevron pairing
(mono "CLOSE" + up arrow) so the open and closed states
read as the same control flipped, not two different
widgets. Sits over the top-right of the tile inside the
rounded clip with the same paper-glass as the status pill. */}
) : (
)}
{/* Waitlist */}
{spunCount.toLocaleString()} already in line
{/* Below the fold — full release timeline first, then How it works.
One scroll past the waitlist reveals the dated timeline. */}