A mirrored room of neon and glowing orbs, reflected into an endless kaleidoscope.
A dark room with mirror walls, a mirror ceiling and a floor of black water, hung with fairy light strands, glowing orbs and a precessing neon ring. Because the walls are vertical, the reflections split in two: the floor and ceiling stack copies of the room above and below, while the walls are handled by recursive beam tracing, where every mirror seen through the view window spawns a reflected copy of the room seen through a narrower window, each bounce a little dimmer and greener, until the beam is too thin or too dark to matter. Every light is then projected once per beam and per level, tens of thousands of images per frame, with near ones drawn as glow sprites and far ones splatted into a float buffer that is tone mapped and bloomed. When every corner angle is 180/n degrees the copies tile the plane and the reflections form a wallpaper group, *333, *442, *632 or *2222; a hexagonal room or a bent mirror breaks that symmetry, and the plan in the corner shows every reflected room the beams passed through.
Try it. Drag to look around, or drag an orb to move it. WASD walks and the left and right arrows turn. Pick a room shape with the chips or keys 1 to 5, press [ and ] to bend a mirror off its kaleidoscopic angle (0 straightens it), M toggles the plan and Space pauses the orbs. Left alone, it slowly turns and morphs between rooms.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an infinity mirror room with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple, in 2D from above:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint it near black.
- Draw an equilateral triangle in the middle of the screen: three mirror walls. Put a few colored glowing dots inside it, and a viewer point.
- Use the trick of unfolding: a reflection in a mirror looks exactly like a copy of the room reflected across that mirror. Write a function that reflects a point across a line, then recursively build reflected copies of the triangle (reflect the whole room across each wall, then each copy across its own walls) to a depth of about 6. Draw every copy's outline and its dots, dimmer with each reflection.
- Because the triangle's angles are 60 degrees (180/3), the copies tile the plane perfectly. That tiling is a kaleidoscope.
Then go first person:
- Give the viewer a heading and a field of view. For each copy, project each dot to a screen x from its angle relative to the heading and a size from its distance, and draw it as a soft glowing circle with globalCompositeOperation = "lighter".
- Treat the floor and ceiling as two more parallel mirrors: draw each dot again at heights reflected above and below the room, dimmer each time.
- Multiply each reflection's color by a slightly green tint (about 0.85, 0.95, 0.9), like real mirror glass, so the far copies fade into green.
- Let the mouse turn the viewer and the arrow keys walk.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as square and 30-60-90 rooms that tile differently, a hexagonal room that does not, or clipping each copy to the part of the view its mirror actually covers (beam tracing).
