A browser maze that takes a PNG file as input and turns it into a 3D labyrinth — playable on desktop with a keyboard or on a tablet using its accelerometer.
I keep coming back to mazes. Something about the constraints — start, finish, walls, the topology between them — makes the puzzle compact and clean. Most browser mazes are flat. The few that are 3D run on a keyboard. None of them, that I could find, did what I actually wanted: turn a freshly-drawn 2D maze image into a 3D environment you could navigate by physically tilting a tablet.
So I built Chromatic Corridors.
Try it here — runs in any modern browser, supports tilt controls on tablets and keyboard on desktops.
Who this is for
The audience is anyone who likes mazes. Anyone who has wished a tablet were used for something more interesting than scrolling. Anyone who wants to try a project that demonstrates how much modern browsers can do with hardware they already own. Or anyone who has fifteen minutes and a desire to be lost in something.
How it works
The maze is generated from a PNG image. Each pixel in the input image becomes a cell in the maze grid: black pixels are walls, white pixels are open passages. Drop in a different PNG and you get a different maze, instantly. The system reads the image, extrudes the wall cells into towering 3D blocks, and drops you (a ball) into the corridors.
You navigate by rolling the ball. On a desktop, that means arrow keys. On a tablet, that means physically tilting the device — the accelerometer reads the tilt angle and applies a gravity vector to the ball, so the maze feels like it's responding to how you hold the screen.
The collision detection lets the ball slide along walls if you move diagonally, which keeps the controls feeling smooth rather than jerky. An ambient hum plays in the background, synthesised in real time so there are no audio files to download.
The core idea
The principle is that a tablet's accelerometer is one of the most under-used input devices in modern computing. Phones use it for screen rotation. Games on iOS occasionally use it for driving simulators. The browser almost never asks for it, because most browser apps are scrollable documents, not physical experiences. A maze you navigate by tilt is a small argument that the accelerometer deserves more attention.
The implementation uses standard browser APIs for the sensor input and applies the readings as a force vector on the ball's physics. The maze walls render as instanced 3D blocks — one underlying geometry, hundreds of placements, drawn in a single GPU call so the frame rate stays at sixty even on the largest mazes. The orange-on-black aesthetic is deliberate: the maze is rendered in a colour palette that reads cleanly under direct sunlight, so the tablet version stays playable outside.
The moment the tilt becomes natural
The reason for building this is a moment that happens about thirty seconds in. The first few corridors are awkward — you over-tilt, the ball flies, you correct, it overshoots the other way. Then your hand and your wrist make a small adjustment, and suddenly the ball moves where you want it to. The tilt input has become invisible. You're not thinking about angles any more. You're thinking about where to go next in the maze.
That moment is what physical inputs do well that buttons don't. The accelerometer adds an axis of feel to the puzzle. The maze becomes a place you're navigating with your body.
What this is
A maze game that takes a PNG and gives you a 3D environment, playable on either a desktop or a tablet, using either keys or tilt. Free, no account, no install. The maze you play is the maze you draw.
Coming next
A tutorial article and YouTube video are in production: how this maze was built with AI coding agents, including the PNG-to-3D-geometry conversion, the accelerometer integration, and the procedural audio. Subscribe for when it ships.