// app.jsx — Herely website composition. Sections are mostly static markup // with a small reveal-on-scroll observer; the live map and hero ambient // canvas handle motion. const { useEffect, useRef, useState, useMemo } = React; const LANDING_MOODS = [ { key: "open", label: "Open", color: "#3A7FCC", desc: "Open to chat" }, { key: "building", label: "Building", color: "#00C49A", desc: "Working on something" }, { key: "curious", label: "Curious", color: "#F5A623", desc: "Exploring ideas" }, { key: "focused", label: "Focused", color: "#A8A8A8", desc: "Heads-down" }, { key: "social", label: "Social", color: "#FF6B6B", desc: "Wants energy" } ]; function moodColor(key) { return (LANDING_MOODS.find((item) => item.key === key) || LANDING_MOODS[0]).color; } const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "mode": "midnight", "density": 1.0, "serifAccents": true, "moodFocus": "all" }/*EDITMODE-END*/; /* ─── Reveal-on-scroll ─── */ function useReveal(dependency) { useEffect(() => { const els = document.querySelectorAll(".rv"); const io = new IntersectionObserver( (entries) => { for (const e of entries) { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } } }, { rootMargin: "0px 0px -10% 0px", threshold: 0.05 } ); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, [dependency]); } /* ─── Ambient hero canvas — drifting presence specks ─── */ function HeroAmbient({ midnight }) { const wrapRef = useRef(null); const canvasRef = useRef(null); useEffect(() => { const wrap = wrapRef.current, canvas = canvasRef.current; if (!wrap || !canvas) return; let raf = 0; const dpr = Math.min(window.devicePixelRatio || 1, 2); let w = 0, h = 0; const resize = () => { const r = wrap.getBoundingClientRect(); w = r.width; h = r.height; canvas.width = Math.floor(w * dpr); canvas.height = Math.floor(h * dpr); canvas.style.width = w + "px"; canvas.style.height = h + "px"; }; resize(); const ro = new ResizeObserver(resize); ro.observe(wrap); // 32 specks across the field, very slow drift const N = 36; const COLORS = ["#3A7FCC", "#F5A623", "#00C49A", "#FF6B6B", "#A8A8A8"]; const pts = Array.from({ length: N }, () => ({ x: Math.random(), y: Math.random(), vx: (Math.random() - 0.5) * 0.006, vy: (Math.random() - 0.5) * 0.006, phase: Math.random() * Math.PI * 2, r: 2 + Math.random() * 2.5, c: COLORS[Math.floor(Math.random() * COLORS.length)], })); let t0 = performance.now(); const draw = (t) => { const dt = Math.min(0.05, (t - t0) / 1000); t0 = t; const ctx = canvas.getContext("2d"); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, w, h); // Very subtle grid — barely there ctx.strokeStyle = midnight ? "rgba(255,255,255,0.04)" : "rgba(11,11,13,0.04)"; ctx.lineWidth = 1; const step = 88; ctx.beginPath(); for (let x = 0; x < w; x += step) { ctx.moveTo(x, 0); ctx.lineTo(x, h); } for (let y = 0; y < h; y += step) { ctx.moveTo(0, y); ctx.lineTo(w, y); } ctx.stroke(); for (const p of pts) { p.x += p.vx * dt; p.y += p.vy * dt; if (p.x < 0 || p.x > 1) p.vx *= -1; if (p.y < 0 || p.y > 1) p.vy *= -1; p.phase += dt * 0.6; const pulse = 0.5 + 0.5 * Math.sin(p.phase); const px = p.x * w, py = p.y * h; const haloR = p.r + 12 + pulse * 6; const g = ctx.createRadialGradient(px, py, 0, px, py, haloR); g.addColorStop(0, withAlpha(p.c, midnight ? 0.22 : 0.14)); g.addColorStop(1, withAlpha(p.c, 0)); ctx.fillStyle = g; ctx.beginPath(); ctx.arc(px, py, haloR, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = withAlpha(p.c, midnight ? 0.85 : 0.55); ctx.beginPath(); ctx.arc(px, py, p.r, 0, Math.PI * 2); ctx.fill(); } raf = requestAnimationFrame(draw); }; raf = requestAnimationFrame(draw); return () => { cancelAnimationFrame(raf); ro.disconnect(); }; }, [midnight]); return (
); } function withAlpha(hex, a) { const h = hex.replace("#", ""); const r = parseInt(h.slice(0, 2), 16); const g = parseInt(h.slice(2, 4), 16); const b = parseInt(h.slice(4, 6), 16); return `rgba(${r},${g},${b},${a})`; } const Arrow = () => ( ); /* ─── Nav ─── */ const SunIcon = () => ( {[0,45,90,135,180,225,270,315].map(a => { const rad = (a*Math.PI)/180; const x1 = 8 + Math.cos(rad)*5, y1 = 8 + Math.sin(rad)*5; const x2 = 8 + Math.cos(rad)*7, y2 = 8 + Math.sin(rad)*7; return ; })} ); const MoonIcon = () => ( ); function Nav({ mode, onToggle, onSignIn }) { const midnight = mode === "midnight"; return ( ); } /* ─── Hero ─── */ function HeroRadar() { const room = useMemo(() => generateRoom(12), []); const [time, setTime] = useState(() => new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) ); useEffect(() => { const i = setInterval( () => setTime(new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })), 30000 ); return () => clearInterval(i); }, []); return (
Studio 1 · 2F · now
{time}
({ motion: 0.6, glow: 0.8 }), [])} selectedId={null} />
{room.counts.open} open
{room.counts.building} building
{room.counts.curious} curious
{room.counts.social} social
); } function Hero({ midnight, onNavigate }) { return (
Herely · invite-only

Presence before profile.

A real-time presence layer for physical spaces. See who's around, feel the energy in the room, and discover what people are open to — before anyone has to introduce themselves.

Live · last 24h
2,418
people quietly present across 14 rooms
Mutual signals
57%
opened to a conversation they wouldn't have started
Founding rooms
14 / 200
cities, campuses, and studios already live
); } /* ─── Problem / contrast ─── */ const OLD = ["Profiles", "Feeds", "Algorithms", "Performance", "Cognitive overload"]; const NEW = [ { t: "Presence", c: "var(--m-blue)" }, { t: "Intent", c: "var(--m-amber)" }, { t: "Energy", c: "var(--m-teal)" }, { t: "Context", c: "var(--m-coral)" }, { t: "Resonance", c: "var(--m-grey)" }, ]; function Problem() { return (

Herely makes connection
closer, not noisier.

Section 01 · The problem

Modern social systems were built for performance and reach. The room you're already in deserves something quieter.

The old world

    {OLD.map((t, i) =>
  • {t}
    • )}

The Herely layer

    {NEW.map((n, i) =>
  • {n.t}
    • )}

The algorithms told us who to follow.
Herely tells us who is in the room.

); } /* ─── How it works ─── */ function StepCard({ n, title, body, children }) { return (
{n} Step

{title}

{body}

{children}
); } function HowItWorks() { // Step 1 — energy nodes mosaic const nodeMosaic = useMemo(() => { const pattern = [ ["o","o",".","b","."], ["c",".","f","o","s"], [".","b","o",".","c"], ["o","s",".","f","."], ]; const cMap = { o:"var(--m-blue)", b:"var(--m-teal)", c:"var(--m-amber)", s:"var(--m-coral)", f:"var(--m-grey)" }; return pattern.flat().map((k, i) => (
{k !== "." && (i+1)}
)); }, []); return (

Three quiet layers,
revealed in sequence.

Section 02 · How it works

Identity is the reward, not the entry point. Each layer asks for mutual consent before unlocking the next.

Live 24 present
{nodeMosaic}
A
Open design tools-for-thought
M
Building robotics
K
Curious phd · neuro
J
Open first time here
A Anya Reyes · designer Match
M ▮▮▮▮▮ ▮▮▮▮▮▮ Pending
K ▮▮▮▮ ▮▮▮▮▮ Pending
J Jordan Wu · product Match
); } /* ─── Live Map section ─── */ function MapSection({ isEmbed }) { const [filter, setFilter] = useState("all"); const [density, setDensity] = useState(1.0); const [time, setTime] = useState(() => new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) ); useEffect(() => { const i = setInterval( () => setTime(new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })), 30000 ); return () => clearInterval(i); }, []); const room = useMemo(() => generateRoom(Math.round(18 * density)), [density]); const activeFilter = useMemo(() => filter === "all" ? null : new Set([filter]), [filter]); // Density controlled via tweaks - read once useEffect(() => { const handler = (e) => { if (e.data?.__tweaks?.density) setDensity(e.data.__tweaks.density); }; window.addEventListener("message", handler); return () => window.removeEventListener("message", handler); }, []); if (isEmbed) { return (
Studio 1 · 2F · live
{time} · {room.people.length} present
*Conceptual live environment visualization
Mood signals
{LANDING_MOODS.map(m => (
{m.label} {m.desc}
))}
Filter the room
{LANDING_MOODS.map(m => ( ))}
{room.people.length}Present
{room.openToTalk}Open to talk
{room.mutual}Mutual signals

Hover any node to see its presence. No names — until both sides say yes.

); } return (

The room itself becomes discoverable.

Section 03 · The live map

A living map of a single space. Each soft pulse is a person quietly broadcasting their state — open, focused, curious, building, social.

Studio 1 · 2F · live
{time} · {room.people.length} present
*Conceptual live environment visualization
Mood signals
{LANDING_MOODS.map(m => (
{m.label} {m.desc}
))}
Filter the room
{LANDING_MOODS.map(m => ( ))}
{room.people.length}Present
{room.openToTalk}Open to talk
{room.mutual}Mutual signals

Hover any node to see its presence. No names — until both sides say yes.

); } /* ─── Philosophy ─── */ const PHILO = [ { over: "Presence", under: "performance" }, { over: "Intent", under: "attention" }, { over: "Signal", under: "noise" }, { over: "Alignment",under: "scale" }, { over: "Context", under: "virality" }, ]; function Philosophy() { return (
Section 04 · Philosophy
{PHILO.map((p, i) => (
{p.over} over {p.under}.
))}
); } /* ─── Venue partners ─── */ function Venues() { return (

Activate the invisible
social layer of your space.

Section 05 · For venues

A presence layer that lives lightly inside the rooms you already host. No new screens, no new platform — just the room, made legible.

Innovation hubs · Labs

For places where strangers
are already building together.

Help residents and visitors find each other without forcing introductions. See who's deep in a build, who's between thoughts, who'd say yes to a coffee.

Daily presence Mood clusters Quiet matchmaking
Universities · Research

For campuses where the
good encounters never happen.

A library that knows three thesis writers are present. A studio that knows a guest critic just walked in. The room as the directory.

Cross-discipline signals Cohort discovery Office-hours layer
Coworking · Creative communities

For coworking that wants
to feel like a community again.

A floor that surfaces its own members — quietly. The shared kitchen becomes a place to actually meet your neighbor.

Floor maps Member discovery Event mode
Conferences · Salons · Studios

For temporary rooms
that deserve permanent value.

Spin up a Herely room for a weekend. Let 200 people find each other by what they're carrying, not by who has the loudest badge.

Pop-up rooms Intent tags After-room threads
In quiet pilots with Studio 1 Coworking 1 Studio 2 Studio 3 Coworking 2 Coworking 3
); } /* ─── Final CTA ─── */ function FinalCTA({ midnight, onNavigate }) { return (
A small invitation

The map lights up
when people do.

Limited to 200 founding rooms in 2026. One short form, one quiet reply.

); } /* ─── Footer ─── */ function Footer({ onNavigate }) { return ( ); } /* ─── Room Experience Components ─── */ const Close = () => ( ); function RoomNav({ onNavigate }) { const goHome = (e) => { e.preventDefault(); if (onNavigate) onNavigate("/home"); }; return ( ); } function IDCard({ person, onClose }) { if (!person) return null; const col = moodColor(person.mood); const mood = LANDING_MOODS.find(m => m.key === person.mood) || {}; const initial = person.name.charAt(0).toUpperCase(); const location = person.location || "Studio 1 · 2F"; const openTo = person.openTo || person.open_to || "a quick intro"; const bio = person.bio || `${person.name} is a ${person.role} focused on ${person.tags.join(', ')}.`; return ( ); } function Room({ onNavigate }) { const [selectedId, setSelectedId] = useState(null); const [filter, setFilter] = useState("all"); const room = useMemo(() => generateRoom(80), []); const activeFilter = useMemo(() => filter === "all" ? null : new Set([filter]), [filter]); const selected = useMemo(() => { return selectedId !== null ? room.people.find(p => p.id === selectedId) : null; }, [selectedId, room.people]); const apiRef = useRef(null); const [toastText, setToastText] = useState(null); const [time, setTime] = useState(() => new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) ); useEffect(() => { const i = setInterval( () => setTime(new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })), 30000 ); return () => clearInterval(i); }, []); useEffect(() => { const onKey = (e) => { if (e.key === "Escape") setSelectedId(null); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); return ( <>
Studio 1 · 2F · live room

Who's here, right now.

Tap any name to see their presence card. Send a quiet signal — they'll only know who you are if they signal back.

Studio 1 · 2F · live
{time} · {room.people.length} present
console.log("LOD:", lod)} onReshuffle={(count) => { setToastText(`Orbit Shift: ${count} participants moved`); const timer = setTimeout(() => setToastText(null), 3000); return () => clearTimeout(timer); }} apiRef={apiRef} />
*Conceptual live environment visualization
{toastText && (
{toastText}
)}
Mood signals
{LANDING_MOODS.map(m => (
{m.label} {m.desc}
))}
Filter the room
{LANDING_MOODS.map(m => ( ))}
Map Controls
{room.people.length}Present
{room.openToTalk}Open to talk
{room.mutual}Mutual signals
setSelectedId(null)}/>
); } /* ─── Bridge Animation to Room ─── */ function BridgeToRoom({ onNavigate }) { const [step, setStep] = useState("bridging"); // bridging, complete, room useEffect(() => { // Show "Bridge Established" after loading animation const timer1 = setTimeout(() => { setStep("complete"); }, 1200); // Show room after success state const timer2 = setTimeout(() => { setStep("room"); }, 2400); return () => { clearTimeout(timer1); clearTimeout(timer2); }; }, []); if (step === "bridging" || step === "complete") { return (
{step === "bridging" && (
Bridging spatial identities...
)} {step === "complete" && (

Bridge Established.

Entering the presence layer...
)}
); } // Show the room view return (
); } /* ─── Main Site Component ─── */ function MainSite({ mode, onModeToggle, tweaks, onTweakChange, onAuthSuccess, currentPath, onNavigate }) { const showAuth = currentPath === "/sign-in" || currentPath === "/sign-up"; const authView = currentPath === "/sign-up" ? "signup" : "login"; useReveal(currentPath); const midnight = mode === "midnight"; useEffect(() => { const map = { "section.hero": "01 Hero", "#problem": "02 Problem", "#how": "03 How it works", "#map": "04 Live map", "#philosophy": "05 Philosophy", "#venues": "06 Venues", "#access": "07 Final CTA", }; for (const [sel, label] of Object.entries(map)) { const el = document.querySelector(sel); if (el) el.setAttribute("data-screen-label", label); } }, []); if (showAuth) { return (
); } return ( <>