// Tea Room v2 — clickable marketplace built on landing direction A. // Home shows a marquee of app-store icons; clicking any // icon opens its app page. Spiral lifted from variant B replaces the // doodle in the foot row. const HERO_COPIES = { rooms: "hi i'm ayesha - a designer, poet, photographer, and musician who loves to vibe-code experimental apps and ecosystems. enjoy (:", welcome: 'welcome to the tea room — a marketplace of small soft apps made between songs and poems. nothing here you need, everything here you can sit inside for a minute.', vibe: 'the tea room is a marketplace of small soft apps. each one was vibe-coded in a sitting or two — half art, half utility, all slightly impractical. step in, take one home.', }; const HERO_COPY_OPTIONS = [ { value: 'rooms', label: 'rooms, not products' }, { value: 'welcome', label: 'welcome / soft apps' }, { value: 'vibe', label: 'vibe-coded, slightly impractical' }, ]; function TeaRoom() { const [route, setRoute] = React.useState('home'); const [trans, setTrans] = React.useState(0); const nav = (r) => { if (r === route) return; setRoute(r); setTrans((t) => t + 1); }; // Tweaks const [t, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{ "heroCopy": "rooms", "marketplaceLayout": "grid", "showSpiral": true, "showBrewing": true }/*EDITMODE-END*/); let body; if (route === 'home') body = ; else if (route === 'info') body = ; else if (route === 'play') body = ; else if (route.startsWith('app:')) { const app = APPS.find((a) => a.slug === route.slice(4)); const soon = SOON.find((s) => s.slug === route.slice(4)); body = app ? : (soon ? : ); } return (
{body}
setTweak('heroCopy', v)} /> setTweak('showSpiral', v)} /> setTweak('showBrewing', v)} />
); } // ─── top nav ───────────────────────────────────────────────── function TRTopNav({ route, nav }) { const items = ['Work', 'Play', 'Info']; const cell = { fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '.02em', color: INK }; const onWorkClick = () => nav('home'); return ( ); } // ─── home ──────────────────────────────────────────────────── function TRHome({ nav, t }) { return (
{/* hero */}

{HERO_COPIES[t.heroCopy]}

{/* marketplace — marquee on home */}
the marketplace —
{APPS.length} open · {SOON.length} brewing
{/* divider marquee — names cycling, matches reference */}
a.title), ...SOON.map((s) => s.title)]} /> {/* foot row */}
window.scrollTo({ top: document.body.scrollHeight * .2, behavior: 'smooth' })}>Work nav('play')}>Play nav('info')}>Info
{t.showSpiral && }
a portfolio of vibe-coded little apps,
updated whenever the room is warm.
); } // ─── spiral mark (lifted from B's vibe) ─────────────────────── function SpiralMark({ size = 120, color = INK }) { return ( ); } // ─── marketplace grid ──────────────────────────────────────── function MarketGrid({ nav, showBrewing }) { const items = [ ...APPS.map((a) => ({ kind: 'live', app: a })), ...(showBrewing ? SOON.map((a) => ({ kind: 'brew', app: a })) : []), ]; return (
{items.map(({ kind, app }) => ( nav('app:' + app.slug)} /> ))}
); } function MarketCard({ app, kind, onOpen }) { const [hov, setHov] = React.useState(false); const live = kind === 'live'; const accent = live ? app.accent : 'rgba(26,20,20,.55)'; const bg = live ? app.color : '#ece4e6'; return (
setHov(true)} onMouseLeave={() => setHov(false)} style={{ display: 'flex', alignItems: 'center', gap: 16, padding: 18, border: `1px solid ${RULE}`, borderRadius: 16, background: hov && live ? 'rgba(255,255,255,.5)' : 'rgba(255,255,255,.18)', cursor: live ? 'pointer' : 'default', transition: 'background .2s, transform .25s, box-shadow .25s', transform: hov && live ? 'translateY(-2px)' : 'none', boxShadow: hov && live ? '0 8px 24px rgba(20,10,10,.06)' : 'none', opacity: live ? 1 : .68, }}>
{live ? (app.medium && app.medium[0]) : 'brewing'}
{app.title}
{app.tag}
); } // ─── marketplace marquee ───────────────────────────────────── function MarketMarquee({ nav, showBrewing }) { const items = [ ...APPS.map((a) => ({ kind: 'live', app: a })), ...(showBrewing ? SOON.map((a) => ({ kind: 'brew', app: a })) : []), ]; // duplicate so the marquee loops seamlessly const ref = React.useRef(null); const [paused, setPaused] = React.useState(false); return (
setPaused(true)} onMouseLeave={() => setPaused(false)}>
{[0, 1].map((k) => (
{items.map(({ kind, app }) => ( kind === 'live' && nav('app:' + app.slug)} /> ))}
))}
); } function MarqueeIcon({ app, kind, onOpen }) { const live = kind === 'live'; const [hov, setHov] = React.useState(false); return ( ); } // ─── app detail ────────────────────────────────────────────── function TRAppDetail({ app, nav }) { const idx = APPS.findIndex((a) => a.slug === app.slug); const next = APPS[(idx + 1) % APPS.length]; return (
{/* breadcrumbs */} {/* hero band — icon + name + description, app-store-detail vibe */}
● {app.medium.join(' · ')} · {app.year}

{app.title}

{app.tag}
{/* description + preview placeholder */}

about this room

{app.desc}

i wanted this to feel like one of those rooms in a friend's house where everyone ends up sitting on the floor. small footprint, low lighting, nothing to optimise. arrive, do the thing, close the tab.

preview · placeholder
drop screenshot here
{/* meta strip */}
{/* next */} { e.preventDefault(); nav('app:' + next.slug); }} className="tr-app-next tr-pad" style={{ paddingTop: 32, paddingBottom: 32, color: INK, textDecoration: 'none', background: next.color + '88', transition: 'background .2s' }}> next room — {next.title} →
); } function DMeta({ k, v }) { return (
{k} {v}
); } // ─── brewing detail ────────────────────────────────────────── function TRBrewing({ app, nav }) { return (

{app.title}

{app.tag}
still brewing — back in a few days
); } // ─── info ──────────────────────────────────────────────────── function TRInfo({ nav }) { return (
info — about the room

hi, i'm ayesha. i make ecosystems of experience.

i blend experimental graphic design, music production, poetry, and software into projects that are usually small, sometimes useless, occasionally moving. the tea room is where i put all of them while they finish brewing.

most of these apps were vibe-coded in an evening or two. some never get finished. that's the point — the marketplace is the journal. come back in a few days, there'll be another room.

nav('home')} size={22}>see what's open nav('play')} size={22}>poke at the scraps
this site refreshes every few days as new rooms open. you can subscribe to letters for a quiet weekly note.
); } function TRInfoCard({ title, rows }) { return (
{title}
{rows.map(([k, v]) => (
{k} {v}
))}
); } // ─── play (the marketplace) ────────────────────────────────── function TRPlay({ nav }) { return (
play — the marketplace

small soft apps, made between songs and poems.

); } Object.assign(window, { TeaRoom });