);
}
/* ──────────────────────────────────────────────────────────────────
SCROLL CONTROLLER — turns scrollY into two progress values
(p for the hero exit, p2 for the waitlist enter) and sets them
as CSS custom properties on :root.
────────────────────────────────────────────────────────────────── */
function useHeroGrab() {
// Two things in one hook, both driven by scroll position:
// --shrink (0..1) — set as a CSS var. The device scales linearly from
// 100% down to 60% over the first 65% of section 1,
// to read as "pocket-sized."
// grabbed (bool) — once past the trigger (65vh), the CSS choreography
// (hand reaches in, lifts the now-shrunken device,
// apps fly in from the edges) plays automatically.
// Scrolling back up reverses everything fast.
const [grabbed, setGrabbed] = useState(false);
useEffect(() => {
let raf = 0;
function tick() {
const y =
window.scrollY ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0;
const vh = window.innerHeight;
const shrink = Math.max(0, Math.min(1, y / (vh * 0.65)));
document.documentElement.style.setProperty("--shrink", shrink.toFixed(4));
setGrabbed(y > vh * 0.65);
raf = requestAnimationFrame(tick);
}
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, []);
return grabbed;
}
/* ──────────────────────────────────────────────────────────────────
APP
────────────────────────────────────────────────────────────────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"showApps": true
}/*EDITMODE-END*/;
/* ─────────────────────────────────────────────────────────────────
WAITLIST ENDPOINT
Paste the URL from your deployed Google Apps Script Web App here.
See apps-script-waitlist.gs in this folder for the script to paste
into Extensions → Apps Script on your Google Sheet.
───────────────────────────────────────────────────────────────── */
const ZEEB_WAITLIST_ENDPOINT = "PASTE_YOUR_APPS_SCRIPT_URL_HERE";
function App() {
const [v, setTweak] = (typeof useTweaks === "function")
? useTweaks(TWEAK_DEFAULTS)
: [TWEAK_DEFAULTS, () => {}];
const grabbed = useHeroGrab();
// Section 2's white panel slides up via a CSS translateY transition on
// .sticky-section (controlled by the `.in` class). The hand-lift and
// the panel-rise are pure CSS, kept in sync by matching durations.
// Lock scroll for the duration of the hand animation. We use overflow
// only (NOT position:fixed) — fixing the body resets window.scrollY to 0,
// which makes useHeroGrab see y=0 and flip `grabbed` back to false,
// creating a loop that traps the page at the trigger point.
useEffect(() => {
if (!grabbed) return;
document.body.style.overflow = 'hidden';
const t = setTimeout(() => {
document.body.style.overflow = '';
}, 2000);
return () => {
clearTimeout(t);
document.body.style.overflow = '';
};
}, [grabbed]);
const [email, setEmail] = useState("");
const [status, setStatus] = useState("idle");
async function submit(e) {
e.preventDefault();
const cleanEmail = email.trim();
if (!cleanEmail || status === "loading") return;
setStatus("loading");
try {
// Apps Script Web Apps don't return CORS headers, so we use no-cors.
// The request still reaches the script — we just can't read the
// response. URL-encoded form data avoids the CORS preflight.
if (ZEEB_WAITLIST_ENDPOINT && !ZEEB_WAITLIST_ENDPOINT.startsWith("PASTE")) {
await fetch(ZEEB_WAITLIST_ENDPOINT, {
method: "POST",
mode: "no-cors",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams({
email: cleanEmail,
timestamp: new Date().toISOString(),
}),
});
} else {
// Endpoint not configured yet — fall back to a brief delay so the
// UI still flows correctly during local testing.
await new Promise(r => setTimeout(r, 600));
}
} catch (err) {
// no-cors requests can't fail with a CORS error; any real network
// failure (offline etc.) still gets logged for debugging.
console.error("Waitlist submission failed:", err);
}
setStatus("success");
}
// Compute the device size responsively at mount + resize.
// The new form factor is Switch Lite-ish — wider than tall, pocketable.
// Aspect ~ 2.05:1 (height ≈ width * 0.49).
const [deviceW, setDeviceW] = useState(780);
useEffect(() => {
function recalc() {
const vw = window.innerWidth;
if (vw < 520) setDeviceW(Math.min(400, vw - 32));
else if (vw < 900) setDeviceW(560);
else setDeviceW(780);
}
recalc();
window.addEventListener("resize", recalc);
return () => window.removeEventListener("resize", recalc);
}, []);
return (
{/* Background — fixed under everything */}
{/* Nav */}
zeeb
Waitlist open · 1,247 in
{/* SECTION 1 — hero. Device + stylus, soft glow. Crossing the trigger
point auto-plays the hand reaching in and carrying the device off. */}
{/* stage-content scales with scroll (the "shrink"), then the
whole anchor lifts off when grabbed — hand and device stay
locked together since they're inside the same shrink layer */}
{/* SECTION 2 — Mobbin-style scroll reveal with expanding logo field.
.sticky-section is position:fixed and slides up via translateY
when `grabbed` flips true, in sync with the hand lift. */}
{/* SECTION 3 — signup. */}
The loophole is real.
Zeeb runs on a note-taking device. No SIM, no cellular.
Technically not a phone. Technically not against the rules.