// v3-sections.jsx — comprehension-focused sections // Adds: Hook · A Night on HOTMESS · Who It's For · Ghosted · Why Now // Goal: make the ecosystem understandable in <15 seconds without flattening atmosphere. // ───────────────────────────────────────────────────────────────────────────── // HookSection — the emotional charter. Surfaces the reason upfront, not buried. function HookSection() { return (
WHY THIS
EXISTS

Gay men aren't coming home.
They're slipping.

Saturday-night messages that go quiet on Sunday afternoon. The chemsex rooms in zone 2 where people we love are still waiting for someone to find them. The thread that ends mid-conversation and never resumes.

Queer life got split into a dozen disconnected apps — dating here, recovery hidden over there, safety bolted on later. Meanwhile the city was already running as one room. HOTMESS is the layer that finally admits it.

The city was already speaking.
HOTMESS just made the signals visible.

); } Object.assign(window, { HookSection }); // ───────────────────────────────────────────────────────────────────────────── // NightOnHotmessSection — narrative timeline. The whole ecosystem in one flow. function NightOnHotmessSection() { const beats = [ { t: "FRI · 22:30", tag: "VENUE BEACON", tone: "gold", head: "A room opens.", body: "Eagle Vauxhall drops a beacon. The pin on the globe brightens.", layer: "Nightlife" }, { t: "FRI · 23:00", tag: "PULSE WARMS", tone: "gold", head: "SE11 climbs.", body: "Density rises across the postcode. People route toward it without thinking.", layer: "Movement" }, { t: "FRI · 23:30", tag: "RADIO LIVE", tone: "gold", head: "The room is scored.", body: "Resident slot goes live on HOTMESS Radio. The whole globe hears what the room hears.", layer: "Atmosphere" }, { t: "SAT · 00:30", tag: "GHOSTED MUTUAL", tone: "ink", head: "Two ghosted people, same room.", body: "Mutual energy registers — quietly, both sides. No cold open, no swiping.", layer: "Chemistry" }, { t: "SAT · 02:00", tag: "VENDOR DROP", tone: "gold", head: "Something worth finding.", body: "A limited batch surfaces within walking distance. The drop expires by morning.", layer: "Commerce" }, { t: "SAT · 03:30", tag: "CHECK-IN", tone: "recovery", head: "A timer pings home.", body: "A trusted contact gets a quiet ping. Nothing escalates. The night continues.", layer: "Care" }, { t: "SAT · 05:00", tag: "RECOVERY OVERLAY", tone: "recovery", head: "The signal softens.", body: "Calm rooms surface. The globe shifts. The people still awake find each other gently.", layer: "Recovery" }, { t: "SUN · 11:00", tag: "HAND IN HAND", tone: "recovery", head: "The comedown show.", body: "Sunday radio airs. Aftercare links live on the bottle. Landing rooms open.", layer: "Care" }, { t: "SUN · 14:00", tag: "MARKET", tone: "ink", head: "Daytime circulation.", body: "Preloved drops surface, sellers post, the daytime Radio runs. The city resets quietly.", layer: "Commerce" }, ]; return (
§01
A NIGHT
ON HOTMESS
One weekend.
The whole ecosystem.
NARRATIVE FLOW · NINE BEATS · ONE CONTINUOUS WORLD

The fastest way to understand HOTMESS is to watch a weekend run on it.

{/* Vertical timeline rail */} {beats.map((b, i) => { const accent = b.tone === "recovery" ? "var(--recovery-blue)" : b.tone === "gold" ? "var(--gold)" : "var(--ink)"; return (
{/* Timestamp + dot */}
{b.t}
{b.tag}
{/* Body */}
{b.head}

{b.body}

layer · {b.layer.toLowerCase()}
); })}
WHAT YOU JUST SAW

Nine layers. One continuous weekend.

None of these are separate apps. They're the same signal layer, scored differently depending on the hour. That's the whole product.

); } // ───────────────────────────────────────────────────────────────────────────── // WhoItsForSection — user-type matrix. Different people, different layers. function WhoItsForSection() { const users = [ { who: "THE CLUBBER", uses: "Movement + nightlife.", detail: "Pulse to read the room. Beacons to land where the night is.", tone: "ink" }, { who: "THE SOBER USER", uses: "Safer nearby people.", detail: "Recovery overlays, calm rooms, ghosted defaults. The night you can still attend.", tone: "recovery" }, { who: "THE TRAVELLER", uses: "Local queer energy.", detail: "Drop into any city's globe. Read the rooms before you arrive.", tone: "ink" }, { who: "THE SELLER", uses: "Preloved drops.", detail: "Surface a batch near closing time. Limited window, real foot traffic.", tone: "gold" }, { who: "THE VENUE", uses: "Pulse gravity.", detail: "Persistent pin. The room shows up the moment it's alive.", tone: "gold" }, { who: "THE DJ", uses: "Radio atmosphere.", detail: "Resident slots score the globe. Your set heard wherever the night is.", tone: "gold" }, { who: "THE CREATOR", uses: "Cultural visibility.", detail: "Promoter pins move with you. Pulse picks up your room.", tone: "gold" }, { who: "THE RECOVERY USER", uses: "A softer landing.", detail: "Hand in Hand. Sunday radio. Aftercare on the bottle, on the globe.", tone: "recovery" }, { who: "THE FLIRT", uses: "Ghosted chemistry.", detail: "Mutuality first. No cold open. No swiping fatigue.", tone: "ink" }, { who: "THE RETAILER", uses: "Signal commerce.", detail: "Become a live signal inside the scene. Not banner inventory.", tone: "gold" }, ]; return (
§03
WHO USES IT
Different people
use HOTMESS differently.
TEN ARCHETYPES · TEN ENTRANCES · ONE WORLD

HOTMESS is not one archetype. Different rooms of the city walk in through different doors.

{/* Header */}
USER
USES HOTMESS FOR
WHAT THAT LOOKS LIKE
{users.map((u, i) => { const accent = u.tone === "recovery" ? "var(--recovery-blue)" : u.tone === "gold" ? "var(--gold)" : "var(--ink)"; return (
0 ? "1px solid var(--line)" : "none", }}>
{u.who}
{u.uses}
{u.detail}
); })}

Different doors. Same continuous queer world.

); } // ───────────────────────────────────────────────────────────────────────────── // GhostedSection — mutuality-first interaction. Strategic positioning vs. swipe culture. function GhostedSection() { const fixes = [ { problem: "REJECTION FATIGUE", fix: "Conversation unlocks only on mutual interest. You never see the no." }, { problem: "SPAM + COLD MESSAGING", fix: "No mass open. Both sides have to signal first." }, { problem: "PROFILE SURVEILLANCE", fix: "Ghosted is the default. You're invisible unless you choose otherwise." }, { problem: "EMOTIONAL BURNOUT", fix: "The interaction is opt-in twice. Less noise. More chemistry." }, { problem: "AGGRESSION + HYPER-DM", fix: "No one can DM you without the mutual handshake. Quiet city by default." }, { problem: "ALGORITHMIC CHASE", fix: "Ghosted doesn't gamify. No streaks, no ratings, no rank." }, ]; return (
§07
GHOSTED
Mutuality
before message.
CHEMISTRY LAYER · OPT-IN · DOUBLE-CONSENT
{/* Lede + diagram */}

Two rooms light up.
Then the conversation begins.

Ghosted is HOTMESS' chemistry layer. Mutual energy registers before anyone has to speak. No cold open. No mass DM. No rank, no rating, no streak.

Visibility is opt-in. Ghosted is the default for anything that matters.

{/* What it fixes — 3x2 grid */}
WHAT IT FIXES
{fixes.map((f, i) => (
{f.problem}

{f.fix}

))}
{/* Closing */}

The city stays quieter.
And chemistry actually lands when it happens.

); } // Small SVG diagram for Ghosted: two circles, mutual handshake unlock function GhostedDiagram() { return (
{/* Person A */} YOU signal · sent {/* Connector — animates from dashed to solid when both light up */} MUTUAL {/* Person B */} THEM signal · received {/* Bottom note */} CONVERSATION UNLOCKS ONLY WHEN BOTH SIDES LIGHT UP
); } // ───────────────────────────────────────────────────────────────────────────── // WhyNowSection — category timing argument function WhyNowSection() { const reasons = [ { tag: "VENUE LOSS", v: "Queer venues in London have closed at a rate of one every two months for a decade. The rooms still standing need infrastructure to hold each other." }, { tag: "AMBIENT SPACE LOSS", v: "The internet kept the apps. It lost the magazines, the radio stations, the bars-after-the-bar. The places queer life used to drift through." }, { tag: "ALGORITHM EXHAUSTION", v: "Every queer feed is now run by a company that doesn't know what queer is. Recommendation systems flatten what they touch." }, { tag: "DATING FATIGUE", v: "Swipe culture has trained us to perform for strangers and resent the result. Mutuality-first is the rebuild." }, { tag: "SAFETY UNDERINVESTMENT",v:"After-dark queer safety is still mostly volunteer. Building Silent SOS into the night is overdue, not novel." }, { tag: "LONELINESS, IN PUBLIC",v: "More queer people than ever live in the same postcodes. Fewer have any way to feel each other through the wall." }, { tag: "FRAGMENTED RECOVERY", v: "Comedown care still lives in WhatsApp groups, Sunday lunches, and one trusted DJ. It deserves a layer." }, { tag: "QUEER COMMERCE DRIFT", v: "Sellers, makers, and small queer brands are scattered across platforms that don't know what to do with them. The signal needs a home." }, ]; return (
§18
WHY NOW
Queer infrastructure fragmented.
Now it reconnects.
CATEGORY TIMING · EIGHT FORCES · ONE MOMENT

We needed this in 2018.
We can't wait until 2030.

{[reasons.slice(0, 4), reasons.slice(4)].map((col, ci) => (
    {col.map((r) => (
  • {r.tag}

    {r.v}

    • ))}
))}

HOTMESS exists because
queer infrastructure fragmented.

It's time to reconnect it.

); } // Export to window Object.assign(window, { NightOnHotmessSection, WhoItsForSection, GhostedSection, WhyNowSection, });