keatons.design · live in your browser

A 13-year-old built
his own WebXR house.

Five themed rooms. Voice chat. Quest 3 + desktop. Walk in with a friend and the avatars move, the doors swing, the targets slide on rails. Open standards from top to bottom — anyone with a browser is already in.

5themed rooms
WebRTClive voice
Quest 3+ desktop
A-Frame0.14.3 · NAF

The frame

One house. Five rooms. All in one tab.

A central lounge with a door on each wall. Walk through any door and the world keeps going — a shooting range, an F1 garage, an escape foyer, a build zone. No loading screens, no app store.

TARGET RANGE BUILD ZONE LOUNGE K GARAGE ESCAPE FOYER → /escape.html N S W E

Top-down. Doors are physical — swing them open, walk through, the next room is already loaded.

Center

The Lounge

Curved sectional, glowing rug, four arched doorways. Where you spawn, where everyone meets up.

North

Target Range

Bullseye + silhouette on ceiling rails, sandbag cover, weapon wall. Live scoreboard.

East

Racing Garage

Glowing F1 car in the bay. Tap to portal into /racing.html — a separate track scene.

→ ENTER
South

Escape Foyer

A small antechamber. The door is a portal — click it and you load into /escape.html.

West

Build Zone

Open the palette, click a block, it spawns in front of you. Grab and place. Local only — Phase 1.

Outside

The Sky

Rings of a gas giant, a drifting blue moon, hemisphere light bouncing warm off the floor. Calm.

How it works

From a fresh tab to a friend waving across the lounge.

Five stages, in order. Each one is a piece you could swap, fork, or rebuild — the whole thing is just web standards stacked carefully.

1

Open the tab. Type a name. Hit enter.

No download, no app store, no login. The join overlay asks two things — your name and whether the mic should be on — then drops you straight into the lounge.

On Quest 3, the same URL pops a button in the bottom corner: Enter VR.

keatons.design One room. Voice + chat. Your name keaton turn on microphone Enter the room →
2

The browser draws the lounge. A-Frame does the heavy lifting.

The scene is HTML. Literally — <a-box>, <a-cylinder>, <a-plane> nested into rooms. A-Frame turns it into a real 3D world with shadows, fog, HDR lighting, and physics.

Open view-source and you can read the whole house. That's the point.

index.html 1 <a-scene physics webxr > 2 <a-plane mixin ="floor" /> 3 <a-box class ="door" position ="0 1 -5" /> 4 <a-cylinder color ="#ff6b35" /> 5 <a-text value ="LOUNGE" align ="center" /> 6 </a-scene> K live preview
3

A second person joins. Networked-A-Frame hands off the avatars.

Behind the scene, NAF 0.14.3 talks to a tiny relay server. When a new tab connects, both browsers learn about each other and the avatars start syncing — head, hands, position, all 60 times a second.

It's WebRTC for voice, WebSockets for state, no proprietary anything.

keaton friend NAF relay cortex-server {x,y,z,head} {voice} protocol WebSocket (state) + WebRTC (audio) · wseasyrtc adapter · ~60 Hz updates
4

You walk through a door. The room theme changes.

Each door is a real swinging entity. Click or grab — it rotates 100°, you walk through, and you're in target range, garage, escape foyer, or build zone.

One door is a portal instead — the F1 garage car and the escape foyer door both load a separate scene at /racing.html or /escape.html. Different physics, different camera, same browser tab.

you → north door · swings open · target range
5

The whole thing is yours to fork.

No SDK. No closed runtime. A-Frame is MIT, Networked-A-Frame is MIT, every model is open-format glTF. The room you're standing in is a .html file you can read, copy, and run.

Keaton's the first author. The next one could be a friend, a classmate, you.

open standards stack A-Frame 1.7 MIT Networked-A-Frame 0.14.3 MIT WebRTC · WebXR W3C glTF · HTML · JS open no SDK · no app store · view-source the room

Surfaces

Two interfaces Keaton built around the room.

The chat panel and the build palette — both are HTML overlays sitting on top of the 3D scene. Keyboard and pointer for desktop; controller and hand-tracking for Quest.

Chat panel

Press T or tap the 💬 button. Type with everyone's voice still live in the background.

chat keaton how do I open the garage jude walk east through the green door kit or just yell at the race car say something…
T to toggle 280 char limit Voice stays live

Build palette

Tap 🔨 BUILD. Pick a primitive. It spawns one meter in front of you. X to delete, drag to place.

Build palette × Cube Sphere Pillar Ramp Disc Wall 🗑 CLEAR ALL placed items
B to toggle Grab + place Local only · Phase 1

What surrounds it

The pieces under the floor.

Six layers, all open. Each one is a thing you could replace without burning down the others.

Engine

A-Frame 1.7

HTML-style entity component system on top of three.js. Declarative tags, real WebGL output, MIT licensed.

Multiplayer

Networked-A-Frame 0.14.3

Syncs avatars, hand poses, and grabbed objects across browsers. Uses the wseasyrtc adapter for the relay handshake.

Voice

WebRTC + EasyRTC

Peer-to-peer audio, mediated by the relay only for signaling. No telemetry, no third-party voice SDK.

Physics

aframe-physics-system v4.2.2

Rec Room / Bonelab–style grabby physics. Gravity, static bodies, ragdoll-able primitives.

XR

WebXR + Locomotion

Native Quest 3 support. Snap-turn and comfort vignette via aframe-locomotion for kids who motion-sick easy.

Hosting

Static HTML + a tiny relay

The rooms are static files. The relay (Node + Socket.io) runs on a Tailscale machine. No platform lock-in.

Chapter two · summer 2026

Then a 13-year-old pivoted the whole site.

The multiplayer VR house still runs — you can walk into it at /archive-vr. But the homepage of keatons.design became something new: RoomFox, a phone-first bedroom designer that anyone can open in 30 seconds. Same web-standards spirit. Different problem.

Why he pivoted

The VR house was beautiful but empty most days. You needed a Quest, a friend, and a reason to show up. Keaton wanted something a classmate could open on a phone at lunch and actually use.

Phone first 30 sec to value Solo, not social AI-native
Homepage · /

RoomFox — plan it

Set your room in feet, drop in a bed, desk, dresser, rug — every piece has real-world dimensions. Drag on a top-down canvas. Upload a photo of your actual floor and it becomes the background.

/scan.html

Scan — point at furniture

Phone camera + TensorFlow.js COCO-SSD runs locally. Point at your bed, couch, desk — it detects them, taps to add. No upload, no server. Real-time bounding boxes over live video.

Photo-to-3D

Meshy AI — see it

Tap a piece, snap a photo of the real thing, Meshy AI builds a glTF model in 1–3 minutes. Then hit Walk in VR and your bedroom, with your actual furniture, renders in A-Frame. Quest 3 or desktop.

Design coach

🦊 Fox advice

Analyzes room fill %, bed-to-wall placement, TV-to-couch distance. "That's tight, you'll bump into stuff." "Push the headboard against the longest wall." Interior design as a tap.

Share

Plan → URL

The whole room encodes into a base64 URL. Text it to a friend, they open your exact layout on their phone. No account, no backend, no login.

/clicker · bonus tool

TapFox — autoclicker

Separate app, same site. Record a sequence of taps and waits on a canvas, replay them with a floating finger cursor. A programmable autoclicker for touchscreen games — built the same weekend.

The commit trail

Five commits, one pivot. Each move shipped as its own atomic version — the multiplayer house is preserved untouched at /archive-vr.

ce404d7
Replace VR rec center with RoomFox — phone planner + VR walkthrough. The pivot commit.
aa4e4b3
Top / side / 3D views — plus photo-to-3D furniture via Meshy AI. Real objects enter the plan.
b9327cf
scan.html — phone camera + AI detects furniture, tap to add. No typing.
d992670
Real furniture photos as planner icons — plus room floor photo background. Personal, not generic.
9e41552
TapFox autoclicker at /clicker. A whole second app, shipped alongside.

What stayed the same: Static HTML. Open web standards. View-source the whole thing. A-Frame still runs the VR walkthrough. glTF still moves the 3D. The site is still a single tab — no app store, no login, no SDK. Keaton is still the first author. The pivot changed the surface, not the philosophy.

Glossary

If you came in cold.

The five terms a parent, teacher, or scout might want a one-line answer for.

WebXR
The browser API that lets a webpage talk to a VR headset. Standardized by the W3C; supported by Quest, Vision Pro, desktop.
A-Frame
A web framework that turns 3D scenes into HTML tags. Built on three.js, MIT licensed, started at Mozilla.
NAF (Networked-A-Frame)
The library that makes A-Frame multiplayer. Handles avatar sync, voice, ownership, and persistence over a relay.
WebRTC
The W3C standard for peer-to-peer audio and video in the browser. Used here for voice chat, no SDK required.
glTF
The open file format for 3D models. Avatars and props are .glb files, drag-and-droppable into the scene.
Quest 3
Meta's standalone VR headset. Opens keatons.design directly in its built-in browser, no install.

Open the door

Come hang out.

The room is live right now. Bring a friend, bring a Quest, bring nothing but a laptop. Knock around for a few minutes.

Live at keatons.design · built by a 13-year-old with help from his dad and a fox named Kit