Inspiration
Patrick Jane never claimed to be psychic. He just paid attention. That kept coming back to us: what if a game could do the same thing? Not through AI or algorithms, but through observation mechanics that mirror real cold-reading. Pattern recognition, misdirection, the things people reveal when they think no one's watching.
We wanted it to feel like opening a case file under a single lamp at midnight. Every screen is evidence. Every question is a test.
What it does
Reading Into You is a two-mode psychological browser game. No backend, no accounts, no tracking. Just you, the questions, and Jane.
Mode 1 — The Subject. You answer 12 questions drawn from a pool of 25, split into three acts. Calibration asks who you think you are. Pressure asks who you are when the clock runs (30 seconds per question, a gold bar depleting to red). Misdirection asks who you are when you're not looking. Jane scores your answers across multiple axes and reveals which of 8 archetypes you are, with a monologue explaining exactly how she knew.
Mode 2 — The Observer. You study 5 subject dossiers, read the behavioral clues, and make 4 deductions per subject. Jane holds her judgment until the end, then stamps your correct reads in gold. Your accuracy earns a Perception Rating from Rookie to Patrick Jane.
Both modes finish in under five minutes and end with a verdict: Case Closed.
How we built it
The stack is small: React 18 + Vite 6, CSS Modules (hand-written, no UI framework), uisfx for synthesized sound, Vitest + Testing Library for 35 tests. Three runtime dependencies total.
The architecture is a plain useState screen router in App.jsx. No state library, no context, no Redux. Each screen is a self-contained component tree. Intro leads to ModeSelect, which branches to SubjectGame or ObserverGame, each ending at Reveal or PerceptionRating.
The scoring engine in scoring.js is where we spent the most time. Word inputs use keyword matching. Drag-rank items get scaled weighting. Multiple choice uses direct lookup. It also detects mid-session patterns — inconsistency, repetition, hesitation — which lets Jane drop observations during gameplay: "You hesitated. I don't hesitate."
The design system came before any components: a 330-line DESIGN.md establishing the Case Dossier metaphor. Midnight background, bone-paper text, one gold accent used only for selection, correctness, and the verdict. Red reserved for pressure and error. Playfair Display for letterhead, Special Elite for Jane's typewriter voice, Inter for the archive record. No shadows, no gradients. Flat surfaces separated by tone and a 1px gold hairline.
Audio was what made the game feel alive. The ambient loop was synthesized with ffmpeg using detuned sine drones. UI sounds come from the uisfx zen pack: pure tones, dry wood, typewriter keys. Sound starts on first click (browsers block autoplay). A persistent mute toggle sits in the corner. Every sound reinforces a visible state change. Nothing is audio-only.
Challenges
The timer was harder than expected. Act 2 needs 30 seconds of pressure, not punishment. We went through four versions before landing on a depleting red bar with a recording loop that shifts to a warning pulse at five seconds. The constraint that fixed it: Misdirection Red only appears in Act 2. That forced us to solve the pressure problem through timing and sound, not just color.
Word input scoring was deceptively messy. We wanted any phrasing to work, so the scorer matches against keyword clusters per archetype, normalizes input, and handles synonyms. We wrote data invariant tests to catch contradictory scoring maps.
The Mode 2 batch reveal took the most iteration. Each row surfaces with a 450ms stagger. Correct reads get a gold stamp with typewriter confirmation. Wrong reads stay blank — no correction, no color. Jane's closing line, "You guessed. I do not guess," needed to land after all rows, not before. Getting the stagger to feel like pages turning rather than a loading spinner was the hardest animation problem in the project.
What we're proud of
The copy is the product. 1,538 lines of authored psychological writing, not generated filler. Every archetype monologue, every Jane observation, every deduction feedback line was written to feel like a real mentalist speaking directly to you. The game works because the writing works.
Three dependencies. React, uisfx, and the fonts. Everything else — scoring engine, design system, audio layer, rate limiter, adaptive difficulty, PWA — is hand-written. The entire runtime is under 12,000 lines.
35 tests that matter. Not vanity coverage. Tests for sound semantics, loop cleanup, scoring correctness, data invariants, and interaction deduplication. The suite caught three real bugs during development.
What's next
More subjects, more questions. The pool architecture makes adding content easy. The hard part is writing more good copy.
Full WCAG 2.2 AA audit. Contrast verification, timer accessibility, formal keyboard audit.
Log in or sign up for Devpost to join the conversation.