Biome: Polar Aurora Borealis
Biome: Hyperdrive Magenta
Biome: Sapphire Frost Ice

Inspiration

We wanted to build the kind of game that makes people say "wait, this runs in a browser?" Endless runners like Subway Surfers and Temple Run have been a mobile staple for over a decade, but almost nobody builds a fully 3D version for the web. Also, we wanted to make a low skill floor game that still feels amazing to play and looks beautiful, something anyone can pick up in seconds but still enjoy staring at. So, we set out to combine that addictive lane-dodging, jump-and-slide gameplay with a neon cyberpunk city, real WebGL 3D, and a full day-night cycle, all running at a smooth 60fps with nothing, but a browser tab.

What it does

Cyber Runner 3D drops you onto a three-lane rail line racing through a neon city. Dash left and right to dodge oncoming trains, jump over low barriers, slide under high ones, and grab coins and power-ups along the way. Power-ups include a coin magnet, a rocket jetpack that launches you above the trains, super sneakers for higher jumps, a score multiplier, and a hoverboard that absorbs one hit before shattering. The world keeps accelerating the longer you survive, daily missions track your challenges, and a shop lets you spend coins on new runners and upgrades. All the while, the city cycles through daylight, sunset, dusk, midnight, and dawn.

How we built it

The game runs on React 19 for UI and state, layered on top of a custom Three.js engine written from scratch. React owns the menus, HUD, modals, and shop screens, while a dedicated engine class owns the 3D game loop, physics, and collision detection, passing state back to React through lightweight callbacks.

Inside the engine, a procedural chunk streamer spawns track, obstacles, trains, and coins ahead of the player and recycles them behind, so the world feels effectively infinite. Movement runs on real physics constants instead of canned animations. A custom particle engine handles coin sparkles, crash debris, and jetpack exhaust using instanced geometry for performance. A day-night system smoothly blends five atmospheric phases with an orbiting sun and moon. And every sound effect, plus the full soundtrack, is synthesized live with the Web Audio API, with zero audio files shipped. Progress and upgrades persist to local storage.

Challenges we ran into

Keeping the Three.js loop independent of React's render cycle, so HUD updates never caused frame drops, took real care. Tuning jump height, gravity, and lane-shift speed to feel fair as run speed climbs toward its terminal velocity took a lot of playtesting. Synthesizing every sound effect by hand with oscillators and filters instead of using audio files was fun, but fiddly. Collision detection also had to account for height, not just lane and distance, so the engine can tell whether a player is sliding under a barrier, jumping over it, or running along a train roof.

What we learned

We came away with a much deeper understanding of running a real-time 3D engine alongside a modern UI framework without the two fighting each other, plus a lot about procedural generation, both for the endless track and for the audio.

What's next for Cyber Runner 3D

More biomes with unique obstacles, more runner characters and hoverboard skins, an expanded mission system, a leaderboard, and multiplayer ghost runs against a friend's recorded run.