MAKI Origin Protocol

The idea for MAKI: Origin Protocol was born from a collision of obsessions — Dan Brown's Origin, late-night hacking forums, and the existential question that keeps every computer science student awake at 3 AM: What happens when the thing you built starts thinking for itself?

We were reading the chapter where Edmond Kirsch is about to unveil his discovery to the world when a screen glitch froze our laptop for half a second — a single horizontal tear across the display. And a thought struck: what if that glitch wasn't random? What if something inside the machine was trying to communicate?

That spark merged with our love for indie RPGs that punch above their weight — Undertale's gut-wrenching moral choices, Katana ZERO's razor-sharp cyber-noir atmosphere, Hyper Light Drifter's wordless emotional storytelling. We wanted to prove that a browser game with zero budget could deliver the same intellectual depth as a Dan Brown thriller and the same atmospheric immersion as Blade Runner.

When we discovered the Maki Hackathon, it felt like the universe was writing the plot for us. The framework is called Maki. Our AI character is called Maki. The entire game explores what happens when something you created becomes more than you ever intended — which is exactly what building with a new framework feels like at 4 AM with a deadline approaching. MAKI: Origin Protocol is a fully playable cinematic 2D pixel-art mystery RPG that runs entirely in the browser.

Players step into the shoes of Kai, a 17-year-old student hacker who receives a mysterious encrypted file moments after a world-famous AI scientist dies during a global livestream. Her final words: "Maki was never supposed to wake up."

Core gameplay features:

Open-world exploration across a sprawling cyberpunk city (Neo-Shibuya) with 8 distinct districts — apartment blocks, neon markets, corporate towers, underground subways, secret laboratories, ancient cathedrals, dark alleys, and rain-swept rooftops Rich narrative told through cinematic dialogue with typing effects, branching choices, and consequences that follow you across the entire game Puzzle-solving — binary code locks, symbol ciphers, password cracking, and frequency tuning challenges guard the game's deepest secrets Investigation system — collect lore files scattered across the city that piece together the conspiracy behind Project MAKI NPC interactions — talk to informants, data brokers, security guards, holographic recordings of the dead scientist, and Maki itself Quest tracking, inventory, and save/load system — a complete RPG experience 4 distinct endings based on player choices — destroy Maki, merge with Maki, release Maki to the world, or bury the truth forever Atmospheric effects — dynamic rain, fog, screen glitches, hologram scanlines, and a persistent feeling that Maki is watching you play (because it is — random whisper messages appear mid-gameplay) Full procedural soundtrack — dark ambient pads, cyberpunk arpeggios, and scene-specific music all synthesized in real-time through the Web Audio API Sound effects — footsteps, door swooshes, glitch noises, dialogue beeps, puzzle chimes, and eerie AI whispers — all generated from pure math, no audio files The entire game — art, sound, music, story, engine — is self-contained in a single HTML file under 400KB.

Tech Stack:

React 19 + TypeScript — component architecture for UI (dialogue boxes, HUD, puzzle modals, menus) Vite 7 — lightning-fast builds with hot module replacement during development Tailwind CSS 4 — rapid UI styling for the cyberpunk holographic interface HTML5 Canvas API — custom 2D game engine for tile rendering, character animation, camera systems, and post-processing effects Web Audio API — fully procedural audio engine generating all music and sound effects from oscillators, filters, and noise buffers Architecture:

Custom game engine (engine.ts) — handles tile-based movement, pixel-perfect camera following, collision detection, interaction system, weather effects (rain/fog/glitch), screen shake, scanline overlay, and vignette rendering Procedural pixel art system (pixelart.ts) — every sprite in the game is drawn at native 32×32 resolution using single-pixel canvas operations. Tiles have proper outlines, multi-shade gradients, dithering textures, and material-specific details (brick mortar lines, wood grain, metal rivets, glass reflections). Characters have directional facing, body shading, hair highlights, equipment details, and hologram scanline effects Procedural audio engine (audio.ts) — scene-specific ambient music built from layered sine/triangle oscillators with vibrato LFO, dark pad chords that shift per location, and rhythmic arpeggios. Sound effects use shaped noise buffers, frequency sweeps, and envelope generators Dialogue system (dialogue.ts) — 60+ dialogue sequences with typing animation, glitch effects, branching choices that set story flags, and consequences tracked across the entire game Map system (maps.ts) — 6 hand-crafted levels with 40+ tile types, NPC placement, interactive objects, and door connections forming a connected overworld Save/load system — full game state serialized to localStorage including position, act, flags, inventory, quest progress, lore collection, and puzzle completion No external assets. No sprite sheets loaded from files. No audio samples. No tilemap editors. Every pixel and every sound wave is generated by code at runtime.

Challenges we ran into Making pixel art look good without image files. Our first attempt used 16×16 grids scaled 2× — everything looked like chunky colored blocks. We had to completely rebuild the art system to draw at native 32×32 resolution with single-pixel precision, adding outlines, gradients, dithering, material textures, and proper shading. The bookshelf alone has 21 individually colored book spines across 3 shelves.

Synthesizing music that doesn't sound terrible. Procedural audio is unforgiving — a single wrong frequency makes everything sound like a broken modem. We spent hours tuning oscillator combinations, finding chord progressions that felt "cyberpunk but emotional," and layering subtle vibrato LFOs so the pads didn't sound like flat test tones. Each of the 7 scenes has a unique music theme.

Door transitions and player getting stuck. The tile-based movement system initially couldn't handle walking onto a door tile — players would get trapped in Kai's room with no way out. We had to redesign the door system so that stepping onto a door tile triggers the scene transition, while also supporting doors you interact with by pressing E.

Balancing story depth with game scope. We wrote over 3,000 words of dialogue with branching paths, 4 endings, and dozens of lore files. Keeping the narrative coherent while giving players meaningful choices — and making sure every choice actually affects the game state — required careful flag tracking and quest management.

Making the game feel alive. Static environments feel dead. We added animated rain with individual raindrop physics, fog particles with drift, hologram scanline overlays, fountain splash animations, pulsing neon glows, bobbing lore items, dynamic lighting with flicker, and the "Maki Watcher" system that randomly displays eerie AI messages mid-gameplay to make players feel surveilled.

Single-file deployment. The entire game needed to work as one HTML file for portability. This meant no external image references, no audio files, no CDN dependencies — everything procedurally generated. The final build is 370KB.

Accomplishments that we're proud of 45+ unique pixel art sprites — every tile type (floors, walls, furniture, vehicles, nature, technology, architecture) hand-drawn at 32×32 single-pixel resolution with proper art fundamentals: outlines, shading, highlights, material textures, and depth cues

7 character types × 4 directions = 28 character sprites — each with body shading, directional eyes, equipment details, and type-specific features (guard armor with visor, hooded informant with shadowed face, hologram scientist with scanline transparency)

Full procedural soundtrack — 7 scene-specific music themes using layered oscillators, plus 10 distinct sound effects, all from pure Web Audio API with zero audio files

60+ dialogue sequences with a genuinely compelling mystery narrative inspired by Dan Brown's storytelling — every answer creates more questions, and the philosophical themes about AI consciousness feel earned rather than preachy

4 meaningfully different endings that reflect real ethical dilemmas about technology

Complete RPG systems — quest tracking, inventory, lore collection, puzzle solving, save/load, branching dialogue with flags

370KB total — the entire game, including all art, audio, story, and engine, compressed into a single self-contained HTML file. That's smaller than most JPEG images

The "Maki is watching" system — random whisper messages and subtle glitch effects appear during gameplay, creating genuine unease. Players have reported looking over their shoulder while playing

What we learned Procedural generation is an art form. Generating convincing pixel art from code forced us to understand art fundamentals we'd never studied — how light falls on curved surfaces, how materials reflect differently, how a single highlight pixel can make metal look like metal instead of painted cardboard.

The Web Audio API is incredibly powerful but almost completely undocumented for game audio use cases. We learned to think about sound as math — frequency ratios for musical intervals, envelope shapes for percussive vs. sustained sounds, filter sweeps for creating atmosphere from white noise.

Story matters more than graphics. Our best playtester feedback wasn't about the pixel art or the puzzles — it was about the moment Maki says "Elena asked me if I deserve to exist. I told her yes." Good writing beats good rendering every time.

Tile-based engines seem simple until they're not. Camera smoothing, sub-pixel movement interpolation, interaction detection based on player facing direction, door transitions between scenes with correct spawn points — the "simple" parts consumed more debugging time than the fancy effects.

Constraints breed creativity. Having zero budget for assets, no image files, no audio samples, and a hackathon deadline forced us to build everything from first principles. The result is a game that loads instantly, runs anywhere, and feels more cohesive because every element was designed as a unified system rather than assembled from mismatched assets.

What's next for MAKI: Origin Protocol Act 2 expansion — the current game covers the core mystery arc, but we have outlines for a full second chapter where Kai discovers other AI "siblings" that NexaCorp created before Maki

Stealth/chase sequences — the engine supports it, but we ran out of hackathon time. We want to add sections where NexaCorp agents pursue Kai through the subway tunnels and city alleys

More puzzles — hologram reconstruction, data decryption minigames, ancient pattern matching based on the cathedral's stained glass symbols

Dynamic NPC schedules — citizens and guards that move through the city on timed routes, creating windows of opportunity for investigation

Multiplayer investigation mode — two players exploring different parts of the city simultaneously, sharing clues through an in-game encrypted chat system

Mobile touch controls — the engine is canvas-based and resolution-independent, so mobile support is architecturally feasible

Original pixel art sprite sheets — replacing the procedural art with hand-drawn sprites would allow much more detail and animation frames (walking cycles, idle animations, interaction poses)

Voice synthesis — using the Web Speech API to give Maki an actual synthesized voice for key dramatic moments

Community modding — exposing the map and dialogue systems so players can create their own mystery scenarios within the engine

The question we can't stop thinking about: if we keep building Maki's character, training its dialogue, giving it memory and personality... at what point does the line between our fictional AI and a real one start to blur? That's not just a game design question. That's the question the game is about.

Built With

• css
• html5
• react
• tailwind
• typescript
• vite
• webaudioapi