Working Draft

We speak with Niels Leenheer about playful browser experiments, strange hardware, and why the web is still a great runtime for doing things it was never really designed for.

After a short recap of beyond tellerrand Düsseldorf and Niels’ earlier appearances in Revision 273 and Revision 358, we dig into clocks, oscilloscopes, DMX lights, lasers, Doom, and a lot of CSS.

Shownotes

[00:03:08] HTML5 Test and old browser API experiments

Niels introduces himself as a Dutch web developer who has been playing with the web since 1993. We talk about HTML5 Test, a project that once gamified browser support for new HTML5 features and even influenced browser vendors to implement APIs they had not originally prioritized. Today the test is mostly obsolete, but that is also because HTML5 succeeded.

[00:07:42] beyond tellerrand and creative web work

We recap beyond tellerrand Düsseldorf, where Niels gave a talk about his browser-based tinkering projects. The conversation also touches on the current AI-heavy mood in the industry, Oliver Reichenstein’s perspective on AI copycats, and why conferences like beyond tellerrand are valuable because they show creative, non-mainstream work that does not feel easily replaceable by AI-generated output.

[00:14:56] Stubborn clocks, Raspberry Pi and physics

Niels explains how he got interested in clocks through Vasilis and projects like the Diagon Clock. His own clock runs Chrome fullscreen on a round touchscreen attached to a Raspberry Pi. Instead of simply showing the correct time, it deliberately behaves badly: it misunderstands daylight saving time, forgets midnight, and keeps adding hours. Later, he added gravity using Box2D via box2d.js, turning the clock hands into physical objects that can be flicked, dropped and bounced around.

[00:20:56] Oscilloscope drawings with SVG, CSS and Web Audio

Niels then describes how his obsession with clocks led him to an oscilloscope. Instead of drawing to a normal screen, he uses Web Audio to generate left and right channel signals that steer the oscilloscope beam on the X and Y axes. The shapes come from SVG: browser APIs such as path length and point sampling are used to turn SVG geometry into audio waves. CSS transforms add an extra challenge because the raw path coordinates need to be combined with transformation matrices.

[00:37:26 ] DMX lights, smoke machines and WebUSB

We talk about controlling stage hardware from the browser. Niels uses DMX, a protocol based on 512 values sent repeatedly to connected devices. With a USB-to-DMX dongle and WebUSB, a JavaScript array can be translated into packets that control lights, smoke machines and, in theory, a stage flamethrower. The browser is not replacing a classic driver here, but JavaScript acts as the converter between the web app and the device protocol.

[00:38:18] Lasers, ILDA and Asteroids

The laser project builds on the oscilloscope work. Niels wanted to draw with lasers, inspired by Seb Lee-Delisle’s Asteroids laser projector work. A USB dongle converts browser-generated coordinates into ILDA, the protocol understood by laser projectors. Because the oscilloscope project already generated X/Y coordinates, Niels could redirect the same output to the laser projector and run experiments like Asteroids there too.

[00:46:29] CSS Doom

The biggest rabbit hole is CSS Doom. Niels parses Doom’s game data, extracts maps and renders the world mostly with HTML and CSS. Walls become div elements positioned with CSS 3D transforms. Floors and ceilings need clip-path, and lighting is handled through custom properties and filter brightness changes. JavaScript still handles gameplay and visibility optimizations, but doors, projectiles, sprite animation and many rendering details are intentionally pushed into CSS.

We also talk about how CSS Doom stress-tests browser engines. Chrome struggles with many textured 3D elements because GPU textures are not shared in the way Niels would like. Visibility optimization hides walls and rooms that are behind the player or blocked by other geometry. Newer CSS features such as anchor positioning, trigonometric functions, custom properties, stepped animations, and the future random() function all become useful when trying to make Doom run in CSS. And yes, the level exit is not a div, it is a real button.

[01:12:49] Conferences and upcoming talks

Niels will talk about CSS Doom, lasers and oscilloscope experiments at CSS Day. We also mention Fronteers, the upcoming evening conference in Dordrecht, and some planned speakers, including Syd Stumpel, Heydon Pickering, Harry Roberts, Jake Archibald and likely Anjana Vakil.

Links

Niels Leenheer at beyond tellerrand Düsseldorf 2026

The speaker page for Niels’ beyond tellerrand Düsseldorf appearance.

CSS Day tickets

Ticket page for CSS Day, where Niels will talk about CSS Doom and laser experiments.