How it works
This document covers the full interaction model — navigation, modes, image layer, annotations, keyboard shortcuts, accessibility, and the philosophy behind the decisions. Consider it the operator's manual.
The narrative is parsed at runtime from a structured template literal into discrete units: sentences, subchapter breaks, chapter breaks, bullet items, numbered items, line breaks, and bracket annotations. Each unit becomes a DOM element with its own state.
Active State
The current sentence is full opacity, full white with a subtle goldenrod glow. All other sentences dim to 50% opacity. This creates a spotlight effect — peripheral sentences remain legible but clearly subordinate to the one in focus.
Hover State (Desktop)
Hovering any non-active sentence raises it slightly — all other sentences dim further to 25% opacity. This allows the reader to preview a sentence without committing to it, and surface its associated image if it has one.
Subchapter Breaks
Editorial titles rendered at reduced opacity with a fine accent-colored top rule. They don't advance the sentence index — they're structural markers, not navigable elements. Their titles are editorially opinionated, often sardonic.
Chapter Breaks
Full-width separators with a chapter number and title. Clickable — they open the chapter dropdown directly. The chapter break for the next chapter appears inline in the stream at the exact sentence where that chapter begins.
The reading contract: you don't choose what to skip. You move through the piece at the pace the piece demands. The format is the argument.
Images are not embedded in the text as blocks. They exist in a separate layer behind the text, surfaced associatively through phrase-to-image bindings called the imageMap.
imageMap
A key-value dictionary mapping specific phrases in the narrative to image URLs. When a sentence containing a mapped phrase is active, the associated image is automatically loaded and displayed as a full-viewport background behind the text. When the sentence changes, the image fades out.
Image Triggers
Phrases that appear in the imageMap are rendered as underlined trigger buttons within the sentence text. Hovering (desktop) or focusing (keyboard) a trigger surfaces its associated image independently of sentence activation — allowing a reader to linger on a specific visual reference. Triggers are styled inline so they don't break reading flow.
Parallax
The image layer and text layer move at different rates in response to mouse position. The text layer has a weaker parallax coefficient (0.03); the image layer is stronger (0.15). This creates a shallow depth-of-field effect — text floats in front of imagery. A center-magnet effect subtly pulls both layers toward a resting center when the mouse stops moving.
Image Grid
Pressing G or the SPC cluster key opens the Image Grid — a full-screen overlay displaying every image in the piece, organized by chapter. Each image shows its associated sentence text on hover. Clicking an image closes the grid and jumps directly to that sentence in the stream. This gives visual readers a non-linear entry point into the narrative.
Focus Mode — Cursor Thumbnail
In Focus Mode, the background image layer is suppressed entirely. Instead, hovering an image trigger expands the custom cursor into a 220×130px letterbox thumbnail that follows the pointer. The image is intimate — tied to the cursor rather than flooding the viewport. This is the highest-contrast reading state: text only, with images accessible on demand at the pointer tip.
Bracket annotations are inline footnotes — parenthetical asides, self-corrections, sardonic commentary, and contextual detail that would interrupt the main sentence if rendered inline. They appear throughout the narrative as [+] triggers.
Interaction
Clicking or pressing Enter/Space on a [+] expands the annotation content inline, immediately following the trigger. The trigger changes to [−]. The content is rendered in a smaller, muted italic with a left accent rule — visually distinct from the main narrative but within the same flow. Click again to collapse.
Accessibility
Bracket triggers are <button> elements with aria-expanded and aria-controls attributes that reflect toggle state. Screen readers announce "Expand annotation" / "Collapse annotation" as the state changes.
Design intent
The annotation is the voice behind the voice. Where the main text is confident and declarative, the brackets are self-aware and digressive. They reward readers who pause. They're optional — the piece reads completely without them — but they contain some of its most honest moments.
Each mode is a different reading contract — a different theory of how to engage with the piece. They're not settings. They're states of attention.
Full experience. Parallax imagery behind text. All chrome visible. Both text and image layer active simultaneously. The intended default.
Text occupies the left half. Imagery is pinned to the right at fixed position. Reading and looking happen side by side without overlap.
All chrome hidden. Stats widget ghosts to 8% opacity but prev/next buttons remain live. Background images still surface. Longpress (300ms) on mobile triggers this. Top-right hotspot restores UI.
Chrome hidden. Background image layer suppressed. Grain, vignette, and edge blur removed. Cursor becomes a letterbox thumbnail on image-trigger hover. The purest reading state.
Modes are not mutually exclusive with themes — you can be in Focus Mode with the Newspaper theme active. The mode cluster widget reflects active state via a goldenrod glow on each key button.
Hotspots
In both Read Mode and Focus Mode, the top-right corner of the viewport becomes an invisible hotspot. Moving the cursor there transforms it into a close (✕) cursor. Clicking restores the full UI — no keyboard required.
The narrative is divided into 11 chapters, each beginning at a defined sentence. Chapters are structural — they group related content and provide jump targets. Subchapters are editorial — they title sections within a chapter without creating navigation targets.
Chapter Dropdown
Opened via the brand logo (top-left), the C key, or clicking any chapter break in the stream. Lists all chapters with their sentence count. The active chapter is highlighted. Clicking any item jumps immediately. The dropdown is a draggable widget — drag by the header to reposition it anywhere on screen. Position persists across open/close cycles for the session.
Progress Rail
A column of dots on the right edge (desktop). Each dot represents a chapter. The active chapter glows gold. Completed chapters are filled at reduced opacity. Hovering reveals the chapter title via a tooltip. Clicking jumps to that chapter.
Subchapter Navigation
The left rail accessibility controls include subchapter stepping — jump forward or backward by subchapter section within the current chapter. Useful for skimming through long chapters without losing structural position.
The full keyboard map. All shortcuts are single-key unless noted. Case-insensitive unless noted.
| Key | Action |
|---|---|
| Space | Next sentence |
| ↓ j | Next sentence |
| ↑ k | Previous sentence |
| Backspace | Previous sentence |
| → | Next chapter |
| ← | Previous chapter |
| G | Toggle Image Grid |
| C | Toggle Chapter dropdown |
| H | Toggle Read Mode (hide/show UI) |
| F | Toggle Focus Mode |
| T | Cycle theme (Default → Newspaper → Sport) |
| L Shift | Toggle Layout (Layered ↔ Split) |
| Home | Reset to first sentence |
| Esc X | Close active overlay / exit mode / close dropdown |
Escape follows a priority order: Focus Mode → Read Mode → Chapter Dropdown → Image Grid → Split View → Rotate Warning.
All persistent UI chrome follows the same visual grammar: rgba(0,0,0,0.6) surface, 1px border at rgba(255,255,255,0.1), 6px radius, backdrop-filter: blur(12px). All draggable widgets share a consistent drag handle glyph and grab cursor.
Mode Cluster (top-right)
An inline row of key buttons: SPC, G, C, F, H, T, L. Each button is labeled with its key and a one-word description. Active modes glow accent gold. The cluster is draggable. On mobile, F, H, C, and SPC are hidden — only G, T, and L are shown.
Stats Widget (bottom-left, desktop)
Displays three live counters: sentences read, brackets opened, and chapters visited. Values pulse with a scale animation on each increment. The widget is draggable. In Read Mode it ghosts to 8% opacity but the prev/next navigation buttons within it remain fully interactive.
Keyboard Legend (bottom-right, desktop)
A compact key cluster showing the four directional arrow keys. Each key is a button — clicking fires the same action as the keypress. Tooltips on hover. Draggable.
Left Rail
A narrow panel pinned to the left edge. Contains font-size accessibility controls (three levels: default, large, larger) and a vertical label. Disappears in Focus Mode and Read Mode.
Chapter Dropdown
Opens below the brand logo. Fully draggable by its header. Position is stored in memory and restored on each subsequent open — it remembers where you left it. Closing and reopening returns it to the last dragged position, not the CSS default.
Custom Cursor
The system cursor is hidden. A custom circular cursor (20px, difference blend mode by default) follows the pointer with smoothed interpolation. States: default ring, hovering (expands to 36px, accent tint), pointer (shrinks to 14px, filled), close-mode (expands to 60px with ✕ glyph), and thumb-active (220×130px letterbox thumbnail in Focus Mode).
Three themes, cycled via T or the mode cluster. Each theme is a complete visual and typographic reskin — not just a color swap.
Default (Dark)
Black background. White text. Goldenrod accent (#daa520). Space Mono for UI, Crimson Text for body. Vignette at 85% opacity. Grain at 8%. Edge blur active.
Newspaper
Warm off-white background (#faf8f3). Near-black text. Saddle brown accent (#8b4513). Same type pairing. Vignette reduced to 12% — barely perceptible. Grain at 8%. The piece reads like something printed.
Sport
Deep charcoal background. Near-white text. Fire orange accent (#fa3c00). Switches body and UI font to Inter. Tighter line height, stronger letter-spacing, bolder chapter break borders. Accent-tinted borders throughout. The piece reads like a brief.
Theme transitions include a brief grain opacity fade to zero and back, preventing a harsh flash between color states.
Mobile is a fully supported first-class experience with its own interaction model — not a degraded desktop view.
HUD Widget
A floating bar centered above the safe area at the bottom of the screen. Contains prev/next navigation buttons flanking the three stat counters. Animated entrance on load. In Read Mode, the widget ghosts to 8% opacity but both nav buttons remain fully interactive at full opacity.
Longpress → Read Mode
A 300ms longpress anywhere on the stream hides all UI chrome and enters Read Mode. This is intentionally close to a normal tap — deliberate but not laborious. A subtle vibration confirms the gesture on supported devices. Any swipe navigation works normally while in Read Mode.
Mobile Mode Cluster
The mode cluster is visible on mobile but reduced: F and H are hidden (longpress handles Read Mode; Focus Mode is desktop-cursor-dependent). G, T, and L remain — grid, theme, and layout are all mobile-accessible. No drag handle on mobile.
Rotate Warning
Split View requires landscape orientation. If a mobile device is in portrait while Split View is active, a rotate prompt appears. It includes a hotspot — tapping the top-right corner dismisses it and reverts to Layered mode.
Toasts are the site's passive onboarding mechanism. They surface contextually — triggered by behavior, time, or session state — and never repeat within a session once dismissed.
Welcome Banner Pool
A pool of 6 welcome banners, each highlighting a different mechanic: navigation, annotations, image triggers, keyboard shortcuts, Split View, and the Image Grid. One is shown on each page load within a session, in sequence. After all 6 have been shown, the cycle restarts. The banner appears after a 1.8 second delay.
Ambient Pool
6 contextual hints that appear during natural reading pauses, beginning 30 seconds after load. These include deeper feature discoveries: the theme switcher, Split View, focus modes, the image grid, bracket annotations. Each fires once per session, never more than one every 45 seconds.
Idle Detection
If no navigation occurs for 15 seconds, an idle toast appears prompting the reader to continue. Different prompts for mobile (swipe hint) and desktop (spacebar hint).
Bracket Nudge
If the reader reaches sentence 15 without opening any bracket annotation, a toast appears pointing toward the [+] mechanic. Fires once per session only if the condition is met.
Return Detection
If the reader has visited before (tracked via sessionStorage), a different welcome toast fires: "Welcome back — press Space to pick up where you left off."
End CTA
On reaching the final sentence, a banner toast fires with a call to action. This is the only toast that makes a direct ask of the reader.
Toasts appear in two variants: standard (bottom-left stack, up to 2 concurrent) and banner (centered below the header, one at a time, bypasses the stack limit). The aria-live="polite" container ensures screen readers announce toast content without interrupting active reading.
Accessibility was added as a deliberate pass after the site's core mechanics were built — not as an afterthought, but as a considered layer over an interaction model that is inherently non-standard.
Keyboard Navigation
Every sentence is a focusable element (tabindex="0", role="button") with an aria-label containing the full sentence text. Tab moves through all interactive elements including sentences, image triggers, bracket buttons, nav buttons, and mode keys. Enter activates the focused sentence or trigger.
Screen Reader Support
A dedicated aria-live="assertive" announcer (#srAnnouncer) announces the active sentence text on each navigation step. This is separate from the toast aria-live="polite" region. The active sentence also receives aria-current="true".
Focus Ring Behavior
Focus rings on sentences are suppressed during normal reading navigation (arrow keys, spacebar, scroll). They appear only when the user navigates via Tab — detected via a data-tab-nav attribute on <body> that is set on Tab keydown and cleared on any other input. All other interactive elements (buttons, triggers) always show focus rings.
Image Accessibility
Image triggers are <button> elements with aria-label="View image: [phrase]". They respond to focus and blur for show/hide the same as hover. Grid images use the associated sentence text as alt text — the most semantically meaningful description available.
Landmarks & Structure
The page has a <main> landmark, a <nav> wrapping the chapter progress rail, a <header>, and an <article> wrapping the stream. A skip link (Skip to content) is visible on focus, positioned fixed at the top-left and linked to #stream.
Reduced Motion
The site respects prefers-reduced-motion. Parallax movement, entrance animations, and transition durations are suppressed when the system preference is set.
The site's artistic vision and accessibility are not in conflict. The sentence-step mechanic is inherently more accessible than continuous scroll for some users — it enforces a reading pace and makes every unit of content discrete and addressable.