/* global React */ // V2 — single continuous canvas. Seed plant-drag, industry pick (species // transforms), platform pick (pot), bloom opens to working app UI, seed // packet email capture. // --- HubSpot lead capture --- // Portal ID (aka Hub ID) for noodleseed.com account const HUBSPOT_PORTAL_ID = "244706579"; // PASTE the Form ID (UUID) from the form created in HubSpot → Marketing → Forms. // See HUBSPOT_SETUP.md for the exact field setup. const HUBSPOT_FORM_ID = "203a8855-f716-418c-900e-867d1d901c15"; const LEAD_SOURCE_TAG = "Startup Grind 2026"; function submitToHubSpot({ email }) { if (!HUBSPOT_FORM_ID || HUBSPOT_FORM_ID === "REPLACE_WITH_FORM_ID") { console.warn("[HubSpot] Form ID not set — skipping submission."); return; } const url = `https://api.hsforms.com/submissions/v3/integration/submit/${HUBSPOT_PORTAL_ID}/${HUBSPOT_FORM_ID}`; const hutkMatch = document.cookie.match(/hubspotutk=([^;]+)/); const context = { pageUri: window.location.href, pageName: "Plant a Seed — Startup Grind 2026 booth" }; if (hutkMatch) context.hutk = hutkMatch[1]; fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ fields: [{ objectTypeId: "0-1", name: "email", value: email }], context }) }).then(r => r.json()).then(body => { console.log("[HubSpot] submitted:", email, body.inlineMessage !== undefined ? "ok" : body); }).catch(err => console.error("[HubSpot] failed:", err)); } const INDUSTRIES_V2 = ["Coffee shop", "Bakery", "Yoga studio", "Creator", "Online store", "Real estate", "Consultant", "Restaurant", "Other"]; const PLATFORMS_V2 = [ { id: "chatgpt", name: "ChatGPT", logo: "assets/chatgpt.svg", pot: "#10a37f" }, { id: "claude", name: "Claude", logo: "assets/claude.svg", pot: "#d97757" }, { id: "gemini", name: "Gemini", logo: "assets/gemini.svg", pot: "#4285f4" } ]; // Brand marks rendered on a cream disc so full-color logos (Claude, Gemini) pop // against the colored pot. ChatGPT uses the existing SVG. const PLATFORM_ASSET = { chatgpt: "assets/chatgpt.svg", claude: "assets/claude.png", gemini: "assets/gemini.png" }; function PlatformMark({ id, size = 56, disc = true }) { const src = PLATFORM_ASSET[id]; if (!src) return null; if (!disc) { return ; } // Claude's PNG has a baked-in cream square bg — fill the disc edge-to-edge // and clip via overflow:hidden so that bg seamlessly becomes the disc. // Gemini + ChatGPT are transparent, so inset with padding for breathing room. const fill = id === "claude"; const pad = fill ? 0 : Math.round(size * 0.16); return (
); } // --------- helpers ---------- function lerp(a, b, t) { return a + (b - a) * t; } // --------- Seed ---------- function DraggableSeed({ onPlanted }) { const [dragging, setDragging] = useState(false); const [pos, setPos] = useState({ x: 0, y: 0 }); const startRef = useRef({ x: 0, y: 0 }); const seedRef = useRef(null); useEffect(() => { if (!dragging) return; const onMove = (e) => { const pt = e.touches ? e.touches[0] : e; setPos({ x: pt.clientX - startRef.current.x, y: pt.clientY - startRef.current.y }); }; const onUp = (e) => { setDragging(false); const r = seedRef.current?.getBoundingClientRect(); const soilEl = document.getElementById("v2-soil"); const soil = soilEl?.getBoundingClientRect(); if (r && soil && r.bottom > soil.top + 20 && r.left < soil.right && r.right > soil.left) { SFX.pop(); onPlanted(); } else { SFX.soft(); setPos({ x: 0, y: 0 }); } }; window.addEventListener("pointermove", onMove); window.addEventListener("pointerup", onUp); window.addEventListener("touchmove", onMove, { passive: false }); window.addEventListener("touchend", onUp); return () => { window.removeEventListener("pointermove", onMove); window.removeEventListener("pointerup", onUp); window.removeEventListener("touchmove", onMove); window.removeEventListener("touchend", onUp); }; }, [dragging, onPlanted]); const onDown = (e) => { const pt = e.touches ? e.touches[0] : e; startRef.current = { x: pt.clientX, y: pt.clientY }; setDragging(true); SFX.tap(); }; return (
); } // --------- Seed Packet (industry picker) ---------- function SeedPacket({ industry, onPick, selected }) { const sp = SPECIES[industry]; if (!sp) return null; const { C } = sp; return ( ); } // --------- Pot (platform picker) ---------- function Pot({ platform, onPick, selected }) { const potW = Math.min(160, Math.floor((window.innerWidth - 80) / 3)); const potH = Math.round(potW * 0.875); const markSize = Math.round(potW * 0.35); return ( ); } // --------- SeedPacketEmail (final capture) ---------- function SeedPacketEmail({ industry, onSubmit }) { const [email, setEmail] = useState(""); const [sealed, setSealed] = useState(false); const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); const sp = SPECIES[industry]; const { C } = sp || SPECIES["Coffee shop"]; const seal = () => { if (!valid) return; SFX.chime(); setSealed(true); setTimeout(() => onSubmit(email), 900); }; return (
{/* torn edge */}
Noodle Seed Co.
{SPECIES[industry]?.label || "Seeds"} · est. 2026
{/* mini plant illustration on packet */}
{/* ship to */}
Ship to
setEmail(e.target.value)} disabled={sealed} style={{ width: "100%", background: "transparent", border: "none", outline: "none", fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 18, color: "#2d1a0c", padding: "4px 0", borderBottom: `1px solid ${LINE}` }} />
{/* wax seal */}
{!valid && !sealed && (
Enter your email → tap the wax seal
)}
); } // --------- Celebrate (final) ---------- function V2Celebrate({ session, tweaks, onReset }) { return (
Planted

Your {SPECIES[session.industry]?.label?.toLowerCase() || "seedling"}
is growing.

A sprout arrives at {session.email}
when your {session.industry?.toLowerCase()} app is ready.

Plant another →
); } // --------- The Stage ---------- function V2Stage({ tweaks }) { const [phase, setPhase] = useState("seed"); // seed, species, platform, bloom, email, done const [session, setSession] = useState({}); const [grow, setGrow] = useState(0); // 0..1 const [bloom, setBloom] = useState(0); // 0..1 const reset = () => { SFX.tap(); setSession({}); setGrow(0); setBloom(0); setPhase("seed"); }; // plant → sprout const onPlant = () => { setPhase("species"); // stem begins to draw let t = 0; const i = setInterval(() => { t += 0.04; setGrow(g => Math.min(0.35, g + 0.04)); if (t >= 0.35) clearInterval(i); }, 40); SFX.grow(); }; // industry chosen → plant finishes growing const onPickIndustry = (industry) => { setSession(s => ({ ...s, industry })); setPhase("platform"); SFX.grow(); const start = performance.now(); const dur = 1400; const from = grow; const anim = (now) => { const t = Math.min(1, (now - start) / dur); const eased = 1 - Math.pow(1 - t, 3); setGrow(from + (1 - from) * eased); if (t < 1) requestAnimationFrame(anim); }; requestAnimationFrame(anim); }; // platform chosen → bloom const onPickPlatform = (platform) => { setSession(s => ({ ...s, platform })); setPhase("bloom"); SFX.bloom(); const start = performance.now(); const dur = 1100; const anim = (now) => { const t = Math.min(1, (now - start) / dur); const eased = 1 - Math.pow(1 - t, 2); setBloom(eased); if (t < 1) requestAnimationFrame(anim); else setTimeout(() => setPhase("email"), 700); }; requestAnimationFrame(anim); }; const onEmail = (email) => { setSession(s => ({ ...s, email })); setPhase("done"); submitToHubSpot({ email }); }; // Auto-advance: after email phase → celebrate // Reset idle after done useEffect(() => { if (phase !== "done") return; const t = setTimeout(() => reset(), 14000); return () => clearTimeout(t); }, [phase]); const species = session.industry ? SPECIES[session.industry] : null; const SpeciesComp = species?.C || GenericSprout; // positions (percent of stage) const potCx = "50%"; const potCy = "65%"; // Sky gradient shifts by phase const skyColor = phase === "bloom" || phase === "email" || phase === "done" ? "linear-gradient(180deg, #fef6ec 0%, #fdf3e5 55%, #f5ebd6 100%)" : "linear-gradient(180deg, #fafaf9 0%, #f5f1e8 60%, #e8dcc0 100%)"; return (
{/* Sun */}
{/* Soil / ground */}
{/* ground texture dots */} {Array.from({ length: 40 }).map((_, i) => ( ))}
{/* Grass blades tapered */} {/* Phase: SEED — hero text + draggable seed */} {phase === "seed" && ( <> {/* Background garden: preview of botanicals growing from the soil */}
{[ { C: SPECIES["Coffee shop"].C, left: "4%", scale: 0.45, delay: 0 }, { C: SPECIES["Bakery"].C, left: "14%", scale: 0.32, delay: 200 }, { C: SPECIES["Yoga studio"].C, left: "22%", scale: 0.36, delay: 400 }, { C: SPECIES["Consultant"].C, left: "78%", scale: 0.36, delay: 300 }, { C: SPECIES["Creator"].C, left: "86%", scale: 0.45, delay: 500 }, { C: SPECIES["Online store"].C, left: "97%", scale: 0.32, delay: 100 } ].map((p, i) => (
))}
Noodle Seed · a tiny ritual

Plant a seed, grow an app.

Tell us your business. We'll sprout a working app inside ChatGPT, Claude, or Gemini — so your customers book, order, and buy without leaving the chat.

{/* Hint arrow */}
↓ drag the seed into the soil ↓
)} {/* Phase: plant grows out of soil */} {(phase === "species" || phase === "platform") && (
)} {/* Phase: species picker */} {phase === "species" && ( <>

Pick your species.

Which seed did you bring?

{INDUSTRIES_V2.slice(0, 8).map(ind => ( ))}
)} {/* Phase: platform picker */} {phase === "platform" && ( <>

Where should it live?

Pick a pot. Your app grows inside.

{PLATFORMS_V2.map(p => ( ))}
)} {/* Phase: bloom — flower opens revealing widget, w/ plant + pot as frame */} {(phase === "bloom" || phase === "email") && ( <> {/* Small plant + pot icon in upper area */}
{session.platform && (
)}
{/* Chat widget — in email phase: far smaller + top-anchored */}
{/* ChatGPT/etc chat bubble wrapping the widget */}
{session.platform?.name} · {session.industry?.toLowerCase()}
{/* user question */}
{species?.q || "..."}
{/* AI response = app */}
{species?.widget === "booking" && } {species?.widget === "order" && } {species?.widget === "product" && }

Your live app · inside {session.platform?.name}

)} {/* Phase: email capture — seed packet anchored bottom */} {phase === "email" && (
)} {/* Phase: done */} {phase === "done" && } {/* Reset button (corner, except during seed) */} {phase !== "seed" && phase !== "done" && ( )}
); } Object.assign(window, { V2Stage });