Designed ZombiesWeb as two purpose-built products within one project: an exploratory lore system for time-rich sessions and a rapid field manual for players already mid-round.
The audience overlaps; the job, attention, and device context do not. The interface changes because the moment changes-not for visual novelty.
The Primis story begins inside a timeline already shaped by cycles, fractures, and intervention.
Player selected.
ZombiesWeb serves an overlapping audience in two incompatible moments. A lore fan between sessions wants to wander, compare eras, follow branches, and tolerate complexity. The same person during round 18 wants one shield location immediately and cannot afford to explore.
Treating both moments as one conventional website would make the Kronorium too shallow and the Field Manual too slow. ZombiesWeb is therefore structured as two complementary sites within one project, sharing a universe and routes while using different information density, navigation, typography, interaction, and technical delivery.
The visual split is functional rather than cosmetic: the Kronorium behaves like an archival knowledge graph; the Field Manual behaves like operational documentation under time pressure.
ZombiesWeb is deliberately built as two products within one project for an audience whose needs change with the moment. Between sessions, a lore fan wants to explore the universe, compare eras, and understand how branches reconnect. During a live round, often on a phone or second monitor, the same person wants one location or setup answer immediately. The interfaces diverge because the jobs diverge - not simply to create visual variety.
THE KRONORIUM - The exploratory side is a pan, drag, filter, and zoom knowledge graph built with React Flow. A full-canvas spatial interface, archival typography, gold story nodes, fractures, branch reasons, minimap navigation, and progressive lore detail encourage visitors to wander and build a mental model of the timeline. This route accepts greater density and selective React hydration because interaction is the product.
FIELD MANUALS - The mid-round side reverses those decisions. Static Astro routes, direct URLs, strong section anchors, compact industrial typography, orange wayfinding, and image-first location cards minimize time away from play. Easter egg steps, buildable parts, routes, and key locations are deliberately linear and scannable. No graph navigation is required to retrieve one answer.
SHARED PROJECT, DIFFERENT DELIVERY - Both products draw from the same content universe, but Astro's static-first architecture lets each route pay only for the interaction it needs. Field Manuals arrive as useful HTML with little or no hydration; the Kronorium hydrates its graph because spatial exploration genuinely earns the JavaScript cost.
Let the user's moment, not visual consistency, choose the interface.
Use a full-canvas graph, pan and zoom, branching paths, archival gold, and progressive detail.
Use static routes, strong anchors, compact headings, orange wayfinding, and image-first location cards.
01// Static-first + a locked-down CSP. React hydrates only on interactive islands.02export default defineConfig({03 output: "static",04 integrations: [react(), tailwind()],05 vite: {06 plugins: [{07 name: "security-headers",08 configureServer(server) {09 server.middlewares.use((_req, res, next) => {10 res.setHeader(11 "Content-Security-Policy",12 "default-src 'self'; img-src 'self' data:; script-src 'self'; " +13 "frame-ancestors 'none'; base-uri 'self'",14 );15 res.setHeader("X-Frame-Options", "DENY");16 res.setHeader("Referrer-Policy", "no-referrer");17 next();18 });19 },20 }],21 },22});Static-first output with a locked-down CSP - React hydrates only where it must.
The guide has failed its primary job even when every fact is correct.
Node and edge density increases visual and runtime pressure.
No control is presented as total risk elimination.
One audience can move between discovery and utility without forcing either moment into a compromise interface
The Kronorium makes branching lore explorable through spatial interaction
Field Manuals remain fast, direct, and usable during active play