WASD DOCS
01 / WHAT IT IS

Display glasses web apps, simulated in your browser

Point WASD at any public URL and it renders the page the way a wearer of optical waveguide glasses sees it: added light over a real scene. Free, in-browser, no hardware.

The in-lens launcher composited over a photograph of a campsite
The simulated display over a real scene. The launcher shown here is the simulator's own; your app takes the same panel.
600×450
DISPLAY VIEWPORT
HTTPS
PUBLIC URL REQUIRED
D-PAD
ARROWS + ENTER INPUT
02 / HOW IT WORKS

Added light, not pixels

Your app loads in an <iframe> and is composited with mix-blend-mode: plus-lighter, the same arithmetic a waveguide performs when it injects light into the eye.

The navigation app as designed, on a black background
What you design
The same frame composited additively over a train platform
What the wearer sees
1

Load a URL. Any public page. It stays fully interactive inside the display.

2

Set placement. Size, position and the optics model. Defaults match the monocular right lens.

3

Change the scene. Lighting and motion decide contrast. Test until something breaks.

4

Capture, record, share, QR. A still, a video, a link that restores your setup, or open it on real glasses.

The same frame at 400, 6000 and 22000 lux, the display fading as ambient light rises
One frame, one design, three ambient levels. Contrast is a property of the environment, not of your design alone.

The optics panel reports the additive contrast ratio from display luminance and ambient illuminance. As a rule of thumb: below roughly 3:1 the panel is fighting the scene, and below 1.5:1 it has lost.

NOT MODELLED: rainbow fringing, eyebox falloff, focal distance, glare, and binocular rivalry. Verify spec-critical work on hardware.
03 / CREATE

Design in light, not ink

A web app for the glasses is a standard web page. Meta's documentation covers setup, input and publishing; this covers the part that is genuinely different.

✓ Design for daylight
Pure black
Emits nothing, so it reads as clear glass.
Bright strokes
Only what you light up reaches the eye.
Cyan & green win
They carry furthest through the combiner.
Aa
Bold beats thin
Heavy weights, generous spacing.
One idea
Assume a one-second glance, off to one side.
✗ Avoid
Gradients die
Thin is invisible
Red & deep blue wash out
Dense is unreadable
If it does not work in sunlight, it does not work.
META: SETUP ↗ META: BUILD ↗ STARTER KIT ↗
HEADS UP: sites sending X-Frame-Options: DENY or a strict frame-ancestors CSP will not render in the simulator. Deploy without those headers, or open the application directly on the glasses.
04 / EXAMPLES

Three demos, one click each

Served from this same origin so they always load. Black ground, bright marks, no stroke under 2px. Load one, raise Ambient, and watch what survives.

↗
Navigation

The archetypal glanceable HUD: big distance, street name, heavy arrow.

OPEN ↗ standalone
00
Timer

Countdown, progress ring, step indicator. Test it against the Cooking scene.

OPEN ↗ standalone
◐
Contrast reference

Bright-on-black keeps reading; dark-on-white disappears. Raise Ambient to watch them separate.

OPEN ↗ standalone
SOURCE: each demo is one self-contained HTML file under demos/ in the repository, with no build step and no dependencies.