System Requirements Document for chat-globe

1. Introduction

chat-globe is a consumer social application for chatting with people from across the globe. Its product intent is twofold and inseparable: it must let a person start and hold real two-way conversations with other people located elsewhere in the world, and it must present that experience through graphics that are genuinely unique — a generative, motion-first visual identity rather than a styled chat template.

The audience is globally curious people: students, remote workers, language learners, and night-owl insomniacs who want a stranger in another timezone. The emotional register is playful discovery and wonder, not utility or enterprise trust. The single hard constraint stated by the user — "this app will have a very unique graphics" — is treated as a mandate for procedural, cursor-reactive visuals that no competitor can screenshot-and-copy.

This document defines the current delivery: a first-party web application with application-owned identity, six pages, two accepted human personas, and a procedural visual system built on a wireframe globe, kinetic typography, and generative avatar sigils.

2. System Overview

chat-globe is delivered as a custom first-party web application with a backend service. The current scope contains:

• Public entry and identity access. A Landing page introduces the app as a visually distinctive way to chat with people across the globe. Sign Up provides self-service enrollment. Login provides returning verification so users can continue accessing their durable conversations and messages.
• Protected chat work. People provides discovery and selection of another person located elsewhere in the world. Chats provides a revisitable overview of ongoing global conversations and a continuation point for chat activity. Chat owns the focused two-way conversation where users send and read messages, presented with the app's distinctive graphics.
• Two accepted human personas. The Global Chatter, who starts and holds conversations with other users worldwide, and the Conversation Partner, who receives and replies within conversations.
• A procedural visual system. A wireframe globe of roughly 40 city nodes, arcing message-particles, generative avatar glyphs derived from a user's handle hash, timezone rings, and kinetic headline type. No photography, no illustration, no stock people, no flag emojis.

Narrow exclusions. This document does not define group conversations, media attachments, voice or video calling, contact import, social feeds, or moderation tooling; none were accepted by the source. The visual system excludes blue and indigo entirely, photography and illustrated characters, gradient-blob heroes, glassmorphism, soft-shadow hover-lift cards, centred SaaS hero composition, autoplay motion the user cannot interrupt, large soft radii, and emoji-heavy copy.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. chat-globe is a first-party application. The application owns its own identity: a person establishes an account through self-service enrollment on Sign Up, and a returning person verifies identity on Login. Landing, Sign Up, and Login are reachable without an established session; People, Chats, and Chat require a verified session because they carry durable, person-specific conversation state that must remain bound to the correct participant. There is no provider-owned or external-only surface in the current scope, and no headless delivery mode.

Current boundary. Everything described in Sections 2c, 3, and 5 is current. The two-way conversation lifecycle — discover a person, open a chat, send a message, have the other person read and reply, return later to continue — is complete within the six pages.

Future boundary. Nothing beyond the current scope is committed. Ideas that were not accepted by the source (group chats, media sharing, calling, feeds, moderation) are not planned work and are not represented in any page, requirement, or flow.

Access boundary. Identity establishment is anonymous at its entry: a person reaches Landing, then Sign Up or Login, without a session. A protected destination never owns the interaction that establishes access to itself. Once identity is verified, the session persists so that conversations and messages remain attached to the right person across visits.

2b. Source Content Inventory

Not applicable. No reference directive in this project declares a content_source, so no verified factual inventory is carried into this document.

2c. Page Content and Component Coverage

Landing

• Information and state. Full-bleed 100vh black canvas (#0A0B0E) with a single large wireframe globe (~70vh) drawn in #C6FF3D hairlines, positioned off-centre right. The headline "TALK TO ANYONE / ANYWHERE" is set in Space Grotesk 700 at clamp(56px, 11vw, 176px), stacked in two flush-left lines that cross over the globe's left edge. A single hairline rule at the bottom holds a live counter ("2,481 people awake right now") and one button. No subheadline paragraph, no gradient, no centred stack.
• Primary action. "Start a chat" — a vermilion (#FF4D2E) pill, the only pill on the page, routing an unauthenticated visitor into identity establishment.
• Supporting actions. Hovering a city node names the city in an 11px uppercase micro-label; the globe rotates toward the pointer with elastic easing; headline letters displace within a ~120px cursor radius and snap back.
• Domain entities. City node (name, position on the globe), message-particle (origin node, destination node), live-awake counter.
• Component responsibilities. Globe canvas renders the wireframe sphere, ~40 city nodes, and slow-scheduled vermilion particles arcing between nodes. Kinetic headline layer renders the two-line display type and applies cursor-proximity letter displacement. Micro-label layer renders city names on node hover. Bottom rule renders the live counter and the single vermilion pill.
• States. Loading: the globe draws its latitude/longitude linework progressively; the counter shows a placeholder hairline until the first value arrives. Empty: if the live counter is unavailable, the rule shows the pill alone with no counter text. Success: globe is interactive, nodes respond to hover, the pill routes to identity establishment. Error: if the globe canvas fails, the headline and pill remain fully usable on the black ground with a static hairline circle. Recovery: the canvas re-initialises on the next interaction without a page reload.

Sign Up

• Information and state. A hard-edged flat panel (#131519) with 1px #2A2D34 hairlines, on the #0A0B0E ground. Micro-labels in Space Grotesk 500 uppercase at 11px with +0.18em tracking identify each field, like instrument readouts. Body copy in Instrument Sans 400/500 at 15px/1.6 in cream (#F4F1EA).
• Primary action. Submit enrollment to create the account and establish a verified session.
• Supporting actions. Move between Sign Up and Login; correct a field after a validation error.
• Domain entities. Account (handle, credential, created state), session.
• Component responsibilities. Field group renders handle and credential inputs with micro-labels and inline validation. Submit control renders the enrollment action. Cross-link renders the route to Login for a person who already has an account. Error region renders field-level and form-level messages in vermilion.
• States. Loading: submit control shows an in-progress state and fields lock. Empty: fields render empty with micro-labels only, no placeholder prose. Success: the session is established and the person continues to People. Error: a taken handle, a malformed credential, or a rejected submission renders an inline vermilion message next to the offending field with the entered values preserved. Recovery: the person corrects the field and resubmits without losing other entries.

Login

• Information and state. The same hard-edged panel and hairline treatment as Sign Up, with the same micro-label and body typography. No marketing copy; the panel is an instrument, not a pitch.
• Primary action. Verify identity and open a session that restores access to the person's conversations and messages.
• Supporting actions. Move to Sign Up for a person who has no account; retry after a failed verification.
• Domain entities. Account, session.
• Component responsibilities. Field group renders handle and credential inputs. Submit control renders the verification action. Cross-link renders the route to Sign Up. Error region renders a single non-enumerating verification failure message in vermilion.
• States. Loading: submit control shows an in-progress state and fields lock. Empty: fields render empty. Success: the session opens and the person continues to Chats, where their existing conversations are listed. Error: an unrecognised handle or wrong credential renders one generic vermilion message that does not reveal which field was wrong, with the handle preserved and the credential cleared. Recovery: the person retries, or follows the cross-link to Sign Up.

People

• Information and state. A generative grid of avatar tiles on the #0A0B0E ground, separated by 1px #2A2D34 hairlines. Each tile carries a plotted sigil derived from that person's handle hash, drawn in lime (#C6FF3D) and vermilion (#FF4D2E) hairlines, plus a two-colour plotted bar indicating country and an 11px uppercase micro-label. Tiles nearest the pointer brighten and nudge outward; tiles far away dim.
• Primary action. Select a person to open a chat with them.
• Supporting actions. Move the pointer to shift the brightening/dimming field across the grid; scroll to reach further people.
• Domain entities. Person (handle, plotted sigil, country bar, location), chat (created on selection).
• Component responsibilities. Tile grid renders each person as a sigil tile and applies cursor-proximity brightening and outward nudge. Sigil renderer derives the plotted glyph deterministically from the handle hash. Country bar renders the two-colour plotted indicator. Selection handler opens the chat for the chosen person and routes to Chat.
• States. Loading: tiles render as hairline outlines with sigils drawing in progressively. Empty: when no other people are available to show, the grid area renders a single hairline rule with an 11px uppercase micro-label stating that no one is available right now, and no tiles. Success: tiles are interactive, hover brightens and nudges, selection opens the chat. Error: if the people list fails to load, the grid area renders a vermilion micro-label with a retry control. Recovery: retry re-requests the list and restores the grid in place.

Chats

• Information and state. A dense ruled list, one row per conversation, on the #0A0B0E ground with 1px #2A2D34 hairlines between rows. Each row shows the other person's plotted sigil, their handle, a preview of the most recent message, and a live timezone arc drawn between the two participants' country bars. Rows are full-bleed rectangles with 2px corners.
• Primary action. Open a conversation, continuing it in Chat.
• Supporting actions. Scan the list to see which conversations have recent activity; start a new conversation by routing to People.
• Domain entities. Chat (participants, most recent message, last-activity time), person, timezone arc (two endpoints, drawn arc).
• Component responsibilities. Row renderer draws sigil, handle, message preview, and last-activity metadata. Timezone arc renderer draws the live arc between the two participants' country bars. Continuation handler routes the selected row to Chat. New-conversation control routes to People.
• States. Loading: rows render as hairline skeletons with sigil outlines. Empty: when the person has no conversations yet, the list area renders a single hairline rule with an 11px uppercase micro-label and a control routing to People to start the first one. Success: rows are listed in most-recent-activity order and each opens its conversation. Error: if the list fails to load, a vermilion micro-label with a retry control replaces the rows. Recovery: retry re-requests the list; the person can also route to People and start a new conversation instead.

Chat

• Information and state. The focused two-way conversation. Messages align left and right, but the thread is threaded through a thin vertical globe-meridian line that scrolls with the conversation. The other person's node marker sits on the meridian. Message text is 15px/1.55 in cream; metadata is 11px uppercase in #7A7F8C. The composer is a full-bleed rectangle with 2px corners; the send control is a vermilion pill.
• Primary action. Send a message to the other person.
• Supporting actions. Read incoming messages; scroll the thread along the meridian; return to Chats.
• Domain entities. Message (sender, body, sent time, delivery state), chat (participants, message history), meridian line (scroll-linked thread spine), recipient node marker.
• Component responsibilities. Thread renderer lays out messages along the meridian and scrolls the meridian with the conversation. Composer renders the message input and the vermilion send pill. Send handler fires a vermilion particle down the meridian to the recipient's node marker on send. Recipient marker renders the other person's node on the meridian. Back control returns to Chats.
• States. Loading: the meridian draws in and message rows render as hairline placeholders. Empty: a newly opened conversation renders the meridian with the recipient's node marker and an 11px uppercase micro-label inviting the first message; no message rows. Success: the sent message appears in the thread, the vermilion particle travels the meridian to the recipient's node, and the message shows a sent state. Error: if a send fails, the message stays in the thread with a vermilion failed marker and a retry control on that message. Recovery: retry resends that message; the person can also keep typing and send a later message without losing the failed one.

3. Functional Requirements

FR-1 — Chat with people from across the globe (explicit) As a Global Chatter, I should be able to hold a two-way conversation with a person located elsewhere in the world, so that I actually talk to someone across the globe.

• Trigger/input: the person opens a conversation and composes a message.
• Observable result: the message appears in the thread and is delivered to the other person, who can read it and reply.
• Access state: requires a verified session.
• Failure/recovery: a failed send leaves the message in the thread with a retry control.
• Continuation: the conversation persists and is reachable again from Chats.

FR-2 — Very unique graphics (explicit) As a Global Chatter, I should experience the app through graphics that are genuinely unique, so that the product feels unlike any other chat app.

• Trigger/input: any page render, cursor movement, hover, or message send.
• Observable result: procedural linework — wireframe globe, arcing particles, plotted sigils, kinetic type — responds to the person's input rather than playing a fixed template.
• Access state: applies on every page, public and protected.
• Failure/recovery: if a canvas fails, the page remains usable with static hairline geometry and re-initialises on the next interaction.
• Continuation: the visual system is consistent across all six pages.

FR-3 — Self-service enrollment (required_inference) As a Global Chatter, I should be able to enroll myself before creating or entering durable chats, so that my conversations belong to me.

• Trigger/input: an unauthenticated visitor chooses to start a chat from Landing.
• Observable result: an account is created and a verified session is established.
• Access state: Sign Up is reachable without a session; protected pages remain unavailable until enrollment completes.
• Failure/recovery: a taken handle or malformed credential renders an inline vermilion message with entered values preserved.
• Continuation: on success the person continues to People to find someone to talk to.

FR-4 — Returning verification (required_inference) As a Global Chatter, I should be able to verify my identity when I return, so that I can continue my conversations and messages.

• Trigger/input: a returning person submits their handle and credential on Login.
• Observable result: a session opens and the person's existing conversations are listed on Chats.
• Access state: Login is reachable without a session; protected pages require the verified session.
• Failure/recovery: a failed verification renders one generic vermilion message that does not reveal which field was wrong.
• Continuation: the person continues to Chats and reopens any conversation.

FR-5 — Discover people elsewhere in the world (required_inference) As a Global Chatter, I should be able to see other people located elsewhere in the world and choose one, so that I can start a conversation with someone new.

• Trigger/input: the person opens People and moves the pointer across the tile grid.
• Observable result: tiles near the pointer brighten and nudge outward, tiles far away dim, and each tile shows a plotted sigil and a two-colour country bar.
• Access state: requires a verified session.
• Failure/recovery: if the list fails to load, a vermilion micro-label with a retry control replaces the grid.
• Continuation: selecting a person opens the chat with them.

FR-6 — Revisit ongoing conversations (required_inference) As a Global Chatter, I should be able to see my ongoing conversations in one place and reopen any of them, so that I can continue where I left off.

• Trigger/input: the person opens Chats.
• Observable result: a dense ruled list shows one row per conversation with sigil, handle, message preview, and a live timezone arc between the two participants.
• Access state: requires a verified session.
• Failure/recovery: if the list fails to load, a vermilion micro-label with a retry control replaces the rows.
• Continuation: selecting a row opens that conversation in Chat.

FR-7 — Read and reply as the Conversation Partner (required_inference) As a Conversation Partner, I should be able to read an incoming message and reply to it, so that the exchange is genuinely two-way.

• Trigger/input: the other person sends a message; the Conversation Partner opens the conversation.
• Observable result: the incoming message is readable in the thread, and the Conversation Partner's reply appears in the same thread and reaches the original sender.
• Access state: requires a verified session.
• Failure/recovery: a failed reply stays in the thread with a retry control.
• Continuation: the thread continues and remains reachable from Chats for both participants.

FR-8 — Send feedback along the meridian (required_inference) As a Global Chatter, I should see my send acknowledged in the thread's own visual language, so that I know the message left me.

• Trigger/input: the person sends a message from the composer.
• Observable result: a vermilion particle travels down the meridian line to the recipient's node marker, and the message shows a sent state.
• Access state: requires a verified session.
• Failure/recovery: on failure the particle does not complete and the message carries a vermilion failed marker with a retry control.
• Continuation: the person can retry or continue typing.

4. User Personas

Global Chatter

Product context. The Global Chatter is a globally curious person — a student, remote worker, language learner, or night-owl insomniac — who wants a stranger in another timezone to talk to. They arrive at chat-globe without an account and without a specific person in mind. Their interest is discovery first and conversation second: the appeal is that the world is populated and reachable right now.

Primary goal. To start and hold real conversations with people in other parts of the world, and to come back to those conversations later.

Distinct accepted responsibilities. The Global Chatter is the initiator in this product. They enroll themselves on Sign Up, verify on return at Login, browse the People grid to choose someone, open or reopen a conversation from Chats, and compose and send messages in Chat. They are the actor who decides who to talk to and when to begin.

Relevant inputs and decisions. Their handle and credential at enrollment and return; their pointer movement across the People grid, which is itself the selection instrument; their choice of which conversation row to reopen; and the message text they compose and commit with the send pill.

Interactions with other accepted participants. Every action the Global Chatter takes is aimed at a Conversation Partner somewhere else in the world. The Global Chatter's send is only half of the exchange — the outcome they care about depends on the Conversation Partner reading and replying.

Observable success. A conversation exists in Chats with a real reply in it, and the Global Chatter can leave and come back to find it still there.

Conversation Partner

Product context. The Conversation Partner is the counterpart human in the exchange — also a globally curious person, also a chat-globe user, but arriving at a conversation that someone else started. Their context is reactive rather than initiatory: a message is waiting, or arrives while they are present.

Primary goal. To read what someone in another part of the world wrote and answer them, so that the exchange is genuinely two-way rather than one-sided.

Distinct accepted responsibilities. The Conversation Partner reads incoming messages in Chat, replies in the same thread, and returns to Chats to find conversations that have moved. They also carry the same enrollment and returning-verification responsibilities as any user, because their replies must remain attached to them across visits.

Relevant inputs and decisions. The incoming message content; the decision of whether and how to reply; the reply text they compose and send.

Interactions with other accepted participants. The Conversation Partner's reply is what completes the Global Chatter's goal. Their node marker sits on the meridian of the thread, and the Global Chatter's sent particle travels toward it.

Observable success. Their reply appears in the thread and reaches the original sender, and the conversation continues rather than ending after one message.

5. Core User Flows

Flow A — A new person enrolls and starts their first conversation (Global Chatter)

1. The person arrives at Landing with no session. The 100vh black canvas shows the wireframe globe in lime hairlines, off-centre right, with the headline "TALK TO ANYONE / ANYWHERE" crossing over its left edge.
2. The person moves the cursor. The globe rotates toward the pointer with elastic easing, headline letters displace within a ~120px radius and snap back, and hovering a city node spawns a vermilion particle arcing to another node while an 11px uppercase micro-label names the city.
3. The person reads the live counter on the bottom hairline rule and selects the vermilion "Start a chat" pill — the only button on the page.
4. Because no session exists, the person lands on Sign Up. They enter a handle and credential into the hairline field group, each labelled with an 11px uppercase micro-label.
5. The person submits. The submit control shows an in-progress state and the fields lock.
   • Failure: if the handle is taken or the credential is malformed, an inline vermilion message appears beside the offending field and the other entered values are preserved. The person corrects the field and resubmits.
6. On success the account is created and a verified session is established. The person continues to People.
7. On People, the person moves the pointer across the generative tile grid. Tiles nearest the pointer brighten and nudge outward; tiles far away dim. Each tile shows a plotted sigil derived from that person's handle hash, drawn in lime and vermilion hairlines, plus a two-colour country bar and an 11px uppercase micro-label.
   • Failure: if the list fails to load, a vermilion micro-label with a retry control replaces the grid; retry restores it in place.
8. The person selects a tile. The chat with that person opens on Chat.
9. On Chat, the meridian line draws in and the recipient's node marker sits on it. Because the conversation is new, the thread shows an 11px uppercase micro-label inviting the first message and no message rows.
10. The person types into the full-bleed composer and presses the vermilion send pill.
11. The message appears in the thread with a sent state, and a vermilion particle fires down the meridian to the recipient's node marker.
    • Failure: if the send fails, the message stays in the thread with a vermilion failed marker and a retry control on that message. The person retries, or keeps typing and sends a later message without losing the failed one.
12. Next step: the person returns to Chats, where the new conversation now appears as a ruled row with the other person's sigil, handle, message preview, and a live timezone arc drawn between the two participants' country bars.

Flow B — A returning person resumes an ongoing conversation (Global Chatter)

1. The person arrives at Landing with no session and selects the vermilion "Start a chat" pill.
2. Because they already have an account, they follow the cross-link to Login.
3. The person enters their handle and credential and submits. The submit control shows an in-progress state and the fields lock.
   • Failure: an unrecognised handle or wrong credential renders one generic vermilion message that does not reveal which field was wrong. The handle is preserved and the credential is cleared. The person retries, or follows the cross-link to Sign Up.
4. On success the session opens and the person continues to Chats, where their existing conversations are listed in most-recent-activity order.
5. The person scans the ruled rows — sigil, handle, message preview, and the live timezone arc between the two participants — and selects the conversation they want to continue.
6. On Chat, the thread renders along the meridian line and scrolls with it. The person reads the messages that arrived since their last visit.
7. The person composes a reply and presses the vermilion send pill. The reply appears in the thread and a vermilion particle travels down the meridian to the recipient's node marker.
8. Next step: the person returns to Chats to see the updated preview on that row, or opens a different conversation.

Flow C — The Conversation Partner reads and replies

1. The Conversation Partner arrives at Landing with no session and selects the vermilion "Start a chat" pill.
2. They enroll on Sign Up or verify on Login exactly as in Flow A or Flow B. Their replies must remain attached to them, so this step is required before they can read or answer anything.
3. The Conversation Partner lands on Chats. The conversation someone else started appears as a ruled row with the other person's sigil, handle, and message preview, with a live timezone arc drawn between the two participants' country bars.
4. The Conversation Partner selects that row. Chat opens with the thread threaded along the meridian line and the other person's node marker on it.
5. The Conversation Partner reads the incoming message, aligned to the opposite side of the thread.
6. The Conversation Partner types a reply into the composer and presses the vermilion send pill.
7. The reply appears in the thread with a sent state, and a vermilion particle fires down the