404 City: The Glitch Metropolis

Type your fate in a city where code collapses—and reality with it.

Comment

Inspiration

The idea for 404 City: The Glitch Metropolis was born from a simple question — what if the internet’s broken code and 404 pages became alive?
We imagined a city built entirely from digital decay: software bugs, abandoned memes, corrupted systems, and failed code updates. Inspired by cyberpunk worlds like Blade Runner and Ghost in the Shell, and nostalgic text adventures like Zork and Fallen London, we set out to fuse retro storytelling with cutting-edge AI.
Our goal: to create a space where chaos itself is playable — a sandbox of errors that somehow runs, powered by an intelligent game master.

What it does

404 City: The Glitch Metropolis is an AI-driven, text-based RPG that immerses players in a living world of digital disorder.
Players interact using natural language — typing commands like “scan the mainframe” or “ask the Glitch Priest about the crash” — and the Google Gemini API interprets their intent in real-time, generating witty, unpredictable outcomes.

The game dynamically updates:

  • Player stats: Health, Armor, and Glitch Level
  • Missions that evolve based on player choices
  • Procedurally generated ambient soundscapes via the Web Audio API
  • A visual interface styled after glitchy terminals and cyberpunk HUDs

In short, it’s a text adventure reimagined with AI — where every command can rewrite the city itself.

How we built it

We built the prototype as a browser-based web app, using:

  • Frontend: HTML, CSS, JavaScript (for terminal UI, HUD, and glitch effects)
  • AI Engine: Google Gemini API to interpret player inputs and generate narrative content
  • Audio: Web Audio API for real-time ambient sound generation
  • Backend: Node.js + Express to handle API calls and persistent player data

The Gemini model acts as a dynamic Game Master, constructing the story world on the fly and maintaining session context for continuity — effectively turning the AI into a living storyteller.
The glitch effects were created with custom shaders and timed CSS distortions to simulate data corruption.

Challenges we ran into

  • Prompt Engineering: Crafting structured prompts that guided Gemini to produce coherent, creative storylines without breaking immersion.
  • State Persistence: Maintaining narrative continuity across turns while balancing unpredictability.
  • Audio Generation: Syncing reactive ambient sound effects with text-based events.
  • Visual Aesthetic: Making the glitch effects immersive but readable across different browsers and devices.
  • Balancing Chaos: Keeping gameplay fun and narratively stable in a world intentionally built to “break.”

Accomplishments that we're proud of

  • Built a fully functional AI-driven narrative engine that adapts to player input.
  • Designed a reactive soundscape that shifts dynamically with the story.
  • Created a unique hybrid of classic text adventure and modern AI storytelling.
  • Developed a living cyber-city that feels spontaneous, self-aware, and full of personality.
  • Delivered a playable demo that captures the atmosphere of a broken yet beautiful digital world.

What we learned

  • How to harness large language models like Gemini for interactive, narrative-driven experiences.
  • How to balance randomness and structure in AI storytelling.
  • The value of player agency in emergent worlds — letting users write their own path through chaos.
  • Techniques for blending procedural audio and text interfaces to heighten immersion.
  • Above all, we learned that even a world of broken code can tell a meaningful story — if guided by the right prompt.

As a fun representation of our key gameplay stat — the Glitch Level — we modeled it like this:

$$ G = \frac{E_r}{S} + \Delta_c $$

Where:

  • ( G ) = Glitch Level
  • ( E_r ) = Error rate in system events
  • ( S ) = System stability
  • ( \Delta_c ) = Player’s chaos factor (actions that induce glitches)

The higher the Glitch Level, the stranger and more unpredictable the city becomes.

What's next for 404 City: The Glitch Metropolis

We plan to:

  • Expand the city’s sectors with new factions, quests, and “glitch biomes.”
  • Integrate multiplayer storytelling, where multiple players’ commands shape the same city in real-time.
  • Add visual overlays for maps, terminals, and corrupted archives.
  • Implement AI-generated art and sound loops for deeper immersion.
  • Release a public beta where players can help the AI “debug” the city together.

Ultimately, we envision 404 City as a persistent, evolving narrative world — one that learns, mutates, and rewrites itself with every new visitor who dares to enter the glitch.

Built With

  • aws-s3-(assets)
  • css
  • docker
  • eslint
  • express.js
  • firebase-auth-&-firestore
  • git/github
  • github-actions-(ci)
  • html
  • javascript-(es6+)
  • jest
  • mongodb/postgresql-(data)
  • netlify/vercel-(hosting)
  • node.js
  • npm/yarn
  • prettier
  • react
  • rest-apis
  • sass/scss
  • three.js-/-webgl-(glsl)
  • typescript
  • vite
  • websockets-(socket.io)
Share this project:

Updates