X00 Lab

Experiments at the edge of code and design.

Everything on this bench runs here, in your browser, from code. Spin the bench, pick one up, and every page explains how it is made, what it costs and what you see without WebGL.

X01 · Procedural 3DRender Kit

Render Kit

X01 On the bench

Five running experiments.

Each has controls, a still fallback and notes on performance. None of them is a screenshot of something else.

X01 · Procedural 3D · WebGLRender KitOne scene, four passes. Hold the scanline and see the same geometry as wireframe, clay, normals and final material.
X02 · Creature motion · WebGLProcedural SpineA creature that follows you, rendered head to tail: the head is final, the tail is still wireframe.
X03 · 2D canvas · Canvas 2DBucket RendererType a word and watch it render tile by tile, the way a production renderer fills a frame.
X04 · Interface · DOMTyped GridA small, keyboard-first data grid over this site's own project catalog. A demo, not the Data Table Pro product.
X05 · Motion system · DOMMotion TokensThe easing and timing tokens this site is built on, drawn as curves you can play.

X02 The biggest experiment

Four worlds, one renderer.

The home page is the lab's largest piece: one WebGL renderer drawing four worlds in turn, every one built before the first frame and handed to the next through a veil. No model files, no images: all of it is generated.

01
Blocks
A voxel island meshed in code, with corner occlusion and 16-pixel bitmaps drawn in the shader; a block kid, crossed-card flowers, a pixel plane that dissolves into paper and lands on a book.
02
Paper city
Every shop starts flat as its net and folds up in the vertex shader, wall by wall, from hinges stored per vertex; merged per material so the whole city draws in a few hundred calls.
03
Sky and castle
Volumetric cumulus raymarched through a baked Perlin-Worley volume, every pixel every frame; a bank of it round the castle; sun shafts; a mirror pond; the VibeBox Motion dragon, simulated every frame.
04
Open sea
A wave field with foam in the afternoon sun, a reef lit through the water, caustics on the sand, and a chest whose light becomes the footer's.

Take the journey How the site holds together

X03 Bench rules

What earns a place on the bench.

01
It runs here
Nothing on the bench is a recording. Every frame is drawn in your browser, from code, while you watch.
02
It has a still
With WebGL unavailable or motion set to still, each experiment shows a designed frame, not a broken box.
03
It says what it costs
Each page notes draw calls, pixel ratio and when it stops rendering, so the budget is part of the design.
04
It has controls
Every experiment can be driven: dragged, typed into, slowed down or paused.