Spatial Narrative Systems / Front-End Prototyping
Into the Poppyverse
Part story map, part multiverse directory, part emotionally unstable control panel. Over 600 individual story fragments plotted in 3D and read as a place instead of a list.
Focus: Interactive storytelling, graph-based browsing, spatial navigation, visual hiearchy, data-driven static build
"Are Those Kids Allowed Here?" | AREA FIFTY-DONE
—
21 Pilots, Too Many Pilots | BEYOND THE POPPYVERSE
—
Ants & Angels | DESERT ROSEVERSE
—
Being Realistic | PSI-VERSE
—
Someone Is Clearly Screwing Around | INNATELY UNABSOLVABLE
—
You're Nailing It | ULTRAVIOLETVERSE
—
"Are Those Kids Allowed Here?" | AREA FIFTY-DONE — 21 Pilots, Too Many Pilots | BEYOND THE POPPYVERSE — Ants & Angels | DESERT ROSEVERSE — Being Realistic | PSI-VERSE — Someone Is Clearly Screwing Around | INNATELY UNABSOLVABLE — You're Nailing It | ULTRAVIOLETVERSE —
THE DESIGN QUESTION“How do you enter a complex world without reading a manual first?”
Over 600 story nodes, recurring souls across timelines, and universes that occasionally lean on each other's fourth wall. The brief I gave myself for this project was to make everything above navigable without flattening it: atmosphere without losing legibility, mysterious enough to feel like a universe, structured enough to still be a tool.
THE PROBLEMToo interconnected for a table of contents. Too unstable for a map.
This is an interactive map for a large fictional writing archive that had outgrown a flat list: alternate timelines, recurring souls, and universes that occasionally lean on each other's fourth wall. A list view flattens all of that. A wiki buries it in clicks.
So the archive became a place instead of an index: every story is a point in space, positioned by what it's actually about, colored by which branch it belongs to, and wired to the other stories it touches. Content, metadata, and relationships stay in structured CSVs; a Python pipeline regenerates the interface whenever canon shifts. Functionally it's closer to a knowledge graph or an internal documentation tool than a fiction showcase. The dataset just happens to be fictional.
The Draft Horizon: published stories float in front, drafts sit behind.
THE COORDINATE SYSTEMThree scores.
One position.
No two stories collide.
Relativity — X axis
How far the story has wandered from ordinary reality into alternate universes, cosmic entities, or related complications.
Relatability — Y axis
How closely the story resembles recognizable human life: familiar relationships, everyday problems, the general inconvenience of being a person.
Depth — Z magnitude
How much tonal and thematic weight a story carries, from light and easy to more layered, mature material. Direction on Z is decided separately: published stories float in front of the divide, drafts sit behind it.
Unlabelled view
Visible links show node connections
THE MULTIVERSE TAXONOMY20+ branching universes. One hue spectrum.
Every cluster in the archive is a distinct universe branch. Without it being planned as a “design,” the palette that tells them apart turned out to be a single unbroken sweep around the color spectrum.
The Poppyverse’s front door — workplace comedy, growing pains, and everyday life for pilots and their mechanized partners, before things get complicated.
Same multiverse branch, deeper layers, fewer safety rails.
DONOR keeps summoning a hologram with a familiar face and voice, and keeps being surprised by how much it still affects her.
A reflective branch strung together with spider lilies, gold repair, and the things PILOT and DONOR keep trying to protect for each other.
Alternate versions of the same mech souls keep meeting each other across the multiverse to compare notes on their pilots.
PILOT and DONOR live ordinary Apple Park tech lives, except reality keeps hairline-fracturing around them into timelines they never expected.
A top secret research base where the hallways forget basic geography, the elevator remembers people, and the incident log gave up making sense of any of it.
A sun-bleached branch where the desert mirages aren’t the weirdest thing around.
A universe branch grown in the burn scar of Fire Force: spontaneous human combustion, Infernals, Company 8, and the terrible things that grow from bodies the fire did not finish.
A writer publicly interrogates her own relationship to character arcs, identity, and spectacle — live, in manga panel form.
The Johnson Space Center Visitor Center has some unfiled anomalies.
PILOT and DONOR’s regular life, if regular life included extradimensional mech children, cemetery-adjacent small talk, and grocery-store readiness.
The largest branch of the multiverse, and nobody’s fully sure why.
Brainstorming notes for a Gundam-flavoured afterlife where dying doesn’t quite take.
A crossover fusion with The Darkest Minds — a federal task force hunts psychic kids who’d rather just be left alone. Somewhere between a jailbreak and a eulogy.
Retired PILOT and DONOR run a sheep ranch, vend baked goods at farmers markets, and raise kids on bedtime stories that may violate a federal NDA.
A half-assed, failed fusion attempt with the 86 (Eighty-Six) universe. 86 divided by 2 is 43. Yay math. Welcome to the 43.
A sightseeing tour of Washington DC where the monuments answer back and the strangest variable is a woman named Iris with a working phone number.
Live in the shadows, work in the shadows.
Where the metaphors go cosmic — souls, stars, and the site’s own thesis statements about what any of this actually means.
Design iterations
The 3D map has been rebuilt more than once before the divide-plane scatter above shipped. Below are real screenshots from earlier layout experiments.
SHAPE OF A NODENode shape tells you what kind.
Position places a story, colour sorts its universe, and shape says what type of thing you’re actually looking at. Five node forms, readable at a glance.
Story
A regular node — an individual story, the actual narrative content. Click to read.
Intro
Ringed nodes are intro files — the first stop for a given branch or arc.
Author’s note
Meta commentary from behind the curtain — not story canon.
Image story
Told in manga panels — reference art and panel pages, no story text.
Trailer
A teaser for a branch — click to watch on YouTube.
ANATOMY OF A NODEEvery node opens into a full specimen card.
Coordinates, sub-parts, characters, and connections are pulled straight from the row that generated the node: the map and the archive card are never out of sync, because they're built from the same source.
The graph runs on more signal than it shows: ratings and connection edges sit under the hood, but the card only surfaces what a reader actually needs. That split — data model versus interface — is most of the design work.
#INTERNAL_COMMS
welcome to the poppyverse“Slack, but in zero gravity and with a suspicious amount of trauma.”
WHAT IS A LINK?Not just a link. A story relationship.
The faint lines threading between nodes on the map aren’t a technical hyperlink—they’re a story relationship. A link is where characters, timelines, or alternate versions of the same people from separate universes come into direct contact and begin affecting one another.
Less “special crossover episode,” more “the walls between realities have failed inspection.”
Access boundaries
- Cluster dashboards
- Character directories
- Story titles & descriptions
- Relationship maps
- Navigation & archive metadata
- Full story text
Depth-axis scores span the full range, including entries that lean more mature. This boundary is what keeps the page focused on interface and information design, not on the underlying content itself.
BUILD PIPELINEGenerated, never hand-edited.
SRC_clusters.csv + SRC_toc.csv — the source of truth
Python generators (build_all.py) transform rows into pages
Static HTML / CSS / JS — generated, never hand-edited
2D cluster dashboard + 3D relationship graph
Shipped to GitHub Pages, no server required
--skip-3d--skip-2d--skip-home--skip-about
BEHIND THE SCENESNot just a viewer. The whole pipeline.
Static site & build scripts
Python generators turn spreadsheet rows into the homepage, about page, 2D dashboard, and 3D graph. Nothing is hand-edited downstream of the CSVs.
Visual language
Colour system, cluster hierarchy, card drawers, shared navigation, and a fair amount of iteration on cutting visual clutter out of the graph.
CSV-driven content pipeline
Normalization, missing fields, URL cleanup, cluster matching, generated IDs, and connection-graph edges, resolved before a single pixel renders.
Data model vs. interface
Deciding what stays backend signal — ratings, connection edges — versus what a reader actually sees on a card.
GO WANDER